Use modeless dialogs on a UI Builder page to add a floating window that enables you to interact with both the window content and the page content below.

The Modeless Dialog component is a floating window containing components and content that appears over a UI Builder page. You can do actions in the modeless dialog while still viewing and interacting with the page below. Multiple modeless dialog windows can be added to a single page. Modeless dialogs can be resized, moved to a new position on a page, and minimized.

Modeless dialogs are different than modals, which pop up but block interaction with the page until the modal is closed. Modeless dialogs are also different than popovers, which close after you click outside the popover.

Common modeless dialog use cases include creating a record, composing an email, using chat, adding work notes or comments, reading help information, or adding/viewing attachments in the modeless dialog.

UI Builder experience with a black arrow pointing to a modeless dialog floating over the page.

Anatomy of a modeless dialog

A modeless dialog consists of three parts:

  • When you add a modeless dialog to a page, the header includes a preconfigured minimize icon, expand icon, and close icon. Other actions can be configured if needed, for example, configure an action in a button to open the modeless dialog in a new tab.
  • Add any component from the UI Builder toolbox, for example, Email composer, Attachments, or Agent chat, into the body. You can apply layouts and configure the component as if you were adding the component to a page.
  • If needed, provide additional buttons or content in the footer at the bottom of the modeless dialog.
New modeless dialog with header, body, footer section identified with text.