Difference between revisions of "WID/Current/SDK/Toaster-combined"

From Genesys Documentation
Jump to: navigation, search
(Published)
(Published)
 
(4 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
|DisplayName=Toaster
 
|DisplayName=Toaster
 
|TocName=Toaster
 
|TocName=Toaster
−
|Platform=PureEngage
+
|Context=Learn how to use a toast view control into which widgets can inject their UI.
 
|ComingSoon=No
 
|ComingSoon=No
−
|Context=Learn how to use a toast view control that widgets can inject their UI into.
+
|Platform=GenesysEngage-cloud
 +
|Role=Developer
 
|Section={{Section
 
|Section={{Section
 
|sectionHeading=Overview
 
|sectionHeading=Overview
−
|Standalone=No
 
−
|ComingSoon=No
 
 
|alignment=Vertical
 
|alignment=Vertical
−
|structuredtext=The Toaster plugin provides a toast view control that widgets can inject their UI into, accepting the HTML UI, placing it inside a toast view, and displaying the UI onscreen in the lower-bottom-right of the screen. When it is opened, it slides up from the bottom. When it is closed, it slides down until it is offscreen.  
+
|structuredtext=The Toaster plugin provides a toast view control that widgets can inject their UI into, accepting the HTML UI, placing it inside a toast view, and displaying the UI on-screen at the lower-bottom-right. When it opens, it slides up from the bottom. When it closes, it slides down until it is off-screen.  
  
 
Toaster provides these benefits:
 
Toaster provides these benefits:
−
* Shows UI as a slide-up toast view in the lower-bottom-right of the screen.
+
 
−
* Open and close transition animations.
+
*Shows UI as a slide-up toast view in the lower-bottom-right of the screen.
−
* No overlapping toasts, only one at a time. Automatically managed by the Toaster plugin.
+
*Open and close transition animations.
 +
*No overlapping toasts; only one at a time. Automatically managed by the Toaster plugin.
  
 
===Usage===
 
===Usage===
−
Toaster is easy to use: you simply open and close it. When you call Toaster.open, you pass in the HTML content you want to show. If you call Toaster.open again while a toast is already open, it will automatically close the previous toast before showing yours (unless the previous toast has reserved the view to prevent new toasts).
+
Toaster is easy to use - you simply open and close it. When you call Toaster.open, you pass in the HTML content you want to show. If you call Toaster.open again while a toast is already open, it will automatically close the previous toast before showing yours (unless the previous toast has reserved the view to prevent new toasts).
−
 
 
−
{{NoteFormat|Only one toast can be shown at a time. If you attempt to open a second toast, the first toast will be dismissed automatically before showing the second toast.}}
 
 
===Namespace===
 
===Namespace===
−
The Toaster plugin has the following namespaces tied up with each of the following types.  
+
The Toaster plugin has the following namespaces tied to each of the following types.  
 
{{{!}} class="wikitable" style="width: auto;"
 
{{{!}} class="wikitable" style="width: auto;"
 
{{!}}-
 
{{!}}-
Line 35: Line 33:
 
{{!}}{{!}}.cx-toaster
 
{{!}}{{!}}.cx-toaster
 
{{!}}}
 
{{!}}}
−
 
  
 
===Customization===
 
===Customization===
 
Toaster does not have customization options.
 
Toaster does not have customization options.
−
===Mobile Support===
+
===Mobile support===
 
Toaster does not have mobile-specific styles at this time.
 
Toaster does not have mobile-specific styles at this time.
−
|advanced=No
 
 
|Status=No
 
|Status=No
 
}}{{Section
 
}}{{Section
 
|sectionHeading=Configuration
 
|sectionHeading=Configuration
−
|Standalone=No
 
−
|ComingSoon=No
 
 
|alignment=Vertical
 
|alignment=Vertical
 
|structuredtext=Toaster does not have configuration options.
 
|structuredtext=Toaster does not have configuration options.
−
|advanced=No
 
 
|Status=No
 
|Status=No
 
}}{{Section
 
}}{{Section
 
|sectionHeading=Localization
 
|sectionHeading=Localization
−
|Standalone=No
 
−
|ComingSoon=No
 
 
|alignment=Vertical
 
|alignment=Vertical
 
|structuredtext=Toaster does not have localization options.
 
|structuredtext=Toaster does not have localization options.
−
|advanced=No
 
 
|Status=No
 
|Status=No
 
}}{{Section
 
}}{{Section
 
|sectionHeading=API Commands
 
|sectionHeading=API Commands
 
|anchor=commands
 
|anchor=commands
−
|Standalone=No
 
−
|ComingSoon=No
 
 
|alignment=Vertical
 
|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.
 
|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}}
  
  
−
<source lang='javascript'>var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');
+
<source lang="javascript">var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');
  
 
oMyPlugin.command('Toaster.close');</source>
 
oMyPlugin.command('Toaster.close');</source>
Line 76: Line 64:
 
Opens the Toaster UI.
 
Opens the Toaster UI.
 
====Example====
 
====Example====
−
<source lang='javascript'>
+
<source lang="javascript">
 
oMyPlugin.command('Toaster.open', {
 
oMyPlugin.command('Toaster.open', {
  
Line 112: Line 100:
 
{{!}}{{!}}type
 
{{!}}{{!}}type
 
{{!}}{{!}}string
 
{{!}}{{!}}string
−
{{!}}{{!}}Specifies the type of body content that can be provided to toaster window. Generic type shows the default body content and custom type overrides the default html body content.
+
{{!}}{{!}}Specifies the type of body content that can be provided to Toaster window. Generic type shows the default body content and custom type overrides the default html body content.
 
{{!}}-
 
{{!}}-
 
{{!}}{{!}}title
 
{{!}}{{!}}title
 
{{!}}{{!}}string
 
{{!}}{{!}}string
−
{{!}}{{!}}Heading title to display on the toaster window.
+
{{!}}{{!}}Heading title to display on the Toaster window.
 
{{!}}-
 
{{!}}-
 
{{!}}{{!}}body
 
{{!}}{{!}}body
 
{{!}}{{!}}string
 
{{!}}{{!}}string
−
{{!}}{{!}}Holds text value for Generic toaster type and html string template for Custom toaster type.
+
{{!}}{{!}}Holds text value for Generic Toaster type and html string template for Custom Toaster type.
 
{{!}}-
 
{{!}}-
 
{{!}}{{!}}icon
 
{{!}}{{!}}icon
Line 128: Line 116:
 
{{!}}{{!}}controls
 
{{!}}{{!}}controls
 
{{!}}{{!}}string
 
{{!}}{{!}}string
−
{{!}}{{!}}Show close and minimize controls on toaster window.
+
{{!}}{{!}}Show close and minimize controls on Toaster window.
 
{{!}}-
 
{{!}}-
 
{{!}}{{!}}buttons
 
{{!}}{{!}}buttons
Line 136: Line 124:
 
{{!}}{{!}}buttons.type
 
{{!}}{{!}}buttons.type
 
{{!}}{{!}}string
 
{{!}}{{!}}string
−
{{!}}{{!}}Shows two buttons on the toaster.
+
{{!}}{{!}}Shows two buttons on the Toaster .
 
{{!}}-
 
{{!}}-
 
{{!}}{{!}}buttons.primary
 
{{!}}{{!}}buttons.primary
Line 148: Line 136:
 
{{!}}{{!}}immutable
 
{{!}}{{!}}immutable
 
{{!}}{{!}}boolean
 
{{!}}{{!}}boolean
−
{{!}}{{!}}When set to true, toaster cannot be closed by other plugins.
+
{{!}}{{!}}When set to true, Toaster  cannot be closed by other plugins.
 
{{!}}}
 
{{!}}}
  
Line 161: Line 149:
 
{{!}}-
 
{{!}}-
 
{{!}}{{!}}resolved
 
{{!}}{{!}}resolved
−
{{!}}{{!}}When Toaster is successfully opened
+
{{!}}{{!}}Toaster is successfully opened
 
{{!}}{{!}}n/a
 
{{!}}{{!}}n/a
 
{{!}}-
 
{{!}}-
 
{{!}}{{!}}rejected
 
{{!}}{{!}}rejected
−
{{!}}{{!}}When no toaster type is specified
+
{{!}}{{!}}No Toaster type is specified
 
{{!}}{{!}}'No content was provided. Toaster has ignored your command'
 
{{!}}{{!}}'No content was provided. Toaster has ignored your command'
 
{{!}}-
 
{{!}}-
 
{{!}}{{!}}rejected
 
{{!}}{{!}}rejected
−
{{!}}{{!}}When toaster is already opened
+
{{!}}{{!}}Toaster is already opened
 
{{!}}{{!}}'Toaster view is currently reserved'
 
{{!}}{{!}}'Toaster view is currently reserved'
 
{{!}}}
 
{{!}}}
Line 177: Line 165:
 
Closes the Toaster UI.
 
Closes the Toaster UI.
 
====Example====
 
====Example====
−
<source lang='javascript'>
+
<source lang="javascript">
 
oMyPlugin.command('Toaster.close').done(function(e){
 
oMyPlugin.command('Toaster.close').done(function(e){
  
Line 197: Line 185:
 
{{!}}-
 
{{!}}-
 
{{!}}{{!}}resolved
 
{{!}}{{!}}resolved
−
{{!}}{{!}}When toaster is successfully closed.
+
{{!}}{{!}}Toaster is successfully closed
 
{{!}}{{!}}n/a
 
{{!}}{{!}}n/a
 
{{!}}-
 
{{!}}-
 
{{!}}{{!}}rejected
 
{{!}}{{!}}rejected
−
{{!}}{{!}}When Toaster is already closed.
+
{{!}}{{!}}Toaster is already closed
 
{{!}}{{!}}'Toaster view is already closed'
 
{{!}}{{!}}'Toaster view is already closed'
 
{{!}}-
 
{{!}}-
 
{{!}}{{!}}rejected
 
{{!}}{{!}}rejected
−
{{!}}{{!}}When Toaster view is immutable.
+
{{!}}{{!}}Toaster view is immutable
 
{{!}}{{!}}'Toaster view is currently reserved'
 
{{!}}{{!}}'Toaster view is currently reserved'
 
{{!}}}
 
{{!}}}
−
|advanced=No
 
 
|Status=No
 
|Status=No
 
}}{{Section
 
}}{{Section
 
|sectionHeading=API Events
 
|sectionHeading=API Events
 
|anchor=events
 
|anchor=events
−
|Standalone=No
 
−
|ComingSoon=No
 
 
|alignment=Vertical
 
|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.
 
|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');
+
<source lang="javascript">var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');
  
 
oMyPlugin.subscribe('Toaster.ready', function(e){});</source>
 
oMyPlugin.subscribe('Toaster.ready', function(e){});</source>
Line 238: Line 222:
 
{{!}}{{!}}n/a
 
{{!}}{{!}}n/a
 
{{!}}}
 
{{!}}}
−
|advanced=No
 
 
|Status=No
 
|Status=No
 
}}
 
}}
 
}}
 
}}

