Add a step

Function: Add a step

This action allows you to dynamically add a new step to an existing "Stepper" user interface element on your application page. A Stepper is a visual component that guides users through a multi-stage process, like filling out a form or completing an order. By using this action, you can programmatically extend or modify the steps in such a process.

Input

• Stepper UI Element (Required): This is the specific Stepper component on your page where you want to add a new step. You will select this directly from your application's UI elements.
• Step Code (Required): A unique identifier for the new step. This code helps the system recognize and manage the step internally. It should be a short, descriptive piece of text.
• Step Name (Required): The display name for the new step. This is the text that users will see on the Stepper component.
• Step Icon (Optional): An icon that will be displayed next to the step name. You can provide the name of an icon from your platform's icon library.

Output

This action does not return any direct output values. Instead, it modifies the specified "Stepper UI Element" by adding the new step to its sequence.

Execution Flow

Real-Life Examples

Here are a few examples of how you might use the "Add a step" action in your application:

Example 1: Dynamic Onboarding Process

Imagine you have an onboarding process for new users, and you want to add an extra "Personalize Profile" step only if the user indicates they are interested in advanced features during an earlier stage.

• Inputs:
  • Stepper UI Element: Onboarding Stepper (the visual stepper component on your onboarding page)
  • Step Code: personalize_profile
  • Step Name: Personalize Your Profile
  • Step Icon: user-gear (assuming this is an icon for settings/personalization)
• Result: The "Onboarding Stepper" on the user's screen will now include an additional step called "Personalize Your Profile" with a gear icon, appearing at the end of the existing steps.

Example 2: Conditional Order Customization

You have an online store where customers can customize certain products. If a customer selects a product that requires engraving, you want to add an "Engraving Details" step to their order process.

• Inputs:
  • Stepper UI Element: Order Placement Stepper (the stepper guiding the customer through checkout)
  • Step Code: engraving_details
  • Step Name: Provide Engraving Details
  • Step Icon: pencil (an icon representing writing or details)
• Result: When a customer adds an engravable product to their cart, the "Order Placement Stepper" will automatically gain a new step titled "Provide Engraving Details," prompting them to enter their customization.

Example 3: Multi-Stage Application Form

You are building an application form for a grant, and depending on the applicant's initial answers (e.g., if they are applying as an individual or an organization), you need to add specific sections to the form.

• Inputs:
  • Stepper UI Element: Grant Application Stepper (the stepper managing the application sections)
  • Step Code: organization_info
  • Step Name: Organization Details
  • Step Icon: building (an icon representing an organization)
• Result: If an applicant selects "Organization" as their applicant type, the "Grant Application Stepper" will dynamically add an "Organization Details" step, ensuring they provide all necessary information for their application type.