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' component into a specific 'Panel' within an existing 'Accordion' component on your application page. This is useful for building dynamic interfaces where content needs to be organized and expanded.

Input​

  • Accordion UI Element (PART): This is the main 'Accordion' component on your page where you want to add the new list. You'll select an existing Accordion component from your application's UI elements.
  • Accordion Panel Code (STRING): This is a unique identifier (like a name or ID) for the specific 'Panel' inside the chosen Accordion where the new 'Vertical List' should be placed. For example, "ProductDetailsPanel" or "ContactInfoSection".
  • Vertical List Code (STRING): This is a unique identifier (like a name or ID) that you will assign to the new 'Vertical List' component being created. This code will allow you to refer to this new list later if you need to modify it. For example, "ItemList" or "FeatureList".

Output​

  • Vertical List (PART): After the action successfully adds the new 'Vertical List' to the Accordion panel, this output will store a reference to that newly created 'Vertical List' component. You can then use this reference in subsequent actions to further customize or interact with the list. By default, it's named "ACCORDION_PANEL_VERTICAL_LIST".

Execution Flow​

Real-Life Examples​

Example 1: Displaying Product Features​

Imagine you have an "Accordion" component on a product page, and you want to dynamically add a list of features to a specific panel within it.

  • Inputs:
    • Accordion UI Element: ProductDetailsAccordion (an existing Accordion component on your page)
    • Accordion Panel Code: FeaturesPanel
    • Vertical List Code: ProductFeaturesList
    • Vertical List (Output Variable Name): MyProductFeatures
  • Result: A new 'Vertical List' component named ProductFeaturesList is created and added inside the FeaturesPanel of the ProductDetailsAccordion. The MyProductFeatures variable now holds a reference to this new list, ready for individual feature items to be added.

Example 2: Managing User Preferences​

Consider a user settings page with an "Accordion" for different categories. You want to add a list of notification options to the "Notification Settings" panel.

  • Inputs:
    • Accordion UI Element: UserSettingsAccordion
    • Accordion Panel Code: NotificationSettings
    • Vertical List Code: NotificationOptions
    • Vertical List (Output Variable Name): UserNotifications
  • Result: A new 'Vertical List' component named NotificationOptions is created and placed within the NotificationSettings panel of the UserSettingsAccordion. The UserNotifications variable can now be used to populate this list with various notification preferences (e.g., email, SMS, push).

Example 3: Building a Dynamic FAQ Section​

You have an "Accordion" for your FAQ section, and you want to dynamically add a list of common questions to a "General Questions" panel.

  • Inputs:
    • Accordion UI Element: FAQAccordion
    • Accordion Panel Code: GeneralQuestions
    • Vertical List Code: CommonQuestionsList
    • Vertical List (Output Variable Name): FAQList
  • Result: A new 'Vertical List' component named CommonQuestionsList is created and inserted into the GeneralQuestions panel of the FAQAccordion. The FAQList variable now holds the newly created list, allowing you to add individual FAQ items (e.g., text components) to it.