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

Popups and Dialogs

Use popups and dialogs to display information and prompt the user for a response. They're 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.
  • showing that a transaction is in progress after the user completes an action.

App Maker supports two types of dialog boxes:

  • Popups—preconfigured dialog boxes that cover a variety of notification scenarios. Popups adhere to Material Design standards.
  • Custom dialog boxes—pages or page fragments you create to notify your app's users. Setting up custom dialog boxes requires more work. However, they can be useful if your app uses a different (non-Material Design) look and feel.

Use App Maker's built-in popups

Popups are a great way to quickly add modal and non-modal interactions and notifications to your app.

You add a popup just like you add a page or page fragment:

  1. Hover over Pages and click add, then click Popup.
  2. Edit the popup dialog text.
  3. Use the Property Editor to configure onClick and other properties that control how the popup works.

Empty popup

Use this as a blank canvas for a custom popup. It contains no generated content, so you'll need to add widgets to build a dialog.

Customize this popup

Use the Property Editor to configure the appearance and events of the popup and its widgets.

Use this to add a menu that slides on screen from the left and displays the navigation destinations of your app. The navigation menu only links to pages that exist at the time of its creation. If you later add pages to your app, you'll need to manually add them to the menu.

Customize this popup

Use the Property Editor to configure its appearance and events. You can also edit the text displayed on the menu, and you can drag pages to rearrange their order.

Confirmation dialog

Use a confirmation to ask users to verify that they truly want to proceed with the action they've just invoked. This dialog is often paired with a warning or critical information related to that action.

Customize this popup

Use the Property Editor to configure its appearance and events.

Additionally this popup requires you to:

  • Edit the title. Confirmation dialog titles should be meaningful and echo the requested action.
  • Edit the text field to describe what will happen if the user completes the action.
  • Change the button text and assign onClick events to them.

Notification dialog

Use this popup to inform the user of a non-critical event or action. It takes no user input.

Customize this popup

Use the Property Editor to configure its appearance and events. By default, the Got it! button closes the dialog.

Additionally this popup requires you to:

  • Edit the title. The dialog title should be meaningful and echo the description that follows it.
  • Edit the text field to describe what the app is doing.

Use this popup to request that the user wait while your app completes a task.

Customize this popup

Use the Property Editor to configure its appearance and events.

Snackbar

Use this popup to provide brief feedback about an operation through a message at the bottom of the screen. They contain a single line of text related to the operation.

Customize this popup

Use the Property Editor to configure its appearance and events.

Additionally this popup requires you to:

  • Edit the text field. It should be a single line of text related to the action.
  • If necessary, change the button text from Dismiss to a more appropriate action and update its onClick event.

Create a custom dialog box

You can use any page or page fragment as a dialog box:

  1. Drag a button on to the page, then click its 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.