const NotificationUI = brackets.getModule("widgets/NotificationUI")

The global NotificationUI can be used to create popup notifications over dom elements or generics app notifications.

A global window.EventManager object is made available in phoenix that can be called anytime after AppStart. This global can be triggered from anywhere without using require context.

For Eg. Let's say we have to create a popup notification over the HTML element with ID showInfileTree. We can do this with the following

Example

const NotificationUI = brackets.getModule("widgets/NotificationUI");
// or use window.NotificationUI global object has the same effect.
let notification = NotificationUI.createFromTemplate("Click me to locate the file in file tree", "showInfileTree",{});
notification.done(()=>{
    console.log("notification is closed in ui.");
})

Another advanced example where you can specify html and interactive components in the notification Example

// note that you can even provide an HTML Element node with
// custom event handlers directly here instead of HTML text.
let notification1 = NotificationUI.createFromTemplate(
  "<div>Click me to locate the file in file tree</div>", "showInfileTree",{
      allowedPlacements: ['top', 'bottom'],
      dismissOnClick: false,
      autoCloseTimeS: 300 // auto close the popup after 5 minutes
  });
// do stuff
notification1.done((closeReason)=>{
    console.log("notification is closed in ui reason:", closeReason);
})

The createFromTemplate API can be configured with numerous options. See API options below.

• widgets/NotificationUI
  • .API
  • .NOTIFICATION_STYLES_CSS_CLASS : enum
  • .CLOSE_REASON : enum
  • .createFromTemplate(title, template, [elementID], [options]) ⇒ Notification
  • .createToastFromTemplate(title, template, [options]) ⇒ Notification
  • .showToastOn(containerOrSelector, template, [options]) ⇒ Notification
  • .showHUD(iconClass, label, [options]) ⇒ Notification

This section outlines the properties and methods available in this module

Kind: inner property of widgets/NotificationUI

CSS class names for notification styles.

Kind: inner enum of widgets/NotificationUI
Properties

Closing notification reason.

Kind: inner enum of widgets/NotificationUI
Properties

Creates a new notification popup from given template. The template can either be a string or a jQuery object representing a DOM node that is not in the current DOM.

Creating a notification popup

// note that you can even provide an HTML Element node with
// custom event handlers directly here instead of HTML text.
let notification1 = NotificationUI.createFromTemplate(
  "<div>Click me to locate the file in file tree</div>", "showInfileTree",{
      allowedPlacements: ['top', 'bottom'],
      dismissOnClick: false,
      autoCloseTimeS: 300 // auto close the popup after 5 minutes
  });

Kind: inner method of widgets/NotificationUI
Returns: Notification - Object with a done handler that resolves when the notification closes.

Creates a new toast notification popup from given title and html message. The message can either be a string or a jQuery object representing a DOM node that is not in the current DOM.

Creating a toast notification popup

// note that you can even provide an HTML Element node with
// custom event handlers directly here instead of HTML text.
let notification1 = NotificationUI.createToastFromTemplate( "Title here",
  "<div>Click me to locate the file in file tree</div>", {
      dismissOnClick: false,
      autoCloseTimeS: 300 // auto close the popup after 5 minutes
  });

Kind: inner method of widgets/NotificationUI
Returns: Notification - Object with a done handler that resolves when the notification closes.

Shows a small, transient inline toast notification inside a given DOM container. The toast is centered at the bottom of the container and auto-dismisses.

NotificationUI.showToastOn(document.getElementById("my-panel"), "Hello!", {
    autoCloseTimeS: 5,
    dismissOnClick: true
});

Kind: inner method of widgets/NotificationUI
Returns: Notification - Object with a done handler that resolves when the toast closes.

Shows a large, centered HUD overlay (like macOS volume/brightness indicator) with an icon and label. The HUD fades in/out and auto-dismisses. Only one HUD is shown at a time — calling this while a previous HUD is visible replaces it instantly.

NotificationUI.showHUD("fa-solid fa-magnifying-glass-plus", "110%");

Kind: inner method of widgets/NotificationUI
Returns: Notification - Object with a done handler that resolves when the HUD closes.