Showing Dialogs

The CE.SDK editor provides a dialog API to display modal dialogs to the user. Dialogs are used to convey important information, warnings, or to request user input. They can be customized to fit your specific needs. 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
Option `type`	Description The type of dialog to display. The available types include `regular`, `success`, `error`, `info`, `warning`, and `loading`. The default type is `regular`.
Option `size`	Description The size of the dialog. The available sizes include `regular` and `large`. The default size is `regular`.
Option `content`	Description 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.
Option `progress`	Description The progress of the dialog. This can be a `number`, `indeterminate`, or an object with a `value` and `max` property.
Option `actions`	Description 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`.
Option `cancel`	Description An action object that represents the cancel action. The structure is the same as for the `actions` property.
Option `onClose`	Description A callback function that is triggered when the dialog is closed. This can be used to perform cleanup operations or to trigger additional actions.
Option `clickOutsideToClose`	Description A boolean value that determines whether the dialog can be closed by clicking outside of it. The default value is `true`.


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
  });
});