Ask AI
Skip to main content

Get template ui elements from vertical list

Function: Get UI Elements from Vertical List​

This action allows you to retrieve all the individual UI elements that are contained within a specific Vertical List component on your page. This is useful when you need to work with each item inside a list, such as updating their content, changing their visibility, or performing actions on them individually.

Input​

  • List component
    • Description: Choose the 'Vertical List' component from which you want to extract its contained UI elements.
    • Type: UI element (specifically a Vertical List)
    • Required: Yes

Output​

  • UI elements
    • Description: A list of all the UI elements found inside the selected Vertical List.
    • Type: List of values (Array)

Execution Flow​

Real-Life Examples​

Here are some practical ways you can use the "Get UI Elements from Vertical List" action in your application:

Example 1: Dynamically Update Product Prices​

Imagine you have a product catalog displayed as a "Vertical List" where each item is a "Product Card" UI element showing product details including its price. You want to update the prices of all products based on a new discount.

  • Inputs:
    • List component: Select the "Product Catalog List" (your Vertical List component).
  • Result: The action returns a list of all "Product Card" UI elements. You can then loop through this list, access the price field within each "Product Card", and apply the discount to update their displayed prices.

Example 2: Show/Hide User Profile Sections Based on Permissions​

Suppose a user's profile page has different sections (e.g., "Personal Info", "Address Details", "Payment Methods") organized within a "Vertical List". You want to hide certain sections if the current user doesn't have the necessary permissions.

  • Inputs:
    • List component: Select the "User Profile Sections" (your Vertical List component).
  • Result: The action provides a list of all section UI elements. You can then check the user's permissions and, for each section in the list, set its visibility property to "hidden" if the user is not authorized to view it.

Example 3: Validate All Fields in a Dynamic Form​

You have a form where users can add multiple items, and each item is represented by a set of input fields within a "Vertical List" (e.g., an order form with multiple line items). Before submitting, you need to ensure all required fields across all items are filled.

  • Inputs:
    • List component: Select the "Order Line Items" (your Vertical List component).
  • Result: The action returns a list of all individual input field UI elements for each line item. You can then iterate through this list, check if each field is filled, and display an error message if any required field is empty before allowing the form submission.