|
|
| (3 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| | = Common = | | = Common = |
| | | | |
| − | '''Common''' is a utility object available for import into Plugins/Widgets and Extensions. It provides common utility functions and dynamically generates common HTML Containers used throughout Genesys Widgets.
| + | {{Template:PEC_Migrated}} |
| − | | |
| − | == Methods ==
| |
| − | | |
| − | === Common.Generate.Container({options}) ===
| |
| − | 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.
| |
| − | <br /><br />
| |
| − | {|
| |
| − | |-
| |
| − | ! 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. (e.g. 'OK', 'Yes', 'Accept', 'Continue', etc)
| |
| − | |-
| |
| − | | options.buttons.secondary
| |
| − | | string
| |
| − | | Display name on the secondary button. (e.g. 'Cancel', 'No', 'Dismiss', 'Reject', etc)
| |
| − | |-
| |
| − | |}
| |
| − | <br />
| |
| − | | |
| − | '''Example'''
| |
| − | | |
| − | "Generate an Overlay Container"<br/>
| |
| − | <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: "cx-img-map preset-blue px48 call-outgoing",
| |
| − | controls: "close",
| |
| − | buttons: false
| |
| − | }),
| |
| − | </source>
| |
| − | <br/>
| |
| − | "Generate a Toast Container"<br/>
| |
| − | <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: "cx-img-map preset-blue px48 chat",
| |
| − | controls: "",
| |
| − | buttons: {
| |
| − | | |
| − | type: "binary",
| |
| − | primary: "OK",
| |
| − | secondary: "Cancel"
| |
| − | }
| |
| − | }),
| |
| − | </source>
| |
| − | | |
| − | === Common.Generate.Buttons({options}) ===
| |
| − | 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.
| |
| − | <br /><br />
| |
| − | {|
| |
| − | |-
| |
| − | ! 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. (e.g. 'OK', 'Yes', 'Accept', 'Continue', etc)
| |
| − | |-
| |
| − | | options.secondary
| |
| − | | string
| |
| − | | Display name on the secondary button. (e.g. 'Cancel', 'No', 'Dismiss', 'Reject', etc)
| |
| − | |-
| |
| − | |}
| |
| − | <br />
| |
| − | | |
| − | '''Example'''
| |
| − | | |
| − | "Generate Binary Buttons"<br/>
| |
| − | <source lang="JAVASCRIPT">
| |
| − | var ndButtons = Common.Generate.Buttons( {
| |
| − | | |
| − | type: "binary",
| |
| − | primary: "OK",
| |
| − | secondary: "Cancel"
| |
| − | }),
| |
| − | </source>
| |
| − | | |
| − | === Common.checkPath(object, path) ===
| |
| − | 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.
| |
| − | <br /><br />
| |
| − | {|
| |
| − | |-
| |
| − | ! 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.
| |
| − | |-
| |
| − | |}
| |
| − | <br />
| |
| − | | |
| − | '''Example'''
| |
| − | | |
| − | "Check for window._genesys.main"<br/>
| |
| − | <source lang="JAVASCRIPT">
| |
| − |
| |
| − | var oMainConfig = false;
| |
| − | | |
| − | if(oMainConfig = Common.checkPath(window, "_genesys.main")){
| |
| − |
| |
| − | //... Utilize oMainConfig
| |
| − | }
| |
| − | </source>
| |
| − | | |
| − | | |
| − | === Common.linkify(string, options) ===
| |
| − | Search for and convert URLs within a string into HTML links. Returns transformed string.
| |
| − | <br /><br />
| |
| − | {|
| |
| − | |-
| |
| − | ! 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.
| |
| − | |-
| |
| − | |}
| |
| − | <br />
| |
| − | | |
| − | '''Example'''
| |
| − | | |
| − | "Check for window._genesys.main"<br/>
| |
| − | <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>
| |
| − | | |
| − | | |
| − | === Common.sanitizeHTML(string) ===
| |
| − | Search for and escape '''<''' and '''>''' characters within a string. Returns transformed string. Useful for escaping HTML.
| |
| − | <br /><br />
| |
| − | {|
| |
| − | |-
| |
| − | ! Argument
| |
| − | ! Type
| |
| − | ! Description
| |
| − | |-
| |
| − | | string
| |
| − | | string
| |
| − | | Any string you want to be transformed.
| |
| − | |-
| |
| − | |}
| |
| − | <br />
| |
| − | | |
| − | '''Example'''
| |
| − | | |
| − | "Check for window._genesys.main"<br/>
| |
| − | <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>
| |
| − | | |
| − | === Common.updateTemplateI18n(element, object) ===
| |
| − | 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.
| |
| − | <br /><br />
| |
| − | {|
| |
| − | |-
| |
| − | ! 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.
| |
| − | |-
| |
| − | |}
| |
| − | <br />
| |
| − | | |
| − | '''Example'''
| |
| − | | |
| − | "Check for window._genesys.main"<br/>
| |
| − | <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>
| |
| | | | |
| | | | |
| | + | {{NoteFormat|Documentation for this software has moved to a new home. Please update links and bookmarks to content hosted at https://all.docs.genesys.com/WID/Current/SDK/Common.}} |
| | | | |
| | [[Category:V:PSAAS:Public]] | | [[Category:V:PSAAS:Public]] |
