WID/Current/SDK/Common - Revision history

Chrissy.forrest@genesys.com: Published

2021-02-03T20:56:02Z

Published

Chrissyforrest: Published

2020-10-22T20:55:50Z

Published

Chrissyforrest: Published

2020-07-30T20:46:51Z

Published

WikiSysop: Text replacement - "\|Platform=([^\|])GenesysEngage-onpremises([\|])" to "|Platform=$1GenesysEngage-cloud$2"

2020-07-25T02:37:55Z

Text replacement - "\|Platform=([^\|]*)GenesysEngage-onpremises([\|]*)" to "|Platform=$1GenesysEngage-cloud$2"

WikiSysop: Text replacement - "\|Platforms?=([^\|])PureEngage([\|])" to "|Platform=$1GenesysEngage-onpremises$2"

2020-07-15T11:49:58Z

Text replacement - "\|Platforms?=([^\|]*)PureEngage([\|]*)" to "|Platform=$1GenesysEngage-onpremises$2"

Chrissyforrest: Published

2020-04-09T21:48:37Z

Published

Chrissyforrest: Published

2020-04-01T00:08:12Z

Published

Show changes

WikiSysop at 13:48, January 17, 2020

2020-01-17T13:48:49Z

Show changes

Mgionet: Published

2019-09-06T18:16:29Z

Published

New page

