Add a modal to a workbook

Modals help simplify workbook design and allow you to build a streamlined, app-like experience. An open modal overlays and obscures a workbook page to provide a focused view of the modal content. This reduces visual clutter and allows you to present form fields, provide customized drilldowns, display controls and filters in a dedicated container, etc.

This document explains how to create and customize modals. To incorporate a modal into a workbook, you must configure a Open modal action. For more information about using this action, see Create actions that navigate to destinations.

Requirements

The ability to create and modify modals requires the following:

• You must be assigned an account type with the Create, edit, and publish workbooks permission enabled.
• You must be the workbook owner or be granted Can edit workbook permission.

Add a modal to your workbook

There are several ways to add a modal to a workbook, including the following:

• In the side navigation, select Add element to open the Add new element panel, then locate the Layout section and select Modal.
• In the workbook footer, select the caret (), then select Add modal.
  
• Create a new modal while moving an existing element. In the element, select More, then select Move to > New modal from the dropdown.
• Create a workbook action to open a modal. In the Select modal field, choose New modal.

A modal appears as a new hidden page tab for the workbook, with a predefined size. Add elements and customize the modal just like a workbook page. All element types are supported, but consider the modal size and layout when adding elements.

By default, a modal includes a default title and primary and secondary buttons. To customize the appearance of the modal, see Design a modal.

You can optionally rename the modal to keep your workbook organized. In the modal page tab, select the caret (), then select Rename or double-click the modal tab to rename it. The modal name is separate from the title that appears on the modal.

Design a modal

Customize the appearance of a modal to match the use case. For example, a modal that displays documentation might not need buttons, and a modal that modifies a workbook page might benefit from dynamic text formatting in the title.

By default, a modal includes a header with a title and a close icon, and a footer with two buttons. You cannot place additional elements in the header or footer, but you can customize the display and hide both the header and the footer, including the buttons.

Customize modal appearance

You can customize the width of the modal and the spacing of elements on the modal. You can also choose to show padding and a gap between elements. If desired, add a background color to the modal. The background color does not apply to the footer of the modal.

To customize the width of the modal:

1. Select the modal tab.
2. In the Modal properties in the editor panel, select a Width. By default, the modal width is Small.

To customize the appearance of the modal, including elements added to it:

1. With the modal tab selected, select Element format.
2. Select Container style to open the style options:

Add a title to the modal

By default, a modal includes a header with a default title, New Modal, and a close icon. To hide or modify the title or close icon for the modal:

1. With the modal tab selected, select Element format.
2. Select Header to expand the header formatting options.
3. (Optional) Deselect the checkbox for Show title to hide the title.
4. If the title is shown, update the title in the text box. Enter an equals sign (=) to use a dynamic text formula. See Add dynamic text based on your data.
5. (Optional) Format the title text. Add bold, change the text color, or change the text size.
6. To hide or show the close icon, select Header to expand the header formatting options, then select or deselect the Show close icon checkbox.

Hiding both the title and the close icon hides the header.

Customize the footer and buttons on the modal

By default, and two buttons in the footer, labeled Primary and Secondary to align with the color styling.

To customize the primary or secondary buttons:

1. With the modal tab selected, select Element format.
2. Select Footer to expand the footer formatting options.
3. (Optional) To hide the primary button, deselect the checkbox for Primary button.
4. For Text, update the placeholder text to a specific call to action. For example, Submit or Acknowledge.
5. (Optional) To hide the secondary button, deselect the checkbox for Secondary button.
6. For Text, update the placeholder text to a secondary call to action. For example, Cancel or Clear.

Hiding both buttons hides the footer.