---
sourceDocument: Australia Build or modify applications
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/application-development

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Edit an existing UI interaction

# Edit an existing UI interaction {#ariaid-title1}

Release version: Australia  
Updated April 10, 2026  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read  
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](https://servicenow-prod.fluidtopics.net/Dv8nHT4OaoL8VmbyGqak1g "Create an independent copy of an existing UI interaction to use as a starting point for a new interaction or to safely experiment with changes.").

## Procedure

1. Navigate to AllNow Experience FrameworkUI 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.  
   {#edit-ui-interaction__table_zzy_wfw_w3c__entry__3}

   | 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. | ![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. |   |
   | 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. |   |
   [Table 1. Editing scenarios]

   {#edit-ui-interaction__table_zzy_wfw_w3c}
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.

*[\>]: and then