{{Article
|Standalone=No
|DisplayName=Common
|Role=Developer
|TocName=Common
|Platform=PureEngage
|ComingSoon=No
|Context=Learn how to access Widgets utility functions and dynamically generate the common HTML containers used throughout Genesys Widgets.
|Section={{Section
|Type=Structured
|alignment=Vertical
|structuredtext=Common is a utility object available for import into Plugins/Widgets and Extensions. It is also accessible directly from the path '''window._genesys.widgets.common'''.

Common provides utility functions and dynamically generates common HTML Containers used throughout Genesys Widgets.

For all examples below, assume that _genesys.widgets.common has been stored in a local variable named 'Common'.

<source lang='javascript'>var Common = _genesys.widgets.common;</source>
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.Generate.Container({options})
|alignment=Vertical
|structuredtext=Dynamically generates a new HTML Container in matching the style of Genesys Widgets with the selected components you request in your options object. Returns the generated container HTML as a jQuery wrapped set.
 
===Example===
'Generate an Overlay Container'

<source lang='javascript'>
var ndContainer = Common.Generate.Container({

type: 'overlay',
title: 'My Overlay',body: 'Some HTML here as a string or jQuery wrapped set',
icon: 'call-outgoing',
controls: 'close',
buttons: false
}),
</source>

 

'Generate a Toast Container'

<source lang='javascript'>
var ndContainer = Common.Generate.Container({

type: 'generic',
title: 'My Toast',body: 'Some HTML here as a string or jQuery wrapped set',
icon: 'chat',
controls: '',
buttons: {
type:'binary',
primary: 'OK',
secondary:'cancel'
}
}),
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}options
{{!}}{{!}}object
{{!}}{{!}}An object containing options to apply to the generated container.
{{!}}-
{{!}}{{!}}options.type
{{!}}{{!}}string
{{!}}{{!}}'generic' or 'overlay'. Overlay containers have special CSS properties for appearing inside the Overlay widget. Default is 'generic'.
{{!}}-
{{!}}{{!}}options.title
{{!}}{{!}}string
{{!}}{{!}}Title to apply to the container's titlebar area.
{{!}}-
{{!}}{{!}}options.body
{{!}}{{!}}string or jQuery wrapped set
{{!}}{{!}}The HTML body you want the container to wrap.
{{!}}-
{{!}}{{!}}options.icon
{{!}}{{!}}string
{{!}}{{!}}CSS Classname of icon to use.
{{!}}-
{{!}}{{!}}options.controls
{{!}}{{!}}string
{{!}}{{!}}Select from a set of window control buttons to show at the top right. 'close' = Show only the close button. 'minimize' = Show only the minimize button. 'all' = Show both close and minimize buttons.
{{!}}-
{{!}}{{!}}options.buttons
{{!}}{{!}}object
{{!}}{{!}}Options for displaying action buttons at the bottom of the container, such as OK and Cancel buttons.
{{!}}-
{{!}}{{!}}options.buttons.type
{{!}}{{!}}string
{{!}}{{!}}Currently 'binary' is the only supported button set at this time. Additional sets and arrangements will be available in a later release. Please pass 'binary' as the type here if you wish to show typical 'accept' and 'dismiss' buttons.
{{!}}-
{{!}}{{!}}options.buttons.primary
{{!}}{{!}}string
{{!}}{{!}}Display name on the primary button. (for example 'OK', 'Yes', 'Accept', 'Continue', etc)
{{!}}-
{{!}}{{!}}options.buttons.secondary
{{!}}{{!}}string
{{!}}{{!}}Display name on the secondary button. (for example 'Cancel', 'No', 'Dismiss', 'Reject', etc)
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.Generate.Buttons({options})
|alignment=Vertical
|structuredtext=Dynamically generates a new HTML Binary Button set in matching the style of Genesys Widgets with the selected options in your options object. Returns the buttons as a jQuery wrapped set.
 
===Example===
'Generate Binary Buttons'

<source lang='javascript'>
var ndButtons = Common.Generate.Buttons({

type: 'binary',
primary: 'OK',
secondary: 'Cancel'
}),
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}options
{{!}}{{!}}object
{{!}}{{!}}Options for generating buttons, such as OK and Cancel buttons.
{{!}}-
{{!}}{{!}}options.type
{{!}}{{!}}string
{{!}}{{!}}Currently 'binary' is the only supported button set at this time. Additional sets and arrangements will be available in a later release. Please pass 'binary' as the type here if you wish to show typical 'accept' and 'dismiss' buttons.
{{!}}-
{{!}}{{!}}options.primary
{{!}}{{!}}string
{{!}}{{!}}Display name on the primary button. (for example 'OK', 'Yes', 'Accept', 'Continue', etc)
{{!}}-
{{!}}{{!}}options.secondary
{{!}}{{!}}string
{{!}}{{!}}Display name on the secondary button. (for example 'Cancel', 'No', 'Dismiss', 'Reject', etc)
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.Generate.Icon(name)
|alignment=Vertical
|structuredtext=Dynamically generates an icon from the included icon set. Icons are in SVG format.
 
===Example===
'Generate Chat Icon'

<source lang='javascript'>
var ndChatIcon = Common.Generate.Icon('chat');
</source>

 

'Insert Chat Icon'

<source lang='javascript'>
$('#your_icon_container').append(Common.Generate.Icon('chat'));
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}name
{{!}}{{!}}string
{{!}}{{!}}Select the icon you want to generate by name. See the icon reference page for icon names.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.Generate.Scrollbar(element, {options})
|alignment=Vertical
|structuredtext=Dynamically generates a widget scrollbar for selected DOM element.
 
===Example===
'Generate Scrollbar for a container'

<source lang='javascript'>
var scrollContainer = Common.Generate.Scrollbar($('#your_container'))
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}element
{{!}}{{!}}DOM element or jQuery selector
{{!}}{{!}}Select the element to which you would like to apply scrollbar.
{{!}}-
{{!}}{{!}}options
{{!}}{{!}}object
{{!}}{{!}}This is an iScroll component. So, all the options that iScroll supports can be passed here. For more details, refer to: [http://iscrolljs.com/#configuring http://iscrolljs.com/#configuring]
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.config(object)
|alignment=Vertical
|structuredtext=Configure some debug options for Common at runtime.
 
===Example===
'Enable full debug logging'

<source lang='javascript'>
Common.config({debug: true, debugTimestamps: true});
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}object
{{!}}{{!}}object
{{!}}{{!}}Supported options are 'debug' and 'debugTimestamps'. Setting debug to true will enable debug messages created by Common.log(). Setting debugTimestamps to true will add timestamps to the front of each debug message created by Common.log(). Default value for both is false.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.checkPath(object, path)
|alignment=Vertical
|structuredtext=Check for the existence of a sub-property of an object at any depth. Returns the value of that property if found otherwise it returns false. Useful for checking configuration object paths without having to check each sub-property level individually.
 
