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
Navigate to All > Now Experience Framework > UI Builder.
Select the UI interactions tab.
In the search field, enter the name of the interaction you want to edit.
UI interactions list with search field highlighted.
Select the interaction from the search results.
The diagram editor opens with the existing flow displayed on the canvas.
Choose how you want to edit the interaction.
| 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. | Image omitted: uib-uii-insert-step-before.png Inserting step before a step. |
| 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. | Image omitted: uib-uii-unavailable-steps.png List of unavailable steps. |
| Delete a step | Select the step and select the delete icon Image omitted: uib-delete-event-mapping-icon.png . 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. | Image omitted: uib-uii-delete-step.png Delete a step. |
| 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. | Image omitted: uib-uii-add-and-branch.png Added an 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. | Image omitted: uib-uii-if-else.png Insert If/Else logic. |
| Delete If branch | Select the If branch and select the delete icon Image omitted: uib-delete-event-mapping-icon.png . 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. | Image omitted: uib-uii-delete-if-branch.png Delete If 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 | Image omitted: uib-uii-swap-event.png Swap outgoing events. |
| Delete an event | Select the event on the diagram and select the delete icon Image omitted: uib-delete-event-mapping-icon.png . Any associated connections and downstream steps are removed. | Image omitted: uib-uii-delete-event.png Delete the event. |
- 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.
Parent Topic:UI interactions