Add modeless dialog event to a UI Builder page

Learn how to add and configure a modeless dialog event, such as open, close, or minimize in UI Builder. A modeless dialog is a floating window containing content above a page.

Before you begin

Role required: ui_builder_admin

Procedure

1. Navigate to All > Now Experience Framework > UI Builder.
2. Open an experience to work in or create an experience by selecting Create > Experience.
   See Configure how users interact with your applications in UI Builder for more information on creating experiences.
3. Open or create a page variant.
   For more information about how to create a page in UI Builder, see Create a page in UI Builder.
4. Add a modeless dialog to the page.
   For more information about how to create a modeless dialog, see Add modeless dialog to a UI Builder page.
5. Add a component to the page, such as a button, to take action on the modeless dialog.
   For more information about how to create a button that interacts with a modeless dialog, see Add modeless dialog to a UI Builder page.
6. Select the button component in the content tree or on the stage.
7. In the configuration panel, select the Events tab.
8. Select + Add event handler.
   
9. From the Event handler preview window, select an action to assign to the button.
   There are five modeless dialog event handlers available.

   

   Note:

   For any of the event handlers, select Script in the Mode drop-down if you prefer to work in the script editor.

   To add a modeless dialog event handler	Do the following
   Open Modeless Dialog	Opens a modeless dialog. For example, add a button labeled Compose email and configure the button to open a modeless dialog containing the Email composer (mini) component. Heading: Type a heading for the modeless dialog. Minimized Heading: Type a heading that is displayed when a user selects the minimized dialogs drop-down icon on the page. Category: Type a category name to group the modeless dialog. Modeless Dialog: Select the modeless dialog to open. Single instance: Select this option to enable users to open only one instance of the modeless dialog. Leave this option unselected to enable users to open multiple instances of the modeless dialog. For example, if the button opens a modeless dialog containing the Email composer (mini) component and you don't select the single instance option, users can open multiple modeless dialog windows to compose email messages. Modeless Dialog Instance ID: If you select the Single instance option, specify the modeless dialog instance ID that should be opened on click. Move your mouse over the field and select the Bind data icon. In Data types select Modeless Dialog. Drag the instanceID pill to the top section and select Apply. When to trigger (Advanced option): Select Always to have the component (in this example, the button) always open the modeless dialog. Select Conditionally to add an event handler condition. For more information about event handler conditions, see Supported functions in the UI Builder component formula editor.
   Close Modeless Dialog	Closes a modeless dialog. Use this option if you want to configure a component, such as a button, to close the modeless dialog from outside the modeless dialog window. Modeless Dialog Instance ID: Specify the modeless dialog instance ID that should be closed on click. When to trigger (Advanced option): Select Always to have the component (in this example, the button) always close the modeless dialog. Select Conditionally to add an event handler condition. For more information about event handler conditions, see Supported functions in the UI Builder component formula editor.
   Minimize Modeless Dialog	Minimizes an open modeless dialog. Use this option if you want to configure a component, such as a button, to minimize the modeless dialog from outside the modeless dialog window. Modeless Dialog Instance ID: Specify the modeless dialog instance ID that should be minimized on click. When to trigger (Advanced option): Select Always to have the component (in this example, the button) always minimize the modeless dialog. Select Conditionally to add an event handler condition. For more information about event handler conditions, see Supported functions in the UI Builder component formula editor.
   Update Modeless Dialog	Updates the specified fields on a modeless dialog. For example, add a button labeled Update Heading to the footer of a modeless dialog and configure the button to update the heading of the component in the modeless dialog. Heading: Type new heading text for the modeless dialog that should be added when the button is selected. Minimized Heading: Type new minimized heading text that should be added when the button is selected. Category: Type a new category name that should be added when the button is selected. Modeless Dialog: Select the modeless dialog to update. Modeless Dialog Instance ID: Specify the modeless dialog instance ID that should be updated on click. Is Dirty: Select this option to mark the modeless dialog as dirty. When to trigger (Advanced option): Select Always to have the component (in this example, the button) always update the modeless dialog. Select Conditionally to add an event handler condition. For more information about event handler conditions, see Supported functions in the UI Builder component formula editor.
   Dirty Modeless Dialog	Marks a modeless dialog as dirty. In Modeless Dialog Instance ID, specify the modeless dialog instance ID to mark as dirty. When to trigger (Advanced option): Select Always to have the component (in this example, the button) always marked as dirty. Select Conditionally to add an event handler condition. For more information about event handler conditions, see Supported functions in the UI Builder component formula editor.

10. Select Add.

Result

The configured event handler displays in the configuration panel Events tab for the component.