===Example===
'Check for window._genesys.main'

<source lang='javascript'>
var oMainConfig = false;

if(oMainConfig = Common.checkPath(window, '_genesys.main')){
//... Utilize oMainConfig
}
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}object
{{!}}{{!}}object
{{!}}{{!}}An Object you want checked for a particular sub property at any depth.
{{!}}-
{{!}}{{!}}path
{{!}}{{!}}string
{{!}}{{!}}The object path in dot notation you wish to search for.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.createPath(object, path, value)
|alignment=Vertical
|structuredtext=Related to checkPath, createPath lets you specify a target object and path string but lets you create the path and set a value for it. This saves you the pain of defining each node in the path individually. All nodes in your path will be created as objects. Your final node, the property you are trying to create, will be whatever value you assign it.
 
===Example===
'Create window._genesys.main'

<source lang='javascript'>
var oMainConfig = false;

if(oMainConfig = Common.createPath(window, '_genesys.main', {debug:true})){
//... Utilize oMainConfig
}
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}object
{{!}}{{!}}object
{{!}}{{!}}An Object you want to add your new path to.
{{!}}-
{{!}}{{!}}path
{{!}}{{!}}string
{{!}}{{!}}The object path in dot notation you wish to create.
{{!}}-
{{!}}{{!}}value
{{!}}{{!}}any
{{!}}{{!}}The value you want to assign to the final node (property) in your path.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.linkify(string, options)
|alignment=Vertical
|structuredtext=Search for and convert URLs within a string into HTML links. Returns transformed string.
 
===Example===
'Check for window._genesys.main'

<source lang='javascript'>
var sString = 'Please visit www.genesys.com';
sString = Common.linkify(sString, {target: 'self'});
// sString == 'Please visit <a href='www.genesys.com' target='_self'>www.genesys.com</a>
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}string
{{!}}{{!}}string
{{!}}{{!}}Any string you want to check for URLs and have them converted.
{{!}}-
{{!}}{{!}}options
{{!}}{{!}}object
{{!}}{{!}}A list of options to apply to the linkify operation.
{{!}}-
{{!}}{{!}}options.target
{{!}}{{!}}string
{{!}}{{!}}Choose the HTML TARGET attribute to apply to the generated links. Default is '_blank'. Set this option to 'self' to apply the target '_self' to the generated links.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.log(mixed, type)
|alignment=Vertical
|structuredtext=Log something to the browser's console. When using Common.log, _genesys.main.debug must be set to true to see your logs. This allows you to add debug logging to your code without worrying about unwanted debug messages in production. If timestamps are enabled, they will be prefixed to all messages printed through Common.log.
 
===Example===
'Check the contents of window._genesys.main'

<source lang='javascript'>
var Common = _genesys.widgets.common;
Common.log(window._genesys.main);

if(!window._genesys.main){
Common.log('window._genesys.main is not defined', 'error');
}
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}mixed
{{!}}{{!}}Any
{{!}}{{!}}Any value or message you'd like to log.
{{!}}-
{{!}}{{!}}type
{{!}}{{!}}string
{{!}}{{!}}You can specify the log type, such as 'log', 'debug' and 'error'. Default type is 'log'. Note, if your browser doesn't support the 'debug' or 'error' log type, use 'log' instead.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.sanitizeHTML(string)
|alignment=Vertical
|structuredtext=Search for and escape < and > characters within a string. Returns transformed string. Useful for escaping HTML.
 
===Example===
'Check for window._genesys.main'

<source lang='javascript'>
var sString = 'Please visit <a href='www.genesys.com'
target='_self'>www.genesys.com</a>';

sString = Common.sanitizeHTML(sString);

// sString == 'Please visit <a href='www.genesys.com' target='_self'>www.genesys.com</a>''
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}string
{{!}}{{!}}string
{{!}}{{!}}Any string you want to be transformed.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.updateTemplateI18n(element, object)
|alignment=Vertical
|structuredtext=Searches through an element's contents for i18n string elements to update with new strings. Used when updating the language in real-time. Works by searching for elements with the CSS classname 'i18n' and reading the custom attribute 'data-message' to match the string name in the language object. See example below.
 
