Dialog - Opening and Closing a Dialog Box

Learn how to create a dialog and open or close the dialog box.

Using Dialog Boxes

Use a dialog box when you want to enter some information or notify a warning or an error message.

Showing a Message

  1. Define a method that shows a message in your application's custom UI script:

    functionshowMessage(message, level, showCancel, onOkay) {
    app.showDialog({
    show: true,
    message: message,
    icon: "warning",
    showCancel: showCancel,
    okButtonText: "Ok",
    cancelButtonText: "Cancel",
    onOk: onOkay
    });
    }

  2. Call the method wherever you want to display the message:

    var message = "Failed to perform the operation. Please try again. Error: " + response.result; showMessage(message, "Error", false, null);

Showing a Custom Dialog Box

Steps:

  1. Create a Dialog widget

    1. Select the screen where the dialog box should be added.

    2. From the top menu in the UI designer, drag Layout > Dialog into the screen's drop area.

  2. Assign a meaningful resource ID to the dialog box.

    Assign ID

  3. Opening the dialog box To open the dialog box on a button click or custom event handler:

    // open the dialogopenDialog("stoptaskdialog");

  4. Closing the dialog box

    // close the dialogcloseDialog("stoptaskdialog");

Showing a Pop-Up

  1. Create a Popup section

    1. Select the screen where the popup is to be added.

    2. From the top menu in the UI designer, drag Layout > Section into the drop area.

      Create Popup Section

  2. Enable popup behavior

    Select the UI Properties > Is Popup checkbox.

  3. Make the section conditionally visible

    Add a custom visibility script in the section's property panel:

    // show the popup when the awayClicked flag is truevar result = data.dashboarddata.awayClicked;

    Popup Visibility Script

  4. Set default visibility on load

    1. In the Before Data Load Script of the main widget:

      data.dashboarddata.awayClicked = false;

      Initialize Visibility

      Note:

      Initialize data.dashboarddata before assigning:

      data.dashboarddata = utils.createMap();

    2. Assign dashboarddata as the main Data Bean Path of the topmost widget.

  5. Showing the popup

    1. Set the flag and refresh the popup section:

      // show the popup data.dashboarddata.awayClicked = true;

      Show Popup

    2. Alternatively, update using updateModelItemState:

      updateModelItemState(data, "awaypopup", data.awaypopup, false);

  6. Closing the popup

    // close the popup data.dashboarddata.awayClicked = false;