Notifications and Messages

There are several types of notifications and messages that can be displayed using NotificationManager methods:

AppNotificationManager

To display prompts and messages correctly, the AppNotificationManager subclass of NotificationManager from appui-react should be set to iModelApp.notifications in the application's call to IModelApp.startup. Thereafter, the NotificationManager methods are available via IModelApp.notifications.

// Use the AppNotificationManager subclass from appui-react to get prompts and messages
import { AppNotificationManager } from "@itwin/appui-react";
. . .
  const opts: NativeAppOpts = {
    iModelApp: {
      . . .
      notifications: new AppNotificationManager(),
      . . .
    },
  . . .
  // Start the app.
  await SampleAppIModelApp.startup(opts);

MessageManager and React-based Messages

The appui-react package also contains the MessageManager, which manages messages and is used by the AppNotificationManager class. When using the NotificationManager methods, such as IModelApp.notifications.outputMessage, the messages may be either a string or HTMLElement. Some MessageManager methods add support for React components as messages. The type declaration related to this support is NotifyMessageType.

To use React components in Toast, Sticky, Alert, Input Field, or Pointer messages, use the MessageManager outputMessage method and ReactNotifyMessageDetails instead of NotifyMessageDetails. React components may also be used in Element Tooltips and Activity messages.

The following example displays a link in a Sticky message:

const reactNode = (
  <span>
    For more details, <UnderlinedButton onClick={this._handleLink}>click here</UnderlinedButton>.
  </span>
);
const reactMessage = { reactNode };
MessageManager.outputMessage(
  new ReactNotifyMessageDetails(OutputMessagePriority.Info,
    "This is an info message", reactMessage, OutputMessageType.Sticky));

private _handleLink = () => {
  window.alert("The link was clicked");
}