Usage Scenario: Automatic Total Amount Display with Price Calculation

In an e-commerce application, when the user enters quantity and unit price information on a product page, the system automatically calculates the total price and displays it to the user. This can be done by the user clicking a button after filling out the form or by an action triggered when the field changes.

Steps to Add Total Price Calculation Action

1. Enter the UI Design module and select a Button element from the Elements panel on the left side.
2. Add a field (for example a Label or other Text Input) where you will display the total amount.

3. Select the element that will start the calculation and open the +ADD ACTION menu from the Properties panel.
4. Select the OnClick → Arithmetic → Multiply action.

Configure Multiply Action

• Value: Symbol Picker > Components > Number Input
• Value2: Symbol Picker > Components > Number Input

Result Usage (Optional)

• By adding a Set Value action immediately after the Multiply action, you can print the total amount calculated in a field.
  
  • Set Value → Target: totalPrice field
  • Value Result of Multiply action

With this configuration, when the user enters the product quantity and unit price and then clicks the “Calculate” button or when the fields change, the total amount is automatically calculated and displayed. Thus, the user can instantly see the cost of their purchases.