How to Create and Connect a UI Process in Autorun

This tutorial shows the complete, end-to-end flow for creating a UI Process and connecting it to a UI component event in an Autorun application.

---

---

Steps:

1. Start

• Open Developer Toolbox (available only when in Edit mode)
• Click on Process Designer
• Click on Add process in the upper right corner

---

2. Create a New Process

• Rename the process from "New Process" to, for example: UpdateOffer

---

3. Set the Process Type

• From the Type dropdown menu select: UI

---

4. Build the UI Process Flow

On the canvas:

• The Start and End nodes are created automatically
• From the Library section, drag and drop a Code block of your choosing
• Connect the nodes by draging one node to the next in this order:
  • Start -> Code
  • Code -> End

A UI process must have a valid Start-to-End connection to execute.

---

5. Add Logic to the Code Block

• Click the Code icon in the upper-right corner of the Code node
• The editor opens and you can see the default code added automatically

Example:

console.log(context);

• The context object contains UI-related data such as:

  • Component state
  • User interaction data
  • Page and session information

• Click Save

• Close the editor

---

6. How to verify the UI Process was created?

• Open the Processes list in the Process Designer
• Confirm that UpdateOffer appears in the UI Processes section

---

7. Connect the UI Process to a Component Event

• Click the gear icon on the Table component which opens component Settings
• Scroll to On change
• From the dropdown, select for example UpdateOffer
• Click Save

---

What counts as a “change” in onChange?

A change means any modification of a field value, for example:

• Selecting a customer in an offer
• Adding a new product to an offer
• Entering or modifying a quantity
• Entering or modifying a price
• Editing a value in a table cell
• Changing a dropdown selection

Each of these actions fires the onChange event.

Example:

• User enters price and quantity
• onChange triggers a UI process
• The process calculates total price automatically

---

What happens if onChange is NOT connected?

If no UI process is attached to onChange:

• You can still enter values normally
• Fields will update visually
• No additional logic will run

Example:

• User enters price and quantity
• Total amount will not be calculated
• Unless a UI process is explicitly attached to onChange that performs the calculation