Ask AI
Skip to main content

Get first step

Function: Get first step​

This action helps you retrieve the unique numerical identifier (code) of the very first step within a "Stepper" UI element. This is useful when you need to programmatically know or navigate to the beginning of a multi-step process, like an onboarding flow or a multi-page form.

Input​

  • Stepper UI Element: This is the specific "Stepper" component on your page from which you want to get the first step's code. It's a required input.

Output​

  • Result: The name of a variable where the numerical code of the first step will be stored. By default, this variable is named NEXT_STEP.

Execution Flow​

Real-Life Examples​

Here are a few scenarios where you might use the "Get first step" action:

Example 1: Starting a New Onboarding Process​

Imagine you have an onboarding process for new users, structured as a Stepper. When a new user signs up, you want to automatically direct them to the very first step.

  • Inputs:
    • Stepper UI Element: OnboardingFlowStepper (This refers to your Stepper component on the page)
    • Result: FirstOnboardingStepID
  • Result: The numerical code of the first step of the OnboardingFlowStepper (e.g., 101) is stored in a variable named FirstOnboardingStepID. You can then use this variable to navigate the user to that specific step.

Example 2: Resetting a Multi-Stage Application Form​

You have a complex application form divided into several steps using a Stepper. If a user decides to restart the application, you want to ensure they are taken back to the initial step.

  • Inputs:
    • Stepper UI Element: LoanApplicationStepper
    • Result: InitialApplicationStep
  • Result: The numerical code of the first step of the LoanApplicationStepper (e.g., 2001) is stored in a variable named InitialApplicationStep. This variable can then be used to reset the form's state and display the first step.

Example 3: Displaying the Default Step in a Product Configuration Wizard​

You've built a product configuration wizard using a Stepper. When a user opens the wizard, you want to highlight or display information about the very first configuration step by default.

  • Inputs:
    • Stepper UI Element: ProductConfigWizard
    • Result: DefaultConfigStep
  • Result: The numerical code of the first step of the ProductConfigWizard (e.g., 50) is stored in a variable named DefaultConfigStep. This variable can be used to dynamically load content or set the active step in your UI.