Open a certain step
Function: Open a certain step
This action allows you to programmatically control a "Stepper" UI element in your application. A Stepper is a visual component that guides users through a multi-step process, like filling out a form or completing an onboarding flow. With this action, you can instantly navigate to a specific step within a chosen Stepper by providing its numerical position (index). This is useful for creating dynamic workflows, skipping steps based on user input, or returning to previous steps.
Input
- Stepper UI Element: This is the specific Stepper component on your page that you want to control. You'll need to select the Stepper from your application's UI elements. This input is required.
- Index: This is a whole number that represents the position of the step you want to open. For example, if you want to open the first step, you might enter
0or1depending on how your Stepper is configured (check your Stepper's settings for exact numbering). This input is required.
Output
This action does not directly return any data. Instead, its effect is visible directly on your application's user interface: the specified Stepper UI element will immediately update to display the content of the chosen step.
Execution Flow
Real-Life Examples
-
Navigating to the Next Step of a Form:
- Scenario: After a user successfully completes the first section of a multi-page application form, you want to automatically move them to the next section.
- Inputs:
- Stepper UI Element:
Job Application Stepper(the name of your Stepper component) - Index:
1(assuming the first step is index 0, the second is index 1)
- Stepper UI Element:
- Result: The "Job Application Stepper" on the page will immediately display the content of its second step, allowing the user to continue filling out the form.
-
Skipping Steps Based on User Choice:
- Scenario: You have an onboarding process with several steps. If a user indicates they are an "existing customer" in an early step, you want to skip the "Create New Account" step and jump directly to the "Link Existing Account" step.
- Inputs:
- Stepper UI Element:
Customer Onboarding Stepper - Index:
3(assuming "Link Existing Account" is the fourth step, with index 3)
- Stepper UI Element:
- Result: If the user selects "existing customer," the "Customer Onboarding Stepper" will bypass the "Create New Account" step and directly show the "Link Existing Account" step.
-
Returning to a Specific Step for Review:
- Scenario: At the end of a multi-step application, you provide a "Review All Details" button. Clicking this button should take the user back to the summary step (e.g., step 4) where they can review all their entered information before final submission.
- Inputs:
- Stepper UI Element:
Loan Application Stepper - Index:
3(assuming the summary step is the fourth step, with index 3)
- Stepper UI Element:
- Result: When the user clicks "Review All Details," the "Loan Application Stepper" will navigate back to the summary step, allowing them to check their information.