G Suite Business customers can preview App Maker. Ask your domain admin to apply for early access.

Dialogs

Use dialog boxes to display information and prompt the user for a response. Dialog boxes can be useful for:

  • confirming a user request, like deleting a record.
  • focusing on an important task, like creating a new inventory order.
  • displaying important information the user needs to acknowledge.

Any page or page fragment can be shown as a dialog box.

Display a dialog

To show a dialog to the user when a button is clicked:

  1. Select the button widget, then click the onClick property.
  2. Select the Open Dialog preset action.
  3. Select the page or page fragment to open as a dialog.

Alternatively, you can write code in a client-side script to show a page named MyDialog:

app.showDialog(app.pages.MyDialog);

Close a Dialog

To close an open dialog when the app user clicks a button:

  1. Select the button widget, then click the onClick property.
  2. Select the Close Dialog action.

Alternatively, you can write code in a client-side script:

app.closeDialog();

```

CSS properties

Use the following CSS classes to customize Dialog properties in your application:

  • .app-Dialog : applied to the dialog top-level element.
  • .app-DialogGlass: applied to the glass element that covers the rest of the UI while the dialog is open.
  • .app-DialogBody: applied to the content of the dialog.

Dialog size

The size of the dialog is determined by the dimensions of the page or page fragment. Click on the page or page fragment, then use the Property Editor to change the dimensions.