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

Function: Add vertical list UI element to a step of a stepper UI element

This action allows you to dynamically add a "Vertical List" UI element into a specific "Step" within an existing "Stepper" UI element on your application's screen. This is useful when you want to build multi-step forms or processes where each step might contain a list of items, and you need to add these lists programmatically.

Input

• Stepper UI element: The existing Stepper UI element on your page where you want to add the new vertical list. You will select this from your available UI elements. (Required)
• Step code: The unique identifier (code) of the specific step within the chosen Stepper UI element where the Vertical List should be placed. For example, if your Stepper has steps like "Personal Info" and "Address", you might use "personal_info_step" as the code. (Required)
• Vertical list code: A unique identifier (code) that you will assign to the new Vertical List UI element being created. This code will allow you to refer to and manipulate this specific Vertical List later. For example, "product_list" or "task_items". (Required)

Output

• Vertical list: This is the newly created Vertical List UI element. You will provide a name for a variable where this new UI element will be stored, allowing you to refer to it later. By default, this variable will be named STEP_VERTICAL_LIST, but you can choose a different name.

Execution Flow

Real-Life Examples

Example 1: Building a multi-step order form

• Scenario: You are building an online order form with a "Stepper" UI element that guides users through different stages (e.g., "Select Items", "Shipping Details", "Payment"). In the "Select Items" step, you want to dynamically add a list where users can see and manage the products they've added to their cart.
• Inputs:
  • Stepper UI element: Order_Process_Stepper (the main stepper on your page)
  • Step code: select_items_step (the unique code for the "Select Items" step)
  • Vertical list code: cart_items_list (a new unique code for the list of cart items)
  • Output variable name: MyCartList
• Result: A new "Vertical List" UI element named cart_items_list is created and placed inside the "Select Items" step of your Order_Process_Stepper. This new list is stored in the variable MyCartList, which you can now use to add product details.

Example 2: Creating a dynamic task management workflow

• Scenario: You have a "Stepper" UI element representing a project workflow (e.g., "Planning", "Development", "Testing", "Deployment"). For the "Development" step, you want to dynamically add a list of tasks that need to be completed, which might vary based on the project type.
• Inputs:
  • Stepper UI element: Project_Workflow_Stepper
  • Step code: development_phase_step
  • Vertical list code: development_tasks_list
  • Output variable name: ProjectTasks
• Result: A new "Vertical List" UI element named development_tasks_list is created and inserted into the "Development" step of your Project_Workflow_Stepper. This list is stored in the ProjectTasks variable and is now ready to display specific development tasks.

Example 3: Onboarding new employees with a checklist

• Scenario: Your application has an employee onboarding process represented by a "Stepper" UI element (e.g., "Welcome", "Paperwork", "Training", "Setup"). In the "Paperwork" step, you need to present a checklist of documents the new employee must submit. This checklist might be generated based on their role.
• Inputs:
  • Stepper UI element: Employee_Onboarding_Stepper
  • Step code: paperwork_step
  • Vertical list code: document_checklist
  • Output variable name: RequiredDocuments
• Result: A new "Vertical List" UI element named document_checklist is created and added to the "Paperwork" step within the Employee_Onboarding_Stepper. This list is stored in the RequiredDocuments variable and can then be populated with the required documents for the new employee.