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:
- Select the modal tab.
- 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:
- With the modal tab selected, select Element format.
- Select Container style to open the style options:
Style | Details |
---|---|
Spacing | Manage the space around the outside of the modal and between rows. Choose between Small, Medium (default), and Large. |
Padding | Adds padding to the modal. Selected by default. Deselect the checkbox to remove padding between elements and the modal. |
Background color | Select a background color for the modal. Does not apply to the footer. |
Element gap | Adds padding between elements. Selected by default. Deselect the checkbox to remove all space between elements. |
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:
- With the modal tab selected, select Element format.
- Select Header to expand the header formatting options.
- (Optional) Deselect the checkbox for Show title to hide the title.
- 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.
- (Optional) Format the title text. Add bold, change the text color, or change the text size.
- 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:
- With the modal tab selected, select Element format.
- Select Footer to expand the footer formatting options.
- (Optional) To hide the primary button, deselect the checkbox for Primary button.
- For Text, update the placeholder text to a specific call to action. For example, Submit or Acknowledge.
- (Optional) To hide the secondary button, deselect the checkbox for Secondary button.
- For Text, update the placeholder text to a secondary call to action. For example, Cancel or Clear.
Hiding both buttons hides the footer.
Updated 9 days ago