Ask AI
Skip to main content

Add a step

Function: Add a step​

This action allows you to dynamically add a new step to an existing Stepper UI element in your application. This is useful for guiding users through multi-stage processes, like onboarding, form submissions, or order flows, where the steps might change based on user input or data.

Input,

  • Stepper ui element (UI element, required): This is the visual Stepper component on your page where you want to add a new step. You must select an existing Stepper UI element.
  • Step code (A piece of text, required): A unique identifier for the new step. This code is used internally to reference the step.
  • Step name (A piece of text, required): The display name for the new step that users will see.
  • Step icon (A piece of text, optional): The name of an icon to display next to the step name. If left blank, no icon will be shown.

Execution Flow,

Real-Life Examples,

Example 1: Adding a new step to an onboarding process​

Imagine you have an onboarding flow for new users, and you want to add a "Welcome" step at the beginning.

  • Inputs:
    • Stepper ui element: OnboardingFlowStepper (your Stepper component on the page)
    • Step code: WELCOME
    • Step name: Welcome to Our App!
    • Step icon: hand-wave
  • Result: The OnboardingFlowStepper will now display a new step at the beginning called "Welcome to Our App!" with a waving hand icon, guiding the user through the initial stage.

Example 2: Dynamically adding a review step based on form complexity​

Consider a multi-page application form. If the user selects certain options that require additional review, you might want to add a "Review Documents" step.

  • Inputs:
    • Stepper ui element: ApplicationFormStepper
    • Step code: REVIEW_DOCS
    • Step name: Review Supporting Documents
    • Step icon: file-alt
  • Result: The ApplicationFormStepper will be updated to include a step named "Review Supporting Documents" with a document icon, appearing at the appropriate point in the form submission process.

Example 3: Adding a final confirmation step without an icon​

For a simple checkout process, you might want to add a final "Order Confirmation" step.

  • Inputs:
    • Stepper ui element: CheckoutStepper
    • Step code: CONFIRMATION
    • Step name: Order Confirmation
    • Step icon: (left blank)
  • Result: The CheckoutStepper will now include a step labeled "Order Confirmation" at the end of the process, without any specific icon displayed next to it.