Latest revision as of 21:30, October 22, 2020

This topic is part of the manual Widgets API Reference for version Current of Widgets.

Learn how to use a toast view control into which widgets can inject their UI.

Related documentation:

Overview

The Toaster plugin provides a toast view control that widgets can inject their UI into, accepting the HTML UI, placing it inside a toast view, and displaying the UI on-screen at the lower-bottom-right. When it opens, it slides up from the bottom. When it closes, it slides down until it is off-screen.

Toaster provides these benefits:

  • Shows UI as a slide-up toast view in the lower-bottom-right of the screen.
  • Open and close transition animations.
  • No overlapping toasts; only one at a time. Automatically managed by the Toaster plugin.

Usage

Toaster is easy to use - you simply open and close it. When you call Toaster.open, you pass in the HTML content you want to show. If you call Toaster.open again while a toast is already open, it will automatically close the previous toast before showing yours (unless the previous toast has reserved the view to prevent new toasts).

Namespace

The Toaster plugin has the following namespaces tied to each of the following types.

Type Namespace
CXBus—API commands & API events Toaster
CSS .cx-toaster

Customization

Toaster does not have customization options.

Mobile support

Toaster does not have mobile-specific styles at this time.

Configuration

Toaster does not have configuration options.

Localization

Toaster does not have localization options.

