Utilization Scenario: Calculate Remaining Budget

After a user enters the total budget and expenditure for a particular event, the system automatically calculates the remaining budget and shows it to the user. This can be done with an action triggered by the user clicking on a button after filling out the form.

  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 another Text Input) where you will display the remaining amount.
  1. Select the button that will start the calculation and open the +ADD ACTION menu from the Properties panel.
  2. Select OnClick → Arithmetic → Subtract action.

Configuring the Subtract Action

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

Result Usage (Optional)

You can show the calculated remaining budget in a field by adding a Set Value action immediately after the Subtract action:

  • Set Value → Target: remainingBudget field
  • Value: Result of the Subtract action

With this configuration, when the user enters the total budget and expenditure and clicks the "Calculate Remainder ” button, the remaining amount is calculated and displayed on the screen. This allows the user to instantly see the available balance to spend on the activity.