Ask AI
Skip to main content

Add vertical list to accordion panel

Function: Add vertical list to accordion panel​

This action allows you to dynamically add a new "Vertical List" user interface (UI) element into a specific panel within an existing "Accordion" UI element on your application page. This is useful for building flexible layouts where content can be added or removed from collapsible sections as needed.

Input​

  • Accordion ui element: Specify the existing "Accordion" UI element on your page where you want to add the new vertical list.
    • Type: UI Element (specifically an Accordion)
  • Accordion panel code: Provide the unique code or identifier of the specific panel within the chosen "Accordion" UI element where the new "Vertical List" should be placed.
    • Type: Text
  • Vertical list code: Enter a unique code or identifier for the new "Vertical List" UI element that will be created and added. This code will be used to reference the new list later.
    • Type: Text

Output​

  • Vertical list: This is a variable that will hold the newly created "Vertical List" UI element. You can use this variable in subsequent actions to further configure or interact with the list.
    • Type: UI Element
    • Default Value: ACCORDION_PANEL_VERTICAL_LIST

Execution Flow​

Real-Life Examples​

Example 1: Dynamically adding product features​

Imagine you have a product detail page with an "Accordion" UI element for different product sections. You want to allow users to add a new "Specifications" list to the "Product Features" panel of this accordion.

  • Inputs:
    • Accordion ui element: ProductDetailsAccordion
    • Accordion panel code: FeaturesPanel
    • Vertical list code: ProductSpecsList
  • Result: A new "Vertical List" UI element, named ProductSpecsList, is created and appears within the "Product Features" panel of the ProductDetailsAccordion. The Vertical list output variable will now contain this new list.

Example 2: Building a customizable user profile​

On a user profile page, you have an "Accordion" UI element called UserProfileSections. One of its panels is ContactInformation. You want to add a new "Social Media Links" list to this panel when a user decides to add their social profiles.

  • Inputs:
    • Accordion ui element: UserProfileSections
    • Accordion panel code: ContactInformation
    • Vertical list code: SocialMediaLinksList
  • Result: A new "Vertical List" UI element, named SocialMediaLinksList, is created and displayed inside the ContactInformation panel of the UserProfileSections accordion. The Vertical list output variable will hold this new list for further configuration.

Example 3: Managing tasks with sub-items​

Consider a task management application where each main task is an item in an "Accordion" UI element called ProjectTasks. When a user opens a specific task panel, you want to give them the option to add a "Subtasks" list.

  • Inputs:
    • Accordion ui element: ProjectTasks
    • Accordion panel code: Task_001_Details (assuming Task_001_Details is the code for a specific task's panel)
    • Vertical list code: SubtasksForTask001
  • Result: A new "Vertical List" UI element, named SubtasksForTask001, is created and inserted into the Task_001_Details panel of the ProjectTasks accordion. The Vertical list output variable will contain this newly added list.