[ { "id": "oj-c.MessageToast", "name": "MessageToast", "memberof": "oj-c", "kind": "class", "meta": { "filename": "message-toast.tsx", "path": "web/components/oj-c/message-toast" }, "ojcomponent": true, "isvcomponent": true, "since": "14.0.0", "longname": "oj-c.MessageToast", "pack": "oj-c", "classdesc": "

\n JET Message Toast\n \n

\n

Description:

\n

Message toasts are short, non-critical, auto-dismissible messages that communicate non-disruptive contextual messages.

\n

\n Toast messages are used to:\n

\n

\n\n

\n Syntax\n \n

\nMessage Toast can be created with the following markup.

\n\n
\n<oj-c-message-toast data=\"[[messages]]\">\n</oj-c-message-toast>\n
\n\n

The Message Toast component will show messages based on the data provided keeping it as a single\nsource of truth. Applications should register a listener for the ojClose event to be notified\nwhen one performs an action that requires a message to be closed. The application then should use the\nevent payload to identify and remove the corresponding row from the data which would then close the\nmessage.

\n\n
\n<oj-c-message-toast data=\"[[messages]]\" on-oj-close=\"[[handleClose]]\">\n</oj-c-message-toast>\n
\n\n

\n Accessibility\n \n

\n\n

The MessageToastItem[\"sound\"] property is an accessibility\nfeature for playing a sound when a message is opened. This property defaults to \"none\", and can\nbe enabled by setting it to \"default\" or by providing a URL to an audio file of a format that the\nbrowser supports. An accessible application must provide a way for users to enable sound on a\nsettings or preferences page. Some browsers will have auto-play disabled by default, enabling\nit may require adjusting the browser settings.

\n\n

\n Keyboard End User Information\n \n

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TargetKeyAction
Focus within MessagesTab or Shift + TabNavigate the content of the messages region.
F6Cycles the focus through all the messages sections on the page starting from the most recent one.\n Then finally, moves the focus back to the last focused element outside the messages region.
EscMoves focus back to the last focused element outside the messages region and closes the current message if it is closable.
Enter or SpaceActivates the currently focused element in the message.
Focus outside MessagesF6Move focus to the first message within the more recently disclosed messages region.
\n\n

\n Custom Data Attributes\n \n

\n\n

MessageToast supports the following custom data attributes.\n\n \n \n \n \n \n \n \n \n \n \n \n \n
NameDescription
data-oj-as

Provides an alias for a specific template instance and has the same subproperties as the $current variable.

\n 
<oj-c-message-toast\n  data=\"[[messages]]\"\n  detail-template-value=\"detailText\">\n  <!-- Template for rendering custom detail text -->\n  <template slot=\"detailText\" data-oj-as=\"message\">\n    <!-- The detail text -->\n    <div>\n      <span><oj-bind-text value=\"[[message.data.detail]]\"></oj-bind-text></span>\n    </div>\n  </template>\n</oj-c-message-toast>
\n
", "scope": "static", "tagWithoutBrackets": "oj-c-message-toast", "tagWithBrackets": "", "domInterface": "CMessageToastElement", "ojPageTitle": "<oj-c-message-toast>", "camelCaseName": "MessageToast", "ojPageTitlePrefix": "Element: ", "ojtsvcomponent": true, "tstype": { "target": "Type", "value": "interface CMessageToastElement extends JetElement>", "genericParameters": [ { "name": "K", "description": "Type of key of the dataprovider. It can either be a string or a number." }, { "name": "D", "description": "Type of the data from the dataprovider. It must extend the MessageToastItem type." } ] }, "ojsignature": [ { "target": "Type", "value": "interface CMessageToastElement extends JetElement>", "genericParameters": [ { "name": "K", "description": "Type of key of the dataprovider. It can either be a string or a number." }, { "name": "D", "description": "Type of the data from the dataprovider. It must extend the MessageToastItem type." } ] } ], "tsdeprecated": [ { "type": "supersedes", "since": "15.0.0", "value": [ "oj-messages" ] } ], "extension": { "catalog": { "category": "Controls" }, "vbdt": { "defaultColumns": 2, "minColumns": 1, "module": "oj-c/message-toast" }, "oracle": { "icon": "oj-ux-ico-messages", "uxSpecs": [ "messages-toast-jet" ] } }, "ojmodule": "message-toast" }, { "id": "oj-c.MessageToast#data", "name": "data", "memberof": "oj-c.MessageToast", "meta": { "filename": "message-toast.tsx", "path": "web/components/oj-c/message-toast" }, "kind": "member", "longname": "oj-c.MessageToast#data", "scope": "instance", "type": { "names": [ "DataProvider" ] }, "optional": false, "ojdisplayname": "Data", "ojshortdesc": "Data for the Message Toast component.", "description": "

Data for the Message Toast component. This data is used for rendering each toast message.\nThis is a required attribute. If an application needs to initialize the component with\nno initial messages, it would need to provide an empty DataProvider. When the application\nwants to show messages, it can then add new data to the existing DataProvider.

\n\n

When specifying a DataProvider for the data attribute, you need to provide the keyAttributes\nfor the DataProvider. The oj-c-message-toast component expects a single attribute of type\nstring or number as the key of the DataProvider. When the data is updated this key attribute\nwill be used to determine whether a new message is being added or an existing message is being\nupdated. This is required for performing necessary animations. When the application replaces\nthe DataProvider, the component assumes that all the messages are newly added irrespective of their\nkeys and performs animation accordingly.

", "tstype": [ { "target": "Type", "value": "DataProvider", "jsdocOverride": true, "module": { "DataProvider": "ojdataprovider" } } ] }, { "id": "oj-c.MessageToast#detailTemplateValue", "name": "detailTemplateValue", "memberof": "oj-c.MessageToast", "meta": { "filename": "message-toast.tsx", "path": "web/components/oj-c/message-toast" }, "kind": "member", "longname": "oj-c.MessageToast#detailTemplateValue", "scope": "instance", "type": { "names": [ "string|function" ] }, "optional": true, "ojdisplayname": "Current Detail Template", "ojshortdesc": "A dynamic template key or a function that determines the detail template for the current row.", "description": "Applications can use this property to provide the name of a template or a function that\nreturns the name of a template to use for rendering the detail content.\n\nWhen a template name is provided as a value for this property, the corresponding template\nwill be used for rendering the detail content for all the messages. If applications want\nto use a different template for different messages, they can provide a function that\nreturns a template name instead.\n\nThe provided function should accept an object of type MessageToastTemplateValueParameters\nand return a key to a template for rendering the corresponding message's detail content.\nThe value returned from this function should be a key to one of the dynamic template slots\nprovided. If the returned value is not one of the keys of the provided dynamic template slots,\nthe component will throw an Error.\n\nIf the function returns null or undefined, the component then will perform default rendering\nof the detail content using the detail property of the corresponding message.\n\nIf an application specifies both detail and a valid detail-template-value, the detail-template-value\nwill take precedence and the corresponding template will be used for rendering the detail content.

Note: For additional information see DynamicSlots.MessageToastTemplateContext.

", "dynamicSlotDef": "MessageToastTemplateContext", "tstype": [ { "target": "Type", "value": "string|(parameters: oj-c.MessageToast.MessageToastTemplateValueParameters) => string | undefined", "jsdocOverride": true } ] }, { "id": "oj-c.MessageToast#iconTemplateValue", "name": "iconTemplateValue", "memberof": "oj-c.MessageToast", "meta": { "filename": "message-toast.tsx", "path": "web/components/oj-c/message-toast" }, "kind": "member", "longname": "oj-c.MessageToast#iconTemplateValue", "scope": "instance", "type": { "names": [ "string|function" ] }, "optional": true, "ojdisplayname": "Current Icon Template", "ojshortdesc": "A dynamic template key or a function that determines the icon template for the current row.", "description": "Applications can use this property to provide the name of a template or a function that\nreturns the name of a template to use for rendering the icon content.\n\nWhen a template name is provided as a value for this property, the corresponding template\nwill be used for rendering the icon content for all the messages. If applications want\nto use a different template for different messages, they can provide a function that\nreturns a template name instead.\n\nThe provided function should accept an object of type MessageToastTemplateValueParameters\nand return a key to a template for rendering the corresponding message's icon content.\nThe value returned from this function should be a key to one of the dynamic template slots\nprovided. If the returned value is not one of the keys of the provided dynamic template slots,\nthe component will throw an Error.\n\nIf the function returns null or undefined, the component then will perform default rendering\nof the icon content using the icon property of the corresponding message.\n\nIf an application specifies both icon and a valid icon-template-value, the icon-template-value\nwill take precedence and the corresponding template will be used for rendering the icon content.

Note: For additional information see DynamicSlots.MessageToastTemplateContext.

", "dynamicSlotDef": "MessageToastTemplateContext", "tstype": [ { "target": "Type", "value": "string|(parameters: oj-c.MessageToast.MessageToastTemplateValueParameters) => string | undefined", "jsdocOverride": true } ] }, { "id": "oj-c.MessageToast#offset", "name": "offset", "memberof": "oj-c.MessageToast", "meta": { "filename": "message-toast.tsx", "path": "web/components/oj-c/message-toast" }, "kind": "member", "longname": "oj-c.MessageToast#offset", "scope": "instance", "type": { "names": [ "number|object" ] }, "optional": true, "ojdisplayname": "Offset", "ojshortdesc": "Offset for the Message Toast component's position.", "description": "Defines an offset (in pixels) in the placement. Value can be supplied as a number or\nan object with horizontal and vertical values.", "defaultvalue": 0, "tstype": [ { "target": "Type", "value": "number|{ horizontal?: number; vertical?: number; }", "jsdocOverride": true } ] }, { "id": "oj-c.MessageToast#position", "name": "position", "memberof": "oj-c.MessageToast", "meta": { "filename": "message-toast.tsx", "path": "web/components/oj-c/message-toast" }, "kind": "member", "longname": "oj-c.MessageToast#position", "scope": "instance", "type": { "names": [ "\"top\"", "\"bottom\"", "\"top-start\"", "\"top-end\"", "\"bottom-start\"", "\"bottom-end\"", "\"top-left\"", "\"top-right\"", "\"bottom-left\"", "\"bottom-right\"" ] }, "optional": true, "ojdisplayname": "Position", "ojshortdesc": "Position for the Message Toast component.", "description": "Defines the fixed position where the messages will be positioned on the screen.\n- top-start resolves to top-left in LTR (top-right in RTL)\n- top-end resolves to top-right in LTR (top-left in RTL)\n- bottom-start resolves to bottom-left in LTR (bottom-right in RTL)\n- bottom-end resolves to bottom-right in LTR (bottom-left in RTL)", "defaultvalue": "'bottom'" }, { "id": "oj-c.MessageToast#setProperty", "name": "setProperty", "memberof": "oj-c.MessageToast", "meta": { "filename": "message-toast.tsx", "path": "web/components/oj-c/message-toast" }, "kind": "function", "longname": "oj-c.MessageToast#setProperty", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "ojshortdesc": "Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.", "description": "Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.", "params": [ { "name": "property", "description": "The property name to set. Supports dot notation for subproperty access.", "type": { "names": [ "string" ] } }, { "name": "value", "description": "The new value to set the property to.", "type": { "names": [ "any" ] } } ] }, { "id": "oj-c.MessageToast#getProperty", "name": "getProperty", "memberof": "oj-c.MessageToast", "meta": { "filename": "message-toast.tsx", "path": "web/components/oj-c/message-toast" }, "kind": "function", "longname": "oj-c.MessageToast#getProperty", "scope": "instance", "returns": [ { "type": { "names": [ "any" ] } } ], "ojshortdesc": "Retrieves the value of a property or a subproperty.", "description": "Retrieves the value of a property or a subproperty.", "params": [ { "name": "property", "description": "The property name to get. Supports dot notation for subproperty access.", "type": { "names": [ "string" ] } } ] }, { "id": "oj-c.MessageToast#setProperties", "name": "setProperties", "memberof": "oj-c.MessageToast", "meta": { "filename": "message-toast.tsx", "path": "web/components/oj-c/message-toast" }, "kind": "function", "longname": "oj-c.MessageToast#setProperties", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "ojshortdesc": "Performs a batch set of properties.", "description": "Performs a batch set of properties.", "params": [ { "name": "properties", "description": "An object containing the property and value pairs to set.", "type": { "names": [ "object" ] } } ] }, { "id": "oj-c.MessageToast#event:ojClose", "name": "ojClose", "kind": "event", "memberof": "oj-c.MessageToast", "meta": { "filename": "message-toast.tsx", "path": "web/components/oj-c/message-toast" }, "longname": "oj-c.MessageToast#event:ojClose", "scope": "instance", "ojshortdesc": "Event emitted when the user tries to close a message though UI interaction", "description": "

Note: The event detail contains the following properties: [oj-c.MessageToast.CloseActionDetail]{@link oj-c.MessageToast.CloseActionDetail}<K, D>

Triggered when a user tries to close a message through UI interaction. The application\nshould listen to this event and remove the corresponding message item from the data\nwhich would then result in the message being closed. If the application\nfails to remove the message item from the data, then no change will be done in the\nUI by the component and the message will stay in the UI opened." }, { "id": "oj-c.MessageToast#DynamicSlots.MessageToastTemplateContext", "name": "DynamicSlots.MessageToastTemplateContext", "memberof": "oj-c.MessageToast", "meta": { "filename": "message-toast.tsx", "path": "web/components/oj-c/message-toast" }, "kind": "member", "longname": "oj-c.MessageToast#DynamicSlots.MessageToastTemplateContext", "scope": "instance", "ojdisplayname": "Dynamic Template Slots", "dynamicSlot": true, "description": "

Note: When the template is executed for each item, it will have access to the binding context containing the following properties: [oj-c.MessageToast.MessageToastTemplateContext]{@link oj-c.MessageToast.MessageToastTemplateContext}

Structure of template context used for dynamic templates \n

Note: For additional information see detail-template-value, icon-template-value.

", "ojshortdesc": "The dynamic template slots for the Toast message.", "ojslot": true, "ojtemplateslotprops": "oj-c.MessageToast.MessageToastTemplateContext" }, { "id": "oj-c.MessageToast.keyboardDoc", "name": "keyboardDoc", "kind": "member", "longname": "oj-c.MessageToast.keyboardDoc", "description": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TargetKeyAction
Focus within MessagesTab or Shift + TabNavigate the content of the messages region.
F6Cycles the focus through all the messages sections on the page starting from the most recent one.\n Then finally, moves the focus back to the last focused element outside the messages region.
EscMoves focus back to the last focused element outside the messages region and closes the current message if it is closable.
Enter or SpaceActivates the currently focused element in the message.
Focus outside MessagesF6Move focus to the first message within the more recently disclosed messages region.
", "memberof": "oj-c.MessageToast", "meta": { "filename": "message-toast.tsx", "path": "web/components/oj-c/message-toast" }, "ojfragment": true }, { "id": "oj-c.MessageToast.MessageToastItem", "name": "MessageToastItem", "kind": "typedef", "memberof": "oj-c.MessageToast", "meta": { "filename": "message-toast.tsx", "path": "web/components/oj-c/message-toast" }, "longname": "oj-c.MessageToast.MessageToastItem", "type": { "names": [ "Object" ] }, "scope": "static", "description": "An object representing a single message in MessageToast component.", "properties": [ { "name": "closeAffordance", "description": "Defines whether or not to include the close icon for the message", "optional": true, "type": { "names": [ "\"off\"", "\"on\"" ] } }, { "name": "detail", "description": "Defines the detail text of the message", "optional": true, "type": { "names": [ "string" ] } }, { "name": "severity", "description": "Defines the severity of the message", "optional": true, "type": { "names": [ "\"none\"", "\"error\"", "\"confirmation\"", "\"info\"", "\"warning\"" ] } }, { "name": "sound", "description": "Defines the sound to be played when opening the message", "optional": true, "type": { "names": [ "string" ] } }, { "name": "summary", "description": "Defines the primary text of the message", "optional": true, "type": { "names": [ "string" ] } }, { "name": "autoTimeout", "description": "Defines the time after which the message is to be closed automatically\n\non - default of 5s\noff - no auto timeout, manually dismissed\nnumber - seconds in milliseconds format", "optional": true, "type": { "names": [ "number|string" ] }, "tstype": [ { "target": "Type", "value": "number|\"off\"|\"on\"", "jsdocOverride": true, "for": "autoTimeout" } ], "ojvalues": [ { "name": "off", "type": { "names": [ "string" ] } }, { "name": "on", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true } ], "ojexports": true }, { "id": "oj-c.MessageToast.MessageToastTemplateValueParameters", "name": "MessageToastTemplateValueParameters", "kind": "typedef", "memberof": "oj-c.MessageToast", "meta": { "filename": "message-toast.tsx", "path": "web/components/oj-c/message-toast" }, "longname": "oj-c.MessageToast.MessageToastTemplateValueParameters", "type": { "names": [ "Object" ] }, "scope": "static", "description": "Structure of parameters passed on to the templateKey properties.", "tsgenerictype": { "target": "Type", "value": "", "for": "genericTypeParameters" }, "properties": [ { "name": "data", "description": "The data for the current message", "optional": false, "type": { "names": [ "object" ] }, "tstype": [ { "target": "Type", "value": "D", "jsdocOverride": true, "for": "data" } ] }, { "name": "key", "description": "The key for the current message", "optional": false, "type": { "names": [ "string|number" ] }, "tstype": [ { "target": "Type", "value": "K", "jsdocOverride": true, "for": "key" } ] }, { "name": "metadata", "description": "The metadata for the current message", "optional": false, "type": { "names": [ "object" ] }, "tstype": [ { "target": "Type", "value": "ItemMetadata", "jsdocOverride": true, "for": "metadata", "module": { "ItemMetadata": "ojdataprovider" } } ] } ], "ojexports": true }, { "id": "oj-c.MessageToast.MessageToastTemplateContext", "name": "MessageToastTemplateContext", "kind": "typedef", "memberof": "oj-c.MessageToast", "meta": { "filename": "message-toast.tsx", "path": "web/components/oj-c/message-toast" }, "longname": "oj-c.MessageToast.MessageToastTemplateContext", "type": { "names": [ "Object" ] }, "scope": "static", "description": "Structure of template context used for dynamic templates", "tsgenerictype": { "target": "Type", "value": "", "for": "genericTypeParameters" }, "properties": [ { "name": "data", "description": "The data for the current message", "optional": false, "type": { "names": [ "object" ] }, "tstype": [ { "target": "Type", "value": "D", "jsdocOverride": true, "for": "data" } ] }, { "name": "key", "description": "The key for the current message", "optional": false, "type": { "names": [ "string|number" ] }, "tstype": [ { "target": "Type", "value": "K", "jsdocOverride": true, "for": "key" } ] }, { "name": "metadata", "description": "The metadata for the current message", "optional": false, "type": { "names": [ "object" ] }, "tstype": [ { "target": "Type", "value": "ItemMetadata", "jsdocOverride": true, "for": "metadata", "module": { "ItemMetadata": "ojdataprovider" } } ] } ], "ojexports": true }, { "id": "oj-c.MessageToast.CloseActionDetail", "name": "CloseActionDetail", "kind": "typedef", "memberof": "oj-c.MessageToast", "meta": { "filename": "message-toast.tsx", "path": "web/components/oj-c/message-toast" }, "longname": "oj-c.MessageToast.CloseActionDetail", "type": { "names": [ "Object" ] }, "scope": "static", "description": "The event payload for the ojClose event.\nNote: This has a similar structure to the ItemContext. We define it here\nbecause using ItemContext will not generate the docs for this payload.", "tsgenerictype": { "target": "Type", "value": "", "for": "genericTypeParameters" }, "properties": [ { "name": "data", "description": "The data that was used to render the message.", "optional": false, "type": { "names": [ "object" ] }, "tstype": [ { "target": "Type", "value": "D", "jsdocOverride": true, "for": "data" } ] }, { "name": "key", "description": "The key for the message.", "optional": false, "type": { "names": [ "string|number" ] }, "tstype": [ { "target": "Type", "value": "K", "jsdocOverride": true, "for": "key" } ] }, { "name": "metadata", "description": "The metadata of the message.", "optional": false, "type": { "names": [ "object" ] }, "tstype": [ { "target": "Type", "value": "ItemMetadata", "jsdocOverride": true, "for": "metadata", "module": { "ItemMetadata": "ojdataprovider" } } ] } ] } ]