===Example===
'Check for window._genesys.main'

<source lang='javascript'>
var ndContainer = $('<div><button class='i18n' data-message='CustomButton001'>
</button></div>');

Common.updateTemplateI18n(ndContainer, {CustomButton001: 'Accept'});

// ndContainer == <div><button class='i18n' data-message='CustomButton001'>Accept</button></div>
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}element
{{!}}{{!}}jQuery wrapped set
{{!}}{{!}}Element you want to search within to replace i18n strings.
{{!}}-
{{!}}{{!}}object
{{!}}{{!}}Object of i18n Strings
{{!}}{{!}}The list of languages strings you want to update your UI with. This object comes from the App.i18n event or you can define your own custom object inline or using some other system. Object format is a simple name:value pair format. the 'data-message' attribute on your HTML element must match one of these property names to be updated.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.debugIcons
|alignment=Vertical
|structuredtext=Returns the list of all the Icons with their names that Widgets support.
 
===Example===
'Fetch and Display list of icons present in Widgets'

<source lang='javascript'>
Common.debugIcons()
</source>

 
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.debug
|alignment=Vertical
|structuredtext=Adds debug logs in to the browser's console. When using Common.debug, _genesys.main.debug must be set to true to see your logs. This allows you to add debug logging to your code without worrying about unwanted debug messages in production. If timestamps are enabled, they will be prefixed to all messages printed through Common.debug.
 
===Example===
'Check the File upload limits in WebChatService'

<source lang='javascript'>
Common.debug(data_server_returned_file_limits);
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}mixed
{{!}}{{!}}Any
{{!}}{{!}}Any value or message you'd like to add debug log. Note: This is only supported if your browser supports debug log type.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.error
|alignment=Vertical
|structuredtext=Adds error logs in to the browser's console. When using Common.error, _genesys.main.debug must be set to true to see your logs. This allows you to add error logging to your code without worrying about unwanted error messages in production.
 
===Example===
'Logging error messages'

<source lang='javascript'>
Common.error('A widget plugin did not receive the following config: ....');
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}mixed
{{!}}{{!}}Any
{{!}}{{!}}Any value or message you'd like to add error log. Note: This is only supported if your browser supports error log type.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.populateAllPlaceholders
|alignment=Vertical
|structuredtext=Adds place holder content to the input elements in a form with the given text strings.
 
===Example===
'Show placeholders strings in a form'

<source lang='javascript'>
Common.populateAllPlaceholders($('#your_form'), {strings})
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}Form Selector
{{!}}{{!}}jQuery DOM selector for a form
{{!}}{{!}}Form containing input elements. Note: Input elements should contain i18n class name and data attribute 'data-message-type' with value 'placeholder' for the place holder details to appear.
{{!}}-
{{!}}{{!}}Key/Value pairs
{{!}}{{!}}object
{{!}}{{!}}Placeholder messages that needs to be displayed. This is an object with key-value pairs where, key should be equal to the 'data-message' attribute value of an input element and value can be any text that you would like to display.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.populateLanguageStrings
|alignment=Vertical
|structuredtext=Adds the preferred language place holder text to the given input elements in a form.
 
===Example===
'Show placeholders strings in a form'

<source lang='javascript'>
Common.populateLanguageStrings($('#your_form'), {strings})
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}Form Selector
{{!}}{{!}}jQuery DOM selector for a form
{{!}}{{!}}Form containing input elements. Note: Input elements should contain i18n class name and data attribute 'data-message-type' with value 'placeholder' for the place holder details to appear.
{{!}}-
{{!}}{{!}}Key/Value pairs
{{!}}{{!}}object
{{!}}{{!}}Placeholder messages that needs to be displayed. This is an object with key-value pairs where, key should be equal to the 'data-message' attribute value of an input element and value can be any text that you would like to display.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.populateIcons
|alignment=Vertical
|structuredtext=Show all the Icons on a Widget.
 
===Example===
'Populate all Widget Icons'

