Get current step

Function: Get Current Step

This action helps you find out which specific step a user is currently on within a "Stepper" UI element. A Stepper is a visual component that guides users through a multi-step process, like an application form or an onboarding flow. By using this action, you can retrieve the unique numerical identifier (code) of the step that is currently open or active. This is useful for tracking progress, enabling conditional logic, or updating other parts of your application based on the user's current position in a process.

Input

• Stepper UI Element:
  • Description: This is the visual "Stepper" component on your page that you want to check. You need to select the specific Stepper element from your application's design.
  • Type: UI Element (specifically a Stepper)

Output

• Result:
  • Description: This is the name of a variable where the action will store the unique numerical code of the currently active step. You can then use this variable in other parts of your application.
  • Type: Number
  • Default Value: CURRENT_STEP

Execution Flow

Real-Life Examples

Here are some examples of how you can use the "Get Current Step" action in your application:

Example 1: Tracking Onboarding Progress

Imagine you have an onboarding process for new users, divided into several steps using a Stepper component. You want to know which step a user is currently viewing to update their progress in a database.

• Inputs:
  • Stepper UI Element: OnboardingStepper (the name of your Stepper component)
• Result:
  • The variable CURRENT_STEP will hold a number like 1, 2, or 3, indicating the user's current step. For instance, if the user is on the "Profile Setup" step, CURRENT_STEP might be 2.

Example 2: Conditional Display Based on Step

You have a multi-step application form, and you want to show or hide certain information or buttons depending on which step the user is on.

• Inputs:
  • Stepper UI Element: ApplicationFormStepper
• Result:
  • The variable CURRENT_STEP will store the numerical code of the active step. If CURRENT_STEP is 3 (e.g., "Document Upload"), you could then use a conditional rule to display a "Upload Files" button and hide a "Next" button.

Example 3: Updating a Progress Bar

You want to visually represent the user's progress through a checkout flow using a separate progress bar component that updates as they move through the Stepper.

• Inputs:
  • Stepper UI Element: CheckoutFlowStepper
• Result:
  • The variable CURRENT_STEP will contain the numerical code of the current step (e.g., 1 for "Shipping Info", 2 for "Payment Details", 3 for "Order Review"). You can then use this number to dynamically update the visual state of your progress bar.