Dialog boxes

5 min

The Optimizely Content Management System (CMS) user interface uses dialog boxes in many places to communicate information or perform tasks within the current view.

The following examples are on Optimizely GitHub. Clone the CMS repository, check out the doc/how-to-use-dialogs branch, and run the site to see working examples.

Alert dialog box

The Alert dialog box displays information that a user acknowledges but does not require any action.

require(["epi/shell/DialogService"], function (dialogService) {
  dialogService.alert({
    heading: "heading",
    content: "content",
    description: "description",
    iconClass: "epi-iconDownload"
  });
});

Confirmation dialog box

The Confirmation dialog displays information for which a user must decide. It returns a promise that is resolved after clicking OK or rejected after clicking Cancel.

require(["epi/shell/DialogService"], function (dialogService) {
  dialogService.confirmation({
    title: "confirmation title",
    heading: "heading",
    content: "content",
    description: "description",
    iconClass: "epi-iconDownload"
  }).then(function () {
    alert("clicked OK");
  }).otherwise(function () {
    alert("clicked cancel");
  });
});

Standard dialog box

The standard Dialog displays custom content. Create a widget that displays and manages the business logic, and use the standard dialog as a display container.

Create a Dialog widget instance manually:

require([
  "epi/shell/widget/dialog/Dialog",
  "dijit/form/TextBox"
], function (Dialog, TextBox) {
  var dialog = new Dialog({
    heading: "heading",
    content: new TextBox({
      label: "Text 1",
      _type: "field"
    }),
    description: "description",
    iconClass: "epi-iconDownload"
  });
  dialog.on("execute", function () {
    // run custom needed logic
    dialog.hide();
  });
  dialog.show();
});

Or use another dialogService method:

require([
  "epi/shell/widget/dialog/Dialog",
  "dijit/form/TextBox"
], function (Dialog, TextBox) {
  dialogService.dialog({
      title: "dialog title",
    heading: "heading",
    content: new TextBox({
      label: "Text 1",
      _type: "field"
    }),
    description: "description",
    iconClass: "epi-iconDownload"
  }).then(function () {
    alert("clicked OK");
  }).otherwise(function () {
    alert("clicked cancel");
  });
});

Callbacks

CMS dialog boxes are based on Dojo Dialog. See the Dojo dialog box documentation for further information about events or other properties that are passed as dialog parameters.

Action labels

Each dialog box has properties that define the labels to display. Customize the default labels for actions when constructing the dialog box using acknowledgeActionText for the alert dialog box and confirmActionText and cancelActionText for the confirmation and standard dialogs. Common action labels are localized in epi.resources.action.