<source lang='javascript'>
Common.populateIcons($('#your_continer'));
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}element
{{!}}{{!}}jQuery DOM selector
{{!}}{{!}}Specify the Widget container for which all the Icons have to be displayed.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.insertIcon
|alignment=Vertical
|structuredtext=Adds an icon before the selected element.
 
===Example===
'Insert a check mark icon to an element you desire.'

<source lang='javascript'>
Common.insertIcon($('#your_element'), 'alert-checkmark')
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}element
{{!}}{{!}}jQuery DOM selector
{{!}}{{!}}An html element to which Icon is to be displayed.
{{!}}-
{{!}}{{!}}Icon name
{{!}}{{!}}string
{{!}}{{!}}Name of the Icon that you would like to display. Note: Refer to Common.debugIcons method to find out all the icons names that widgets supports.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.injectScript
|alignment=Vertical
|structuredtext=Injects javascript code dynamically into widgets with the help of a script tag.
 
===Example===
'Inject your Widget WebChat extension plugin.'

<source lang='javascript'>
Common.injectScript('path/to/LoadWebChat.ext.js')
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}Script file name
{{!}}{{!}}string path to JavaScript file
{{!}}{{!}}JavaScript file name that needs to be injected into widgets.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.mobileScreenScale
|alignment=Vertical
|structuredtext=Re-sizes and fits Widget to any mobile screen.
 
===Example===
'Fit your widget to any mobile screen.'

<source lang='javascript'>
var mobileScaledWidget = Common.mobileScreenScale($('#your_widget'));
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}element
{{!}}{{!}}jQuery DOM Selector
{{!}}{{!}}Your main Widget wrapper container selector that contains the entire Widget with 'cx-titlebar', 'cx-body', 'cx-footer', 'cx-button-container' and 'cx-message-container' classes in it.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.showLoading
|alignment=Vertical
|structuredtext=Show loading spinner Icon.
 
===Example===
'Show loading spinner during an Ajax request'

<source lang='javascript'>
Common.showLoading($('#your_container'))
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}element
{{!}}{{!}}jQuery DOM Selector
{{!}}{{!}}An html container where loading spinner should appear. This adds a class name 'cx-loading'.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.hideLoading
|alignment=Vertical
|structuredtext=Remove loading spinner Icon.
 
===Example===
'Remove loading spinner after the Ajax request'

<source lang='javascript'>
Common.hideLoading($('#your_container'))
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}element
{{!}}{{!}}jQuery DOM Selector
{{!}}{{!}}An html container which contains the loading spinner.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.showWaiting
|alignment=Vertical
|structuredtext=Show waiting Icon.
 
===Example===
'Show waiting Icon when uploading a file.'

<source lang='javascript'>
Common.showWaiting($('#your_container'))
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}element
{{!}}{{!}}jQuery DOM Selector
{{!}}{{!}}An html container where waiting symbol should appear. This adds a class name 'cx-waiting'.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.hideWaiting
|alignment=Vertical
|structuredtext=Remove waiting Icon.
 
===Example===
'Remove waiting Icon after file upload is done.'

<source lang='javascript'>
Common.hideWaiting($('#your_container'))
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}element
{{!}}{{!}}jQuery DOM Selector
{{!}}{{!}}An html container which contains the waiting symbol.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.watch
|alignment=Vertical
|structuredtext=Repeat your function execution for every 'x' milliseconds (default 1 second) up to a maximum number of times (default - infinite) or till your function returns true.
 
===Example===
'Make Request Notifications till none are pending.'

<source lang='javascript'>
Common.watch(function(iteration, maxIterations){

if(bRequestNotificationsPending){
// ..POST Request
}
return !bRequestNotificationsPending;
}, 3000, 30)
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}function name
{{!}}{{!}}function
{{!}}{{!}}The function that you would like to execute. It should return true/false.
{{!}}-
{{!}}{{!}}frequency
{{!}}{{!}}milliseconds
{{!}}{{!}}Execute the function for every 'x' milliseconds till the it returns true.
{{!}}-
{{!}}{{!}}limit
{{!}}{{!}}number
{{!}}{{!}}The maximum number of times function is executed.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.addDialog
|alignment=Vertical
|structuredtext=Create your own dialog box and append it in to the Widget.
 