API Commands

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.

Important
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 Genesys Widgets Extensions for more information about extending Genesys Widgets.


var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');

oMyPlugin.command('Toaster.close');

open

Opens the Toaster UI.

Example

oMyPlugin.command('Toaster.open', {

	type: 'generic',
	title: 'Toaster Title',
	body: 'Toaster Body',
	icon: 'chat',
	controls: 'close',
	immutable: false,
	buttons:{

		type: 'binary',
		primary: 'Accept',
		secondary: 'Decline'
	}

}).done(function(e){

	// Toaster opened successfully

}).fail(function(e){

	// Toaster failed to open properly
});

Options

Option Type Description
type string Specifies the type of body content that can be provided to Toaster window. Generic type shows the default body content and custom type overrides the default html body content.
title string Heading title to display on the Toaster window.
body string Holds text value for Generic Toaster type and html string template for Custom Toaster type.
icon string The CSS class name for an icon.
controls string Show close and minimize controls on Toaster window.
buttons object Define the type of buttons.
buttons.type string Shows two buttons on the Toaster .
buttons.primary string Text to be shown on primary button.
buttons.secondary string Text to be shown on secondary button.
immutable boolean When set to true, Toaster cannot be closed by other plugins.


Resolutions

Status When Returns
resolved Toaster is successfully opened n/a
rejected No Toaster type is specified 'No content was provided. Toaster has ignored your command'
rejected Toaster is already opened 'Toaster view is currently reserved'


close

Closes the Toaster UI.

Example

oMyPlugin.command('Toaster.close').done(function(e){

	// Toaster closed successfully

}).fail(function(e){

	// Toaster failed to close
});

Resolutions

Status When Returns
resolved Toaster is successfully closed n/a
rejected Toaster is already closed 'Toaster view is already closed'
rejected Toaster view is immutable 'Toaster view is currently reserved'

API Events

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.

Important
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 Genesys Widgets Extensions for more information about extending Genesys Widgets.
var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');

oMyPlugin.subscribe('Toaster.ready', function(e){});
Name Description Data
ready The Toaster plugin is initialized and ready to accept commands n/a
closed The Toaster plugin has been removed from the screen n/a
Retrieved from "https://all.docs.genesys.com/WID/Current/SDK/Toaster-combined (2025-06-20 05:15:09)"
Comments or questions about this documentation? Contact us for support!