Link copied!

openNotification

Opens notification on top window.

Usage

Name Description
window.e.utils.v2.ui.openNotification(options) Opens notification on top window. It returns the reference of the notification. methods.

Parameters

Name Description Type Required Default value
content The content of the confirmation dialog. If string is given, it will be rendered as text. string | object true
content.type Decides whether the content will be rendered as text or html. 'text' | 'html' true
content.template The content of the confirmation dialog. string true
title The text content of the title. string
subtitle The subtitle of the confirmation dialog. If string is given, it will be rendered as text. string | object
subtitle.type Decides whether the subtitle will be rendered as text or html. 'text' | 'html' true
subtitle.template The subtitle of the confirmation dialog. string true
type The type of the notification. See details above. string default
icon The icon of the notification. See details above. string
color The color of the notification. See details above. string
helpPortalLink Shows a helper link in the footer. Same as getHelpPortalUrl utility object
helpPortalLink.articleId Defines the ID of the help portal article. string true
helpPortalLink.articleAnchor Defines the anchor in the article. string
DeprecatedhelperLink Shows a helper link in the footer. object
DeprecatedhelperLink.text The text content of the helper link. string true
DeprecatedhelperLink.href The href of the helper link. string true
buttons Shows buttons in the footer. array
buttons[].text The text content of the button. string true
buttons[].icon The icon of the button. string
buttons[].primary If true, the button will be primary. boolean false
buttons[].onClick A callback function that will be called when the button is clicked. function
closable Makes the notification closable. boolean true
autoClose If true, the notification will disappear after 5 seconds. boolean false
key An identifier for storing closed state. It should be unique. string
placement The placement of the notification. 'top' | 'bottom-right' 'top'
targetWindow The window that will show the notification. It should be overriden only in case the UI Framework is not present on top window (e.g. in some e2e testing frameworks). The UI Framework should be present on the given targetWindow. Window window.top

Method Reference

Name Description
close Closes the notification. Should be called on the reference of window.e.utils.v2.ui.dialog. 
<div class="e-buttongroup">
  <a class="e-btn open-notification-button" id="openNotificationOnTopButton" href="#0" data-placement="top">
    Open Top Notification
  </a>
  <a class="e-btn open-notification-button" id="openNotificationOnBottomRightButton" href="#0" data-placement="bottom-right">
    Open Bottom-Right Notification
  </a>
</div>
Copy Javascript
Copied to clipboard! 
let count = 1;

document.getElementById('openNotificationOnTopButton').addEventListener('click', event => {
  window.e.utils.v2.ui.openNotification({
    title: `Notification Title Goes Here #${count++}`,
    content: 'Lorem ipsum dolor sit amet.',
    helpPortalLink: {
      articleId: 'fdf2e60e74c11014a81ee05ad954b102',
      articleAnchor: 'email-content-check'
    },
    buttons: [
      {
        text: 'Button Label',
        icon: 'pencil',
        primary: true,
        onClick: () => console.log('button clicked')
      }
    ],
    placement: 'top'
  });
});

document.getElementById('openNotificationOnBottomRightButton').addEventListener('click', event => {
  window.e.utils.v2.ui.openNotification({
    title: `Notification Title Goes Here #${count++}`,
    content: 'Lorem ipsum dolor sit amet.',
    buttons: [
      {
        text: 'Button Label',
        icon: 'pencil',
        primary: true,
        onClick: () => console.log('button clicked')
      }
    ],
    placement: 'bottom-right'
  });
});