Ask AI
Skip to main content

Open a certain step

Function: Open a certain step​

This action allows you to programmatically control a "Stepper" user interface element, making it display a specific step. Steppers are commonly used for guiding users through multi-step processes, like forms, onboarding flows, or wizards. By using this action, you can jump to any step in your stepper, regardless of the current step.

Input​

  • Stepper UI Element: This is the specific Stepper component on your page that you want to control. You'll select it directly from your application's user interface.
  • Index: This is a number representing the position of the step you want to open. Steps are typically numbered starting from 0 (the first step), then 1 (the second step), and so on.

Output​

No direct output is returned by this action. The effect of this action is visual, changing which step is currently displayed in the selected Stepper UI Element.

Execution Flow​

Real-Life Examples​

Here are some practical ways you can use the "Open a certain step" action in your applications:

Example 1: Guiding Users to a Specific Onboarding Stage​

Imagine you have an onboarding process with several steps. If a user previously completed some steps but didn't finish, you might want to bring them back to where they left off.

  • Inputs:
    • Stepper UI Element: "New User Onboarding"
    • Index: 2 (to open the third step, e.g., "Profile Setup")
  • Result: The "New User Onboarding" stepper will immediately display its third step, allowing the user to continue their setup from that point.

Example 2: Navigating a Multi-Page Form Based on User Choices​

Consider a complex form where certain selections in an early step determine which later steps are relevant. You can use this action to skip irrelevant steps.

  • Inputs:
    • Stepper UI Element: "Loan Application Form"
    • Index: 4 (to jump directly to the "Financial Details" step, skipping "Employment History" if the user is retired)
  • Result: The "Loan Application Form" stepper will bypass the intermediate steps and directly show the "Financial Details" section, streamlining the user's experience.

Example 3: Resetting a Configuration Wizard​

After a user completes a configuration process, you might want to offer them an option to restart the wizard from the beginning.

  • Inputs:
    • Stepper UI Element: "Product Customization Wizard"
    • Index: 0 (to return to the very first step, e.g., "Choose Product Type")
  • Result: The "Product Customization Wizard" stepper will reset and display its initial step, allowing the user to begin a new configuration.