Stepper Element Example Usage

In this example, when a button is clicked, the steps will run in a loop.

Step 1: Add Stepper Element

  • Drag and drop the Stepper element from the Elements panel.

Step 2: Add the Button

  • Drag and drop the Button element from the Elements panel.

Step 3: Name the Stepper Steps

  • Name the steps in the stepper element as Step1, Step2, Step3 respectively.

Step 4: Name the Button

  • Select the button you added.
  • In the Properties panel, type “Run” in the Fixed Value field.

Step 5: Add Actions

  1. Click +Add Action in the Properties panel that opens when you click the button.
  2. Select OnClick → UI Control → Set Value Of.
  3. In the window that opens, select Step1 in the Select Box.

Step 6: Add Other Steps

  • Perform the same action for Step2 and Step3.
  • To speed up the process, you can copy and paste the action by clicking on the ellipsis icon.

Step 7: Make the Steps Cyclical

  • After all steps are completed, select Step1in the last action to return to Step1.

Step 8: Run the App

  • Run the application. Each time the button is clicked, the steps will run in sequence and when the loop is complete, it will return to Step1.

By following this guide you can use the Stepper element effectively in your application.