Notifications and Dialogs

The CE.SDK editor brings notification and dialog APIs designed to deliver information to the user. Notifications convey non-intrusive information without disrupting the user’s current workflow. Dialogs are used to convey important information, warnings, or to request user input. They provide a range of customization options to fit your specific needs.

Notifications

The CE.SDK editor notification API delivers messages appearing in the lower right corner of the user interface.

cesdk.ui.showNotification(notification: string | Notification): string displays a new notification to the user, accepting either a simple string message or a more complex notification object that allows for additional configuration options (detailed below). It returns an id of the notification.
cesdk.ui.updateNotification(notificationId: string, notification: Notification): updates a notification given by the id. All configuration options can be changed. If the notificationId` doesn’t exist or the notification has already been dismissed, this action will have no effect.
cesdk.ui.dismissNotification(notificationId: string) removes a notification identified by the provided notification notificationId. If the notificationId doesn’t exist or the notification has already been dismissed, this action will have no effect.

Notification Options

All options apart from message are optional

Option	Description
`message`	The message displayed on the notification. This can either be a string or an internationalization (i18n) key from the CE.SDK translations, allowing for localized messages.
`type`	Notifications can be displayed in various styles, each differing in appearance to convey the appropriate context to the user. The available types include `info` (which is the default setting), `warning`, `error`, `success`, and `loading` (which displays a loading spinner).
`duration`	Notifications typically disappear after a set period, but the duration can vary based on the message’s importance. Less critical updates may vanish swiftly, whereas warnings or significant alerts stay open for a longer time. You can specify this duration using either a numerical value representing milliseconds or predefined strings from CE.SDK, such as `short`, `medium` (which is the default setting), or `long`, each corresponding to different default durations. For notifications that should remain visible indefinitely, the `infinite` value can be used to prevent automatic dismissal.
`onDismiss`	A callback function that is triggered upon the dismissal of the notification, whether it’s done automatically, programmatically, or manually by the user.
`action: { label: "Retry", onClick: () => void }`	Adds a single action button within the notification for user interaction.

Example Code

CreativeEditorSDK.create('#cesdk', config).then(async (cesdk) => {

  await cesdk.addDefaultAssetSources();
  await cesdk.addDemoAssetSources();

  await cesdk.createDesignScene();

  cesdk.ui.showNotification("Welcome to our editor!");

  const notificationId = cesdk.ui.showNotification({
    type: 'loading', message: 'Loading data...', duration: 'infinite'
  });
  setTimeout(() => {
    cesdk.ui.updateNotification(notificationId, {
      type: 'success', message: "Data loaded", duration: 'short'
    });
  }, 5000);

Dialogs

The dialog API provides methods to show, update, and close dialogs. Dialogs can be updated on the fly to reflect changes in the underlying data or to provide feedback to the user.

cesdk.ui.showDialog(dialog: string | Dialog): string displays a new dialog to the user, accepting either a simple string message or a more complex dialog object that allows for additional configuration options (detailed below). It returns an id of the dialog.
cesdk.ui.updateDialog(dialogId: string, dialog: Dialog) updates a dialog given by the id. All configuration options can be changed. If the dialogId doesn’t exist or the dialog has already been dismissed, this action will have no effect.
cesdk.ui.closeDialog(dialogId: string) removes a dialog identified by the provided dialog dialogId. If the dialogId doesn’t exist or the dialog has already been dismissed, this action will have no effect.

Dialog Options

All options apart from content are optional. All strings can be internationalization (i18n) keys from the CE.SDK translations, allowing for localized messages.

Option	Description
`type`	The type of dialog to display. The available types include `regular`, `success`, `error`, `info`, `warning`, and `loading`. The default type is `regular`.
`size`	The size of the dialog. The available sizes include `regular` and `large`. The default size is `regular`.
`content`	The content of the dialog. This can either be a `string` or an object with a `title` and `message` property. The `title` is optional. The `message` can be a string or an array of strings.
`progress`	The progress of the dialog. This can be a `number`, `indeterminate`, or an object with a `value` and `max` property.
`actions`	An array of action objects. Each action object must have a `label` and an `onClick` function. The `variant` and `color` properties are optional. The `variant` can be `regular` or `plain`. The `color` can be `accent` or `danger`. To remove all actions, you can provide an empty array `actions: []`
`cancel`	An action object that represents the cancel action. The structure is the same as for the `actions` property.
`onClose`	A callback function that is triggered when the dialog is closed. This can be used to perform cleanup operations or to trigger additional actions.
`clickOutsideToClose`	A boolean value that determines whether the dialog can be closed by clicking outside of it. The default value is `true`.

Code

CreativeEditorSDK.create('#cesdk', config).then(async cesdk => {
  await cesdk.addDefaultAssetSources();
  await cesdk.addDemoAssetSources();

  await cesdk.createDesignScene();

  // Use the dialog API to show a simple dialog
  const simpleDialogId = cesdk.ui.showDialog(
    'This is a simple information Dialog',
  );

  // Use the API to close the dialog
  cesdk.ui.closeDialog(simpleDialogId);

  // Show a warning dialog
  cesdk.ui.showDialog({
    type: 'warning',
    content: {
      title: 'warning',
      message: 'This is a warning dialog',
    },
    actions: [
      { label: 'OK', onClick: context => cesdk.ui.closeDialog(context.id) },
    ],
    cancel: {
      label: 'Cancel',
      onClick: context => cesdk.ui.closeDialog(context.id),
    },
    onClose: () => console.log('Warning dialog closed'),
  });

  // Show a simple loading dialog
  cesdk.ui.showDialog({
    type: 'loading',
    content: 'loading...',
    progress: 'indeterminate',
    cancel: {
      label: 'Cancel',
      onClick: context => cesdk.ui.closeDialog(context.id),
    },
  });

  // Show a large loading dialog with a progress value
  const largeProgressDialogId = cesdk.ui.showDialog({
    type: 'loading',
    content: {
      title: 'Loading',
      message: 'Loading data...',
    },
    progress: 0,
    cancel: {
      label: 'Cancel',
      onClick: context => cesdk.ui.closeDialog(context.id),
    },
  });

  // Update the progress value of the large loading dialog
  cesdk.ui.updateDialog(largeProgressDialogId, {
    progress: 50,
  });
});