===Example===
'Add a dialog box on your preferred container div''

<source lang='javascript'>
Common.addDialog($('#your_container'), $('#your_dialog_box'), 'my_warning')
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}element
{{!}}{{!}}jQuery selector
{{!}}{{!}}The parent container that holds the dialog box.
{{!}}-
{{!}}{{!}}element
{{!}}{{!}}jQuery selector
{{!}}{{!}}The actual dialog box that you would like to display. This should contain the data-dialog attribute with the value equal to the dialog box name.
{{!}}-
{{!}}{{!}}name
{{!}}{{!}}string
{{!}}{{!}}Dialog box name.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.showDialog
|alignment=Vertical
|structuredtext=Show the dialog box that you prefer, using the dialog box name created with Common.addDialog().
 
===Example===
'Show the dialog box created using Common.addDialog()'

<source lang='javascript'>
Common.showDialog($('#your_container'), 'your_dialog_box_name');
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}element
{{!}}{{!}}jQuery Selector
{{!}}{{!}}The parent container which has the Dialog box appended in to it.
{{!}}-
{{!}}{{!}}name
{{!}}{{!}}string
{{!}}{{!}}The actual dialog box name.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.hideDialog
|alignment=Vertical
|structuredtext=Hide the dialog box that you showed using Common.showDialog().
 
===Example===
'Hide dialog box'

<source lang='javascript'>
Common.hideDialog($('#your_container'), 'your_dialog_box_name);
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}element
{{!}}{{!}}jQuery Selector
{{!}}{{!}}The parent container which is showing the dialog box.
{{!}}-
{{!}}{{!}}name
{{!}}{{!}}string
{{!}}{{!}}The actual dialog box name.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.hideDialogs
|alignment=Vertical
|structuredtext=Hide all the dialog boxes. Dialog box name is not needed here.
 
===Example===
'Hide all dialog boxes.'

<source lang='javascript'>
Common.hideDialogs($('#your_container'));
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}element
{{!}}{{!}}jQuery Selector
{{!}}{{!}}The parent container which is showing all the dialog boxes.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.bytesToSize
|alignment=Vertical
|structuredtext=Convert any number in bytes to Kilobytes, Megabytes, Gigabytes and Terabytes.
 
===Example===
'bytes to KB, MB, GB or TB.'

<source lang='javascript'>
var fileSize = Common.bytesToSize(parseInt(fileSizeInBytes));
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}bytes
{{!}}{{!}}number
{{!}}{{!}}Number in bytes size.
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Common.getFormattedTime
|alignment=Vertical
|structuredtext=Returns time in 12 hrs or 24 hrs format from the actual date timestamp. If no timestamp is provided, it uses current time.
 
===Example===
'convert date timestamp to return time in 12 hrs format'

<source lang='javascript'>
var formattedTime = Common.getFormattedTime(timestamp, 12);
</source>

 
===Arguments===

{{{!}} class="wikitable"
{{!}}-
!{{!}}Argument
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}timestamp
{{!}}{{!}}Date
{{!}}{{!}}JavaScript Date timestamp object.
{{!}}-
{{!}}{{!}}format
{{!}}{{!}}number
{{!}}{{!}}Time format with value 12 or 24.
{{!}}}
|advanced=No
|Status=No
}}
}}

@@ Line 824: / Line 824: @@
 {{!}}{{!}}frequency
 {{!}}{{!}}milliseconds
-{{!}}{{!}}Execute the function for every 'x' milliseconds till the it returns true.
+{{!}}{{!}}Execute the function for every 'x' milliseconds until it returns true.
 {{!}}-
 {{!}}{{!}}limit

@@ Line 209: / Line 209: @@
 {{!}}{{!}}options
 {{!}}{{!}}object
-{{!}}{{!}}This is an iScroll component. So, all the options that iScroll supports can be passed here. For more details, refer to: http://iscrolljs.com/#configuring
+{{!}}{{!}}This is an iScroll component. So, all the options that iScroll supports can be passed here.
 {{!}}}
 |Status=No

