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

\n JET Message Banner\n \n

\n

Description:

\n

Message banners are brief, moderately disruptive, semi-permanent messages that help communicate\nrelevant and useful information in the context of the current page or actions in progress,\nwithout blocking the interaction on that page.

\n\n

\n Syntax\n \n

\nMessage Banner can be created with the following markup.

\n\n
\n<oj-c-message-banner data=\"[[messages]]\" type=\"page\">\n</oj-c-message-banner>\n
\n\n

The Message Banner 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-banner data=\"[[messages]]\" type=\"page\" on-oj-close=\"[[handleClose]]\">\n</oj-c-message-banner>\n
\n\n

\n Accessibility\n \n

\n\n

The MessageBannerItem[\"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

MessageBanner 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-banner\n  data=\"[[messages]]\"\n  type=\"page\"\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-banner>
\n
", "scope": "static", "tagWithoutBrackets": "oj-c-message-banner", "tagWithBrackets": "", "domInterface": "CMessageBannerElement", "ojPageTitle": "<oj-c-message-banner>", "camelCaseName": "MessageBanner", "ojPageTitlePrefix": "Element: ", "ojtsvcomponent": true, "tstype": { "target": "Type", "value": "interface CMessageBannerElement 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 MessageBannerItem type." } ] }, "ojsignature": [ { "target": "Type", "value": "interface CMessageBannerElement 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 MessageBannerItem type." } ] } ], "tsdeprecated": [ { "type": "supersedes", "since": "16.0.0", "value": [ "oj-messages", "oj-message-banner" ] } ], "extension": { "catalog": { "category": "Controls" }, "oracle": { "icon": "oj-ux-ico-message-banner", "uxSpecs": [ "bannerMessages" ] }, "vbdt": { "defaultColumns": 2, "minColumns": 1, "module": "oj-c/message-banner" } }, "ojmodule": "message-banner" }, { "id": "oj-c.MessageBanner#data", "name": "data", "memberof": "oj-c.MessageBanner", "meta": { "filename": "message-banner.tsx", "path": "web/components/oj-c/message-banner" }, "kind": "member", "longname": "oj-c.MessageBanner#data", "scope": "instance", "type": { "names": [ "DataProvider" ] }, "optional": false, "ojdisplayname": "Data", "ojshortdesc": "Data for the Message Banner component.", "description": "

Data for the Message Banner component. This data is used for rendering each banner 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.\nSee MutableArrayDataProvider for more details.

\n\n

When specifying a DataProvider for the data attribute, you need to provide the keyAttributes\nfor the DataProvider. The oj-c-message-banner 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.MessageBanner#type", "name": "type", "memberof": "oj-c.MessageBanner", "meta": { "filename": "message-banner.tsx", "path": "web/components/oj-c/message-banner" }, "kind": "member", "longname": "oj-c.MessageBanner#type", "scope": "instance", "type": { "names": [ "\"page\"", "\"section\"" ] }, "optional": true, "ojdisplayname": "Type", "ojshortdesc": "The type of the Banner message.", "description": "A Banner message can have a different look and feel. For example, when using page-level\nmessaging the messages need to be rendered from edge to edge without any outline. On the other\nhand, when they are being used in a section of a page or a dialog, they need to be rendered\nwith an outline. This attribute can be used to specify where the component is being used so that\nit will render the messages accordingly.", "ojvalues": [ { "name": "page", "description": "Renders the messages as edge-to-edge messages with no gap in between them.", "displayName": "Page", "type": { "names": [ "string" ] } }, { "name": "section", "description": "Renders the messages as section messages - with rounded corners, outline and gap between messages.", "displayName": "Section", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true, "defaultvalue": "'section'" }, { "id": "oj-c.MessageBanner#detailTemplateValue", "name": "detailTemplateValue", "memberof": "oj-c.MessageBanner", "meta": { "filename": "message-banner.tsx", "path": "web/components/oj-c/message-banner" }, "kind": "member", "longname": "oj-c.MessageBanner#detailTemplateValue", "scope": "instance", "type": { "names": [ "string|function" ] }, "optional": true, "ojdisplayname": "Current Detail Template", "ojshortdesc": "The 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 MessageBannerTemplateValueParameters\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 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.MessageBannerTemplateContext.

", "dynamicSlotDef": "MessageBannerTemplateContext", "tstype": [ { "target": "Type", "value": "string|(parameters: oj-c.MessageBanner.MessageBannerTemplateValueParameters) => string | undefined", "jsdocOverride": true } ] }, { "id": "oj-c.MessageBanner#sorting", "name": "sorting", "memberof": "oj-c.MessageBanner", "meta": { "filename": "message-banner.tsx", "path": "web/components/oj-c/message-banner" }, "kind": "member", "longname": "oj-c.MessageBanner#sorting", "scope": "instance", "type": { "names": [ "\"off\"", "\"severity\"" ] }, "optional": true, "ojdisplayname": "Sorting", "description": "Specifies how to sort the messages from the dataprovider.", "ojvalues": [ { "name": "severity", "description": "Sort the messages in the decreasing order of severity: error, warning, info, confirmation, and none. Then sort the messages of the same severity in reverse chronological order using the timestamp property.", "displayName": "Severity", "type": { "names": [ "string" ] } }, { "name": "off", "description": "Messages appear in the order they are supplied with no additional sorting.", "displayName": "Off", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true, "defaultvalue": "'severity'" }, { "id": "oj-c.MessageBanner#setProperty", "name": "setProperty", "memberof": "oj-c.MessageBanner", "meta": { "filename": "message-banner.tsx", "path": "web/components/oj-c/message-banner" }, "kind": "function", "longname": "oj-c.MessageBanner#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.MessageBanner#getProperty", "name": "getProperty", "memberof": "oj-c.MessageBanner", "meta": { "filename": "message-banner.tsx", "path": "web/components/oj-c/message-banner" }, "kind": "function", "longname": "oj-c.MessageBanner#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.MessageBanner#setProperties", "name": "setProperties", "memberof": "oj-c.MessageBanner", "meta": { "filename": "message-banner.tsx", "path": "web/components/oj-c/message-banner" }, "kind": "function", "longname": "oj-c.MessageBanner#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.MessageBanner#event:ojClose", "name": "ojClose", "kind": "event", "memberof": "oj-c.MessageBanner", "meta": { "filename": "message-banner.tsx", "path": "web/components/oj-c/message-banner" }, "longname": "oj-c.MessageBanner#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.MessageBanner.CloseActionDetail]{@link oj-c.MessageBanner.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.MessageBanner#DynamicSlots.MessageBannerTemplateContext", "name": "DynamicSlots.MessageBannerTemplateContext", "memberof": "oj-c.MessageBanner", "meta": { "filename": "message-banner.tsx", "path": "web/components/oj-c/message-banner" }, "kind": "member", "longname": "oj-c.MessageBanner#DynamicSlots.MessageBannerTemplateContext", "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.MessageBanner.MessageBannerTemplateContext]{@link oj-c.MessageBanner.MessageBannerTemplateContext}

Structure of template context used for dynamic templates \n

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

", "ojshortdesc": "The dynamic template slots for the Banner message.", "ojslot": true, "ojtemplateslotprops": "oj-c.MessageBanner.MessageBannerTemplateContext" }, { "id": "oj-c.MessageBanner.keyboardDoc", "name": "keyboardDoc", "kind": "member", "longname": "oj-c.MessageBanner.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.MessageBanner", "meta": { "filename": "message-banner.tsx", "path": "web/components/oj-c/message-banner" }, "ojfragment": true }, { "id": "oj-c.MessageBanner.MessageBannerItem", "name": "MessageBannerItem", "kind": "typedef", "memberof": "oj-c.MessageBanner", "meta": { "filename": "message-banner.tsx", "path": "web/components/oj-c/message-banner" }, "longname": "oj-c.MessageBanner.MessageBannerItem", "type": { "names": [ "Object" ] }, "scope": "static", "description": "An object representing a single message in MessageBanner 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": "timestamp", "description": "Defines the timestamp for the message in ISO format", "optional": true, "type": { "names": [ "string" ] } } ], "ojexports": true }, { "id": "oj-c.MessageBanner.MessageBannerTemplateValueParameters", "name": "MessageBannerTemplateValueParameters", "kind": "typedef", "memberof": "oj-c.MessageBanner", "meta": { "filename": "message-banner.tsx", "path": "web/components/oj-c/message-banner" }, "longname": "oj-c.MessageBanner.MessageBannerTemplateValueParameters", "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.MessageBanner.MessageBannerTemplateContext", "name": "MessageBannerTemplateContext", "kind": "typedef", "memberof": "oj-c.MessageBanner", "meta": { "filename": "message-banner.tsx", "path": "web/components/oj-c/message-banner" }, "longname": "oj-c.MessageBanner.MessageBannerTemplateContext", "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.MessageBanner.CloseActionDetail", "name": "CloseActionDetail", "kind": "typedef", "memberof": "oj-c.MessageBanner", "meta": { "filename": "message-banner.tsx", "path": "web/components/oj-c/message-banner" }, "longname": "oj-c.MessageBanner.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" } ], "ojshortdesc": "The data that was used to render the message." }, { "name": "key", "description": "The key for the message.", "optional": false, "type": { "names": [ "string|number" ] }, "tstype": [ { "target": "Type", "value": "K", "jsdocOverride": true, "for": "key" } ], "ojshortdesc": "The key for the message." }, { "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" } } ] } ] } ]