Ask AI
Skip to main content

Add vertical list ui element to a step of a stepper ui element

Function: Add Vertical List to Stepper Step​

This action allows you to dynamically add a new "Vertical List" user interface (UI) element into a specific "Step" within an existing "Stepper" UI element on your application's page. This is useful for building dynamic forms or multi-step processes where you need to present lists of information or input fields within a particular step.

Input​

  • Stepper UI element:
    • Type: UI Element (specifically a Stepper)
    • Description: This is the existing Stepper component on your page where you want to add the new Vertical List. You must select or provide a reference to this Stepper.
  • Step code:
    • Type: Text
    • Description: Enter the unique identifier (code) of the specific step within the chosen Stepper where the new Vertical List should be placed. For example, if your Stepper has steps like "PersonalInfo", "Address", "Review", you would enter "Address" to add the list to the address step.
  • Vertical list code:
    • Type: Text
    • Description: Provide a unique identifier (code) for the new Vertical List UI element that will be created and added. This code will be used to reference this specific Vertical List later if you need to modify its contents or properties.

Output​

  • Vertical list:
    • Type: UI Element (specifically a Vertical List)
    • Description: This output provides the newly created Vertical List UI element itself. You can specify a variable name (e.g., MyNewVerticalList) to store this element, allowing you to use it in subsequent actions, such as adding items to the list or setting its visibility. If no variable name is specified, it defaults to STEP_VERTICAL_LIST.

Execution Flow​

Real-Life Examples​

Example 1: Adding a list of product options to an order form​

Imagine you have a multi-step order form. In the "Product Selection" step, you want to dynamically add a list where users can choose product variations.

  • Inputs:
    • Stepper UI element: OrderFormStepper (the main Stepper component)
    • Step code: ProductSelectionStep (the specific step for product selection)
    • Vertical list code: ProductOptionsList (the unique ID for the new list)
  • Result: A new Vertical List UI element with the ID ProductOptionsList is created and added inside the ProductSelectionStep of the OrderFormStepper. This list is now ready to have product options added to it. The ProductOptionsList UI element is stored in a variable named ProductOptionsList (or STEP_VERTICAL_LIST if not specified).

Example 2: Creating a checklist for onboarding tasks in a user profile setup​

You're building a user onboarding flow with several steps. In the "Onboarding Tasks" step, you want to present a dynamic checklist.

  • Inputs:
    • Stepper UI element: UserProfileSetupStepper
    • Step code: OnboardingTasksStep
    • Vertical list code: OnboardingChecklist
  • Result: A new Vertical List UI element with the ID OnboardingChecklist is created and inserted into the OnboardingTasksStep of the UserProfileSetupStepper. You can then use other actions to populate this list with individual task items. The OnboardingChecklist UI element is stored in a variable named OnboardingChecklist.

Example 3: Displaying a list of available appointment slots in a booking process​

Consider a booking application where a user selects a service, and then in a subsequent step, a list of available time slots needs to appear.

  • Inputs:
    • Stepper UI element: BookingProcessStepper
    • Step code: SelectTimeSlotStep
    • Vertical list code: AvailableSlotsList
  • Result: A new Vertical List UI element with the ID AvailableSlotsList is generated and placed within the SelectTimeSlotStep of the BookingProcessStepper. This list can then be populated with time slot options retrieved from a database or API. The AvailableSlotsList UI element is stored in a variable named AvailableSlotsList.