WID/Current/SDK/Overlay-combined - Revision history

Chrissy.forrest@genesys.com: Published

2021-02-03T20:56:18Z

Published

Chrissyforrest: Published

2020-10-22T21:29:58Z

Published

Chrissyforrest: Published

2020-07-30T20:54:21Z

Published

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

2020-07-25T02:38:45Z

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

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

2020-07-15T11:49:26Z

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

Chrissyforrest: Published

2020-04-09T21:49:04Z

Published

WikiSysop at 13:49, January 17, 2020

2020-01-17T13:49:12Z

Mgionet: Published

2019-09-06T18:16:27Z

Published

New page

{{Article
|Standalone=No
|DisplayName=Overlay
|Role=Developer
|TocName=Overlay
|Platform=PureEngage
|ComingSoon=No
|Context=Learn how to use an overlay window control that widgets can inject their UI into.
|Section={{Section
|Type=Structured
|sectionHeading=Overview
|alignment=Vertical
|structuredtext=The Overlay plugin provides an overlay window control that widgets can inject their UI into, accepting the HTML UI, placing it inside an overlay control, and displaying the UI onscreen in a uniform overlay window fashion. This prevents individual widgets from managing the overlay themselves. It also means that each widget's UI can be moved between different container types.

Overlay provides these benefits
* Shows UI in center of window
* Open and close transition animations
* No overlapping overlays. Only one at a time. Automatically managed by the Overlay plugin
* Auto-recenter as browser window size is changed
* Automatic application of mobile styles when running in mobile mode

===Usage===
Overlay is easy to use; you simply open and close it. When you call Overlay.open, you pass-in the HTML content you want to show. If you call Overlay.open again while an overlay is already open, it will automatically close the previous overlay before showing yours (unless the previous overlay has reserved the overlay to prevent new overlays).

{{NoteFormat|By default the overlay has no visible styles or content. You must pass in the HTML you want to show inside the Overlay area. Typically you should create an overlay-type container using Common.Generate.Container, put your content inside that, then send the whole thing into Overlay.open.}}
===Customization===
Overlay does not have customization options.
===Mobile Support===
Overlay automatically applies mobile CSS styles to its outer container to affect the content within the overlay view. It is up to the content inside the overlay view to dynamically change when the Genesys Widgets .cx-mobile CSS classname is applied to an outer container.
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Configuration
|alignment=Vertical
|structuredtext=Overlay does not have configuration options.
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=Localization
|alignment=Vertical
|structuredtext=Overlay does not have localization options.
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=API Commands
|alignment=Vertical
|structuredtext=Once you've registered your plugin on the bus, you can call commands on other registered plugins. Here's how to use the global bus object to register a new plugin on the bus.

{{NoteFormat|The global bus object is a debugging tool. When implementing Widgets on your own site, do not use the global bus object to register your custom plugins. Instead, see {{Link-SomewhereInThisManual|topic=GWCBusExtensions|anchor=top|display text=Widgets Extensions}} for more information about extending Genesys Widgets.|1}}

<source lang='javascript'>var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');

oMyPlugin.command('Overlay.close');</source>

===open===
Opens the provided HTML in an Overlay View. When successful, it returns back the HTML and a custom close event for you to subscribe to. This alerts you when your overlay instance has been closed. You can also make your overlay immutable so that new overlay instances don't close yours. Only your widget can close its overlay when immutable is set to true.
====Example====
<source lang='javascript'>
oMyPlugin.command('Overlay.open', {

html: '<div>Template</div>',
immutable: false,
group: false

}).done(function(e){

// Overlay opens successfully

}).fail(function(e){

// Overlay failed to open
});
</source>

====Options====

{{{!}} class="wikitable"
{{!}}-
!{{!}}Option
!{{!}}Type
!{{!}}Description
{{!}}-
{{!}}{{!}}html
{{!}}{{!}}string
{{!}}{{!}}HTML String template for overlay window.
{{!}}-
{{!}}{{!}}immutable
{{!}}{{!}}boolean
{{!}}{{!}}When set to true, overlay cannot be closed by other plugins.
{{!}}-
{{!}}{{!}}group
{{!}}{{!}}string
{{!}}{{!}}The name of the overlay window group you want to add a new overlay view into.
{{!}}}

====Resolutions====

{{{!}} class="wikitable"
{{!}}-
!{{!}}Status
!{{!}}When
!{{!}}Returns
{{!}}-
{{!}}{{!}}resolved
{{!}}{{!}}When overlay is successfully opened
{{!}}{{!}}{html: , events: <object>, group: } rejected When no html template is passed 'No HTML content was provided. Overlay has ignored your command.' rejected When overlay is already opened 'Overlay view is currently reserved.'

<div>
===close===
</div>Closes the Overlay UI. Publishes the appropriate custom close event for current overlay being closed.

<div>
====Example====
</div>
<span id="<source lang='javascript'>
oMyPlugin.command('Overlay.close').done(function(e){

// Overlay closed successfully

}).fail(function(e){

// Overlay failed to close
});
</source>" class="mceNonEditable wikimagic mw-tag" title="<source lang='javascript'>oMyPlugin.command('Overlay.close').done(function(e){ // Overlay closed successfully}).fail(function(e){ // Overlay failed to close});</source>" contenteditable="false" data-mw-type="tag" data-mw-id="166014" data-mw-name="source" data-mw-wikitext="%3Csource%20lang='javascript'%3E%0AoMyPlugin.command('Overlay.close').done(function(e)%7B%0A%0A%09//%20Overlay%20closed%20successfully%0A%0A%7D).fail(function(e)%7B%0A%0A%09//%20Overlay%20failed%20to%20close%0A%7D);%0A%3C/source%3E"></span>

<div>
====Resolutions====
</div><div>
{{{!}}
{{!}}-
!{{!}} Status
!{{!}} When
!{{!}} Returns
{{!}}-
{{!}}{{!}} resolved
{{!}}{{!}} When Overlay is successfully closed.
{{!}}{{!}} n/a
{{!}}-
{{!}}{{!}} rejected
{{!}}{{!}} When Overlay is already closed.
{{!}}{{!}} 'Overlay view is already closed'
{{!}}-
{{!}}{{!}} rejected
{{!}}{{!}} When Overlay view is immutable.
{{!}}{{!}} 'Overlay view is currently reserved'
{{!}}}
</div></object>
{{!}}}
|advanced=No
|Status=No
}}{{Section
|Type=Structured
|sectionHeading=API Events
|alignment=Vertical
|structuredtext=Once you've registered your plugin on the bus, you can subscribe to and listen for published events. Here's how to use the global bus object to register a new plugin on the bus.

{{NoteFormat|The global bus object is a debugging tool. When implementing Widgets on your own site, do not use the global bus object to register your custom plugins. Instead, see {{Link-SomewhereInThisManual|topic=GWCBusExtensions|anchor=top|display text=Widgets Extensions}} for more information about extending Genesys Widgets.|1}}

<source lang='javascript'>var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');

oMyPlugin.subscribe('Overlay.ready', function(e){});</source>
{{{!}} class="wikitable"
{{!}}-
!{{!}}Name
!{{!}}Description
!{{!}}Data
{{!}}-
{{!}}{{!}}ready
{{!}}{{!}}The Overlay plugin is initialized and ready to accept commands
{{!}}{{!}}n/a
{{!}}}
|advanced=No
|Status=No
}}
}}

@@ Line 44: / Line 44: @@
 |structuredtext=Once you've registered your plugin on the bus, you can call commands on other registered plugins. Here's how to use the global bus object to register a new plugin on the bus.
-{{NoteFormat|The global bus object is a debugging tool. When implementing Widgets on your own site, do not use the global bus object to register your custom plugins. Instead, see {{Link-SomewhereInThisManual|topic=GWCBusExtensions|anchor=top|display text=Widgets Extensions}} for more information about extending Genesys Widgets.|1}}
+{{NoteFormat|The global bus object is a debugging tool. When implementing Widgets on your own site, do not use the global bus object to register your custom plugins. Instead, see {{Link-SomewhereInThisVersion|manual=SDK|topic=GWCBusExtensions|display text=Genesys Widgets Extensions}} for more information about extending Genesys Widgets.|1}}
@@ Line 113: / Line 113: @@
 ====Example====
 </div>
-<span id="<source lang=&quot;&quot;javascript&quot;&quot;>
+<span id="<source lang=&quot;&quot;&quot;javascript&quot;&quot;&quot;>
 oMyPlugin.command('Overlay.close').done(function(e){
@@ Line 122: / Line 122: @@
 	// Overlay failed to close
 });
-</source>" class="mceNonEditable wikimagic mw-tag" title="<source lang=&quot;&quot;javascript&quot;&quot;>oMyPlugin.command('Overlay.close').done(function(e){	// Overlay closed successfully}).fail(function(e){	// Overlay failed to close});</source>" data-mw-type="tag" data-mw-id="166014" data-mw-name="source" data-mw-wikitext="%3Csource%20lang='javascript'%3E%0AoMyPlugin.command('Overlay.close').done(function(e)%7B%0A%0A%09//%20Overlay%20closed%20successfully%0A%0A%7D).fail(function(e)%7B%0A%0A%09//%20Overlay%20failed%20to%20close%0A%7D);%0A%3C/source%3E" contenteditable="false"></span>
+</source>" class="mceNonEditable wikimagic mw-tag" title="<source lang=&quot;&quot;&quot;javascript&quot;&quot;&quot;>oMyPlugin.command('Overlay.close').done(function(e){	// Overlay closed successfully}).fail(function(e){	// Overlay failed to close});</source>" data-mw-type="tag" data-mw-id="166014" data-mw-name="source" data-mw-wikitext="%3Csource%20lang='javascript'%3E%0AoMyPlugin.command('Overlay.close').done(function(e)%7B%0A%0A%09//%20Overlay%20closed%20successfully%0A%0A%7D).fail(function(e)%7B%0A%0A%09//%20Overlay%20failed%20to%20close%0A%7D);%0A%3C/source%3E" contenteditable="false"></span>
 <div>
@@ Line 153: / Line 153: @@
 |structuredtext=Once you've registered your plugin on the bus, you can subscribe to and listen for published events. Here's how to use the global bus object to register a new plugin on the bus.
-{{NoteFormat|The global bus object is a debugging tool. When implementing Widgets on your own site, do not use the global bus object to register your custom plugins. Instead, see {{Link-SomewhereInThisManual|topic=GWCBusExtensions|anchor=top|display text=Widgets Extensions}} for more information about extending Genesys Widgets.|1}}
+{{NoteFormat|The global bus object is a debugging tool. When implementing Widgets on your own site, do not use the global bus object to register your custom plugins. Instead, see {{Link-SomewhereInThisVersion|manual=SDK|topic=GWCBusExtensions|display text=Genesys Widgets Extensions}} for more information about extending Genesys Widgets.|1}}
 <source lang="javascript">var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');

@@ Line 9: / Line 9: @@
 |Section={{Section
 |sectionHeading=Overview
 |alignment=Vertical
 |structuredtext=The Overlay plugin provides an overlay window control that widgets can inject their UI into, accepting the HTML UI, placing it inside an overlay control, and displaying the UI onscreen in a uniform overlay window fashion. This prevents individual widgets from managing the overlay themselves. It also means that each widget's UI can be moved between different container types.
@@ Line 31: / Line 32: @@
 }}{{Section
 |sectionHeading=Configuration
 |alignment=Vertical
 |structuredtext=Overlay does not have configuration options.
@@ Line 36: / Line 38: @@
 }}{{Section
 |sectionHeading=Localization
 |alignment=Vertical
 |structuredtext=Overlay does not have localization options.
 |Status=No
 }}{{Section
-|sectionHeading=API Commands
+|sectionHeading=API commands
 |alignment=Vertical
 |structuredtext=Once you've registered your plugin on the bus, you can call commands on other registered plugins. Here's how to use the global bus object to register a new plugin on the bus.
@@ Line 113: / Line 117: @@
 ====Example====
 </div>
-<span id="<source lang=&quot;&quot;&quot;javascript&quot;&quot;&quot;>
+<span id="<source lang=&quot;&quot;&quot;&quot;javascript&quot;&quot;&quot;&quot;>
 oMyPlugin.command('Overlay.close').done(function(e){
@@ Line 122: / Line 126: @@
 	// Overlay failed to close
 });
-</source>" class="mceNonEditable wikimagic mw-tag" title="<source lang=&quot;&quot;&quot;javascript&quot;&quot;&quot;>oMyPlugin.command('Overlay.close').done(function(e){	// Overlay closed successfully}).fail(function(e){	// Overlay failed to close});</source>" data-mw-type="tag" data-mw-id="166014" data-mw-name="source" data-mw-wikitext="%3Csource%20lang='javascript'%3E%0AoMyPlugin.command('Overlay.close').done(function(e)%7B%0A%0A%09//%20Overlay%20closed%20successfully%0A%0A%7D).fail(function(e)%7B%0A%0A%09//%20Overlay%20failed%20to%20close%0A%7D);%0A%3C/source%3E" contenteditable="false"></span>
+</source>" class="mceNonEditable wikimagic mw-tag" title="<source lang=&quot;&quot;&quot;&quot;javascript&quot;&quot;&quot;&quot;>oMyPlugin.command('Overlay.close').done(function(e){	// Overlay closed successfully}).fail(function(e){	// Overlay failed to close});</source>" data-mw-type="tag" data-mw-id="166014" data-mw-name="source" data-mw-wikitext="%3Csource%20lang='javascript'%3E%0AoMyPlugin.command('Overlay.close').done(function(e)%7B%0A%0A%09//%20Overlay%20closed%20successfully%0A%0A%7D).fail(function(e)%7B%0A%0A%09//%20Overlay%20failed%20to%20close%0A%7D);%0A%3C/source%3E" contenteditable="false"></span>
 <div>
@@ Line 149: / Line 153: @@
 |Status=No
 }}{{Section
-|sectionHeading=API Events
+|sectionHeading=API events
 |alignment=Vertical
 |structuredtext=Once you've registered your plugin on the bus, you can subscribe to and listen for published events. Here's how to use the global bus object to register a new plugin on the bus.

@@ Line 3: / Line 3: @@
 |DisplayName=Overlay
 |TocName=Overlay
 |Platform=GenesysEngage-cloud
-|ComingSoon=No
+|Role=Developer
 |Section={{Section
 |sectionHeading=Overview
 |alignment=Vertical
 |structuredtext=The Overlay plugin provides an overlay window control that widgets can inject their UI into, accepting the HTML UI, placing it inside an overlay control, and displaying the UI onscreen in a uniform overlay window fashion. This prevents individual widgets from managing the overlay themselves. It also means that each widget's UI can be moved between different container types.
-Overlay provides these benefits
+Overlay provides these benefits:
 * Shows UI in center of window
-* Open and close transition animations
+*Shows the UI in the center of the window.
-* No overlapping overlays. Only one at a time. Automatically managed by the Overlay plugin
+*Open and close transition animations.
-* Auto-recenter as browser window size is changed
+*No overlapping overlays. Only one at a time. Automatically managed by the Overlay plugin.
-* Automatic application of mobile styles when running in mobile mode
+*Auto-recenter as the browser window size is changed.
 ===Usage===
-Overlay is easy to use; you simply open and close it. When you call Overlay.open, you pass-in the HTML content you want to show. If you call Overlay.open again while an overlay is already open, it will automatically close the previous overlay before showing yours (unless the previous overlay has reserved the overlay to prevent new overlays).
+Overlay is easy to use; you simply open and close it. When you call Overlay.open, you pass in the HTML content you want to show. If you call Overlay.open again while an overlay is already open, it will automatically close the previous overlay before showing yours (unless the previous overlay has reserved the overlay to prevent new overlays).
-{{NoteFormat|By default the overlay has no visible styles or content. You must pass in the HTML you want to show inside the Overlay area. Typically you should create an overlay-type container using Common.Generate.Container, put your content inside that, then send the whole thing into Overlay.open.}}
+{{NoteFormat|By default, the overlay has no visible styles or content. You must pass in the HTML you want to show inside the Overlay area. Typically you should create an overlay-type container using Common.Generate.Container, put your content inside that, then send the whole thing into Overlay.open.|}}
 ===Customization===
 Overlay does not have customization options.
 ===Mobile Support===
 Overlay automatically applies mobile CSS styles to its outer container to affect the content within the overlay view. It is up to the content inside the overlay view to dynamically change when the Genesys Widgets .cx-mobile CSS classname is applied to an outer container.
 |Status=No
 }}{{Section
 |sectionHeading=Configuration
 |alignment=Vertical
 |structuredtext=Overlay does not have configuration options.
 |Status=No
 }}{{Section
 |sectionHeading=Localization
 |alignment=Vertical
 |structuredtext=Overlay does not have localization options.
 |Status=No
 }}{{Section
 |sectionHeading=API Commands
 |alignment=Vertical
 |structuredtext=Once you've registered your plugin on the bus, you can call commands on other registered plugins. Here's how to use the global bus object to register a new plugin on the bus.
@@ Line 56: / Line 47: @@
-<source lang='javascript'>var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');
+<source lang="javascript">var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');
 oMyPlugin.command('Overlay.close');</source>
@@ Line 64: / Line 55: @@
 Opens the provided HTML in an Overlay View. When successful, it returns back the HTML and a custom close event for you to subscribe to. This alerts you when your overlay instance has been closed. You can also make your overlay immutable so that new overlay instances don't close yours. Only your widget can close its overlay when immutable is set to true.
 ====Example====
-<source lang='javascript'>
+<source lang="javascript">
 oMyPlugin.command('Overlay.open', {
@@ Line 122: / Line 113: @@
 ====Example====
 </div>
-<span id="<source lang='javascript'>
+<span id="<source lang=&quot;&quot;javascript&quot;&quot;>
 oMyPlugin.command('Overlay.close').done(function(e){
@@ Line 131: / Line 122: @@
 	// Overlay failed to close
 });
-</source>" class="mceNonEditable wikimagic mw-tag" title="<source lang='javascript'>oMyPlugin.command('Overlay.close').done(function(e){	// Overlay closed successfully}).fail(function(e){	// Overlay failed to close});</source>" contenteditable="false" data-mw-type="tag" data-mw-id="166014" data-mw-name="source" data-mw-wikitext="%3Csource%20lang='javascript'%3E%0AoMyPlugin.command('Overlay.close').done(function(e)%7B%0A%0A%09//%20Overlay%20closed%20successfully%0A%0A%7D).fail(function(e)%7B%0A%0A%09//%20Overlay%20failed%20to%20close%0A%7D);%0A%3C/source%3E"></span>
+</source>" class="mceNonEditable wikimagic mw-tag" title="<source lang=&quot;&quot;javascript&quot;&quot;>oMyPlugin.command('Overlay.close').done(function(e){	// Overlay closed successfully}).fail(function(e){	// Overlay failed to close});</source>" data-mw-type="tag" data-mw-id="166014" data-mw-name="source" data-mw-wikitext="%3Csource%20lang='javascript'%3E%0AoMyPlugin.command('Overlay.close').done(function(e)%7B%0A%0A%09//%20Overlay%20closed%20successfully%0A%0A%7D).fail(function(e)%7B%0A%0A%09//%20Overlay%20failed%20to%20close%0A%7D);%0A%3C/source%3E" contenteditable="false"></span>
 <div>
@@ Line 138: / Line 129: @@
 {{{!}}
 {{!}}-
-!{{!}} Status
+!{{!}}Status
-!{{!}} When
+!{{!}}When
-!{{!}} Returns
+!{{!}}Returns
 {{!}}-
-{{!}}{{!}} resolved
+{{!}}{{!}}resolved
-{{!}}{{!}} When Overlay is successfully closed.
+{{!}}{{!}}When Overlay is successfully closed.
-{{!}}{{!}} n/a
+{{!}}{{!}}n/a
 {{!}}-
-{{!}}{{!}} rejected
+{{!}}{{!}}rejected
-{{!}}{{!}} When Overlay is already closed.
+{{!}}{{!}}When Overlay is already closed.
-{{!}}{{!}} 'Overlay view is already closed'
+{{!}}{{!}}'Overlay view is already closed'
 {{!}}-
-{{!}}{{!}} rejected
+{{!}}{{!}}rejected
-{{!}}{{!}} When Overlay view is immutable.
+{{!}}{{!}}When Overlay view is immutable.
-{{!}}{{!}} 'Overlay view is currently reserved'
+{{!}}{{!}}'Overlay view is currently reserved'
 {{!}}}
 </div></object>
 {{!}}}
 |Status=No
 }}{{Section
 |sectionHeading=API Events
 |alignment=Vertical
 |structuredtext=Once you've registered your plugin on the bus, you can subscribe to and listen for published events. Here's how to use the global bus object to register a new plugin on the bus.
@@ Line 168: / Line 156: @@
-<source lang='javascript'>var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');
+<source lang="javascript">var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');
 oMyPlugin.subscribe('Overlay.ready', function(e){});</source>
@@ Line 181: / Line 169: @@
 {{!}}{{!}}n/a
 {{!}}}
 |Status=No
 }}
 }}

@@ Line 2: / Line 2: @@
 |Standalone=No
 |DisplayName=Overlay
 |TocName=Overlay
 |Platform=PureEngage

WID/Current/SDK/Overlay-combined - 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

WikiSysop at 13:49, 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"