@@ Line 6: / Line 6: @@
 |ComingSoon=No
 |Platform=GenesysEngage-cloud
 |Section={{Section
 |alignment=Vertical
@@ Line 97: / Line 98: @@
 {{!}}{{!}}options.buttons.primary
 {{!}}{{!}}string
-{{!}}{{!}}Display name on the primary button. (for example 'OK', 'Yes', 'Accept', 'Continue', etc)
+{{!}}{{!}}Display name on the primary button. (for example 'OK', 'Yes', 'Accept', 'Continue', etc.)
 {{!}}-
 {{!}}{{!}}options.buttons.secondary
 {{!}}{{!}}string
-{{!}}{{!}}Display name on the secondary button. (for example 'Cancel', 'No', 'Dismiss', 'Reject', etc)
+{{!}}{{!}}Display name on the secondary button. (for example 'Cancel', 'No', 'Dismiss', 'Reject', etc.)
 {{!}}}
 |Status=No
@@ Line 140: / Line 141: @@
 {{!}}{{!}}options.primary
 {{!}}{{!}}string
-{{!}}{{!}}Display name on the primary button. (for example 'OK', 'Yes', 'Accept', 'Continue', etc)
+{{!}}{{!}}Display name on the primary button. (for example 'OK', 'Yes', 'Accept', 'Continue', etc.)
 {{!}}-
 {{!}}{{!}}options.secondary
 {{!}}{{!}}string
-{{!}}{{!}}Display name on the secondary button. (for example 'Cancel', 'No', 'Dismiss', 'Reject', etc)
+{{!}}{{!}}Display name on the secondary button. (for example 'Cancel', 'No', 'Dismiss', 'Reject', etc.)
 {{!}}}
 |Status=No
@@ Line 298: / Line 299: @@
 {{!}}{{!}}object
 {{!}}{{!}}object
-{{!}}{{!}}An Object you want to add your new path to.
+{{!}}{{!}}An object you want to add your new path to.
 {{!}}-
 {{!}}{{!}}path
@@ Line 629: / Line 630: @@
 {{!}}{{!}}Name for the icon to be read by screen readers.
 {{!}}}
 |Status=No
 }}{{Section
@@ Line 952: / Line 952: @@
 ==Common.showAlert==
 Show a native alert dialog box on the Widget you prefer with your own text message. By default, a primary button is added to dismiss the alert dialog.
-=== Example ===
+===Example===
 Show an alert dialog box on the Widget you prefer. But default it adds the dismiss button.
-<source lang='javascript'>
+<source lang="javascript">
 Common.showAlert($('.cx-widget.cx-webchat'), {text: 'your alert message', buttonText: 'Ok'})
 </source>
-=== Arguments ===
+===Arguments===
 {{{!}} class="wikitable"
 {{!}}-

@@ Line 5: / Line 5: @@
 |Context=Learn how to access Widgets utility functions and dynamically generate the common HTML containers used throughout Genesys Widgets.
 |ComingSoon=No
-|Platform=PureEngage
+|Platform=GenesysEngage-onpremises
 |Section={{Section
 |alignment=Vertical

WID/Current/SDK/Common - Revision history

Chrissy.forrest@genesys.com: Published

Chrissyforrest: Published

Chrissyforrest: Published

WikiSysop: Text replacement - "\|Platform=([^\|]*)GenesysEngage-onpremises([\|]*)" to "|Platform=$1GenesysEngage-cloud$2"

WikiSysop: Text replacement - "\|Platforms?=([^\|]*)PureEngage([\|]*)" to "|Platform=$1GenesysEngage-onpremises$2"

Chrissyforrest: Published

Chrissyforrest: Published

WikiSysop at 13:48, January 17, 2020

Mgionet: Published

WikiSysop: Text replacement - "\|Platform=([^\|])GenesysEngage-onpremises([\|])" to "|Platform=$1GenesysEngage-cloud$2"

WikiSysop: Text replacement - "\|Platforms?=([^\|])PureEngage([\|])" to "|Platform=$1GenesysEngage-onpremises$2"