Edit an existing UI interaction

Edit or modify an existing UI interaction by inserting new steps, swapping or deleting events, removing steps, or updating step configurations in the diagram editor.

Before you begin

Role required: ui_builder_admin

About this task

When you create a UI interaction, you can return to the diagram editor to modify its flow. You can insert steps before or after existing steps, swap the outgoing event that connects one step to the next, delete events or steps you no longer need, update step configurations, and add or remove branches.

Important:

Before editing a UI interaction that is already in use, check the Settings and Usage pages to understand where the interaction is triggered. Consider duplicating the interaction before making changes to avoid unintended impacts to active pages or declarative actions. For information on duplicating an interaction, see Duplicate a UI interaction.

Procedure

1. Navigate to All > Now Experience Framework > UI Builder.
2. Select the UI interactions tab.
3. In the search field, enter the name of the interaction you want to edit.

   Figure 1. UI interactions list

   

4. Select the interaction from the search results.

   The diagram editor opens with the existing flow displayed on the canvas.

5. Choose how you want to edit the interaction.

   Table 1. Editing scenarios

   Editing scenario	Steps	UI depiction
   Insert a step before or after an existing step	Select + before the step, then choose a step from the toolbox. The step is inserted and the topmost outgoing event is automatically assigned to continue the flow. Note: Steps with no outgoing events appear in an Unavailable section at the bottom of the toolbox. To add an unavailable step, use an And branch instead.
   Work with unavailable steps	If a step cannot be added at the selected location, it appears in the Unavailable section. Review the explanation to understand why the step is not supported at that point and which alternatives are available.
   Delete a step	Select the step and select the delete icon . When a step is deleted, any dependent downstream bindings reset to their defaults, with a visual indicator confirming the reset. Any outgoing events for this step are deleted and displayed with red borders.
   Add a parallel branch	Insert an And step from the Logic section of the toolbox. Branches execute in order from top to bottom. If an And branch exists with no steps, you can’t add another And branch.
   Insert If/Else logic	Insert an If/Else step from the Logic section of the toolbox. When inserted before an existing step, the downstream flow is preserved in the Else branch. Define conditions using formula building or a script. Branches evaluate top to bottom and the first true branch executes. Note: An If/Else step includes one If branch and one Else branch. These branches are required and can’t be deleted. Any additional If branches are optional and can be removed.
   Delete If branch	Select the If branch and select the delete icon . You can delete an If branch only when more than one If branch exists. You cannot delete the last remaining If branch or the Else branch.
   Swap outgoing events	Select the event node on the diagram and choose which outgoing event continues the flow. Note: Each outgoing event can be used only once per step. Events already in use are read-only. Remove an existing branch to change event assignments
   Delete an event	Select the event on the diagram and select the delete icon . Any associated connections and downstream steps are removed.

6. Select Save.

Result

The updated UI interaction is saved. Any page events or declarative actions that reference this interaction automatically use the updated flow the next time the interaction is triggered.