Create a UI interaction

Create a UI interaction and attach it to a component event in UI Builder. UI interactions are reusable flows that combine UI, logic, and scripts into a single unit, including custom UI built with Component Builder, and can be triggered from any component event on a page.

Before you begin

Role required: ui_builder_admin

About this task

In this task, you create a UI interaction and define its behavior using the diagram editor. You select an interaction type, add and configure steps, define logic and branching, and specify inputs that the interaction requires at runtime.

Important:

UI interactions don’t run on their own. After creating an interaction, you must attach it to a component or page event so it can run when that event occurs.

Procedure

1. Navigate to All > Now Experience Framework > UI Builder.
2. From the UI Builder home page, select Create > UI interaction.

   Figure 1. Create UI interaction

   

3. In the creation modal, enter a name for the interaction.

   Figure 2. UI interaction creation modal

   

4. Select an interaction Type.

   Generic interactions are used with no dependencies on form or list controller data. Form interactions use form-specific steps such as validating or saving a record. List interactions use list-specific steps such as refreshing or querying a list. If you're unsure, choose Generic.

5. Optional: Enter a description that summarizes what the interaction does and when it runs.
   For example, Displays a confirmation modal before deleting a record.
6. Select Create.

   Figure 3. UI interaction editor

   

   The diagram editor opens with a start and end node connected by an add icon .
7. Select the add icon between the start and end nodes to open the toolbox, then select a step to add it to the diagram.
   Note:

   The steps available in the toolbox depend on the interaction type that you selected.

   Figure 4. UI interaction toolbox

   

8. Select the step to open its properties in the configuration panel.
9. Configure the step properties in the configuration panel.
   Properties vary depending on the step. For example, a modal step lets you set button labels and field content, while a script step lets you write server-side logic.
10. Repeat steps 7–9 to build out your interaction.
    Steps execute in sequence. To run steps in parallel, select the And step to create parallel branches. Each branch represents a separate path of steps and executes in order from top to bottom. To create conditional paths, add an If/Else step from the toolbox. This step creates branches that run when conditions are met. For more information, see Edit an existing UI interaction.
11. Use the Inputs pill to add any data your interaction needs at runtime.
    Supported input types are: String, True/False, Choice, Reference, and JSON.
12. Select Save.

Result

The UI interaction is created and ready to be attached to a component or page event. Once attached, it runs its configured steps whenever the specified event occurs. See Trigger a UI interaction from a page event.

To trigger this UI interaction from a form or list button using a declarative action, see Trigger a UI interaction from a declarative action.