Get first step

Function: Get first step

This function helps you find the very first step within a "Stepper" component on your application's page. A Stepper is a visual element that guides users through a sequence of distinct stages or steps. This action retrieves the unique identifier (code) of the initial step, which you can then use in other actions, like automatically navigating to that step.

Input

• Stepper UI Element: This is the visual "Stepper" component on your page from which you want to get the first step's identifier. You will select this directly from your application's design.

Output

• Result: The name of the variable where the unique numerical identifier (code) of the first step will be stored. This code can then be used in other actions, for example, to navigate directly to this step. By default, this will be stored in a variable named NEXT_STEP.

Execution Flow

Real-Life Examples

Here are some practical ways you can use the "Get first step" function:

Example 1: Automatically starting a new user onboarding process

• Scenario: You have a multi-step onboarding process for new users, and you want to ensure that when a user starts, they are always directed to the very first step.
• Inputs:
  • Stepper UI Element: Onboarding Stepper (You select your onboarding stepper component from the page).
  • Result: firstOnboardingStepCode (You define a variable to store the output).
• Result: The unique numerical identifier of the first step in your Onboarding Stepper (e.g., 101) is stored in the firstOnboardingStepCode variable. You can then use this variable in a "Navigate to Stepper Step" action to automatically show the first step.

Example 2: Resetting a form to its initial state

• Scenario: You have a complex form broken into several steps using a Stepper. After a user submits the form, you want to reset it to the very beginning for the next entry.
• Inputs:
  • Stepper UI Element: Product Configuration Stepper (You select your product configuration stepper).
  • Result: initialConfigStep (You define a variable to store the output).
• Result: The unique numerical identifier of the first step in the Product Configuration Stepper (e.g., 205) is stored in the initialConfigStep variable. After submission, you can use this variable to navigate back to the initialConfigStep, effectively resetting the form's view.

Example 3: Validating a Stepper's structure before use

• Scenario: As part of your application's setup, you want to perform a quick check to ensure that a critical Stepper component actually has steps defined, preventing errors later.
• Inputs:
  • Stepper UI Element: Checkout Process Stepper (You select your checkout process stepper).
  • Result: checkoutStartStep (You define a variable to store the output).
• Result: If the Checkout Process Stepper has steps, the unique numerical identifier of its first step (e.g., 300) is stored in checkoutStartStep. If the Stepper has no steps, the action will report an error, alerting you to a configuration issue.