Ask AI
Skip to main content

addtemplatecomponentstolistv2

## Function: Add template UI elements to vertical list

This action allows you to dynamically populate a "Vertical List" UI element on your page with multiple "Template UI elements." For each item in a specified list of data, a new "Template UI element" will be created and added to your chosen "Vertical List." This is incredibly useful for displaying dynamic content like product catalogs, user profiles, or news feeds where each item needs to be presented consistently using a predefined layout.

### Input

  • List: The collection of items (e.g., a list of products, users, or tasks) that you want to display. For each item in this list, a new "Template UI element" will be generated and added to your "Vertical List." This can be a simple list of values or a page of data retrieved from your database.
  • List UI element: The specific "Vertical List" component on your page where the new "Template UI elements" will be added. You select this directly from your page's design.
  • Template: (Optional) The reusable "Template" that will be used to display each item from your "List." This template should be designed to accept a single item from your list as an input, typically through a parameter named "ITEM" within the template itself.
  • Code: (Optional) A unique identifier for the "Template UI element" being inserted. If left blank, the platform will automatically generate a unique code.
  • Form group: (Optional) Assigns the inserted "Template UI element" to a specific form group. This is useful for organizing and managing form inputs within complex layouts.
  • Template parameters: (Optional) Additional parameters that you want to pass to the chosen "Template" for each instance. These are specific settings or data points that the template might need beyond the main list item.

### Output

No direct output is returned by this action. The outcome is a visual update to your "Vertical List" UI element on the page, which will now contain the newly added "Template UI elements."

### Execution Flow

### Real-Life Examples

#### Example 1: Displaying a Product Catalog

Imagine you have a list of products retrieved from your database, and you want to display each product as a separate card in a scrolling list on your e-commerce page.

  • Inputs:
    • List: [Product A, Product B, Product C] (e.g., from a "Get All Products" database query)
    • List UI element: Product\_Vertical\_List (a "Vertical List" component on your "Products" page)
    • Template: Product\_Card\_Template (a template designed to display product name, image, price, and a "Buy Now" button, with an "ITEM" parameter for product data)
    • Template parameters: currencySymbol: "$"
  • Result: The Product\_Vertical\_List on your page will be populated with three Product\_Card\_Template instances, each displaying the details of "Product A," "Product B," and "Product C" respectively, with prices shown in dollars.

#### Example 2: Managing a To-Do List

You have a list of tasks for a project, and you want to show them in a dynamic to-do list where each task has a checkbox and description.

  • Inputs:
    • List: [Task 1: "Review designs", Task 2: "Write documentation", Task 3: "Schedule meeting"] (e.g., from a "Get Pending Tasks" action)
    • List UI element: Project\_Tasks\_List (a "Vertical List" component on your "Project Dashboard" page)
    • Template: Task\_Item\_Template (a template with a checkbox, task description, and an "ITEM" parameter for task data)
    • Template parameters: showDueDate: true
  • Result: The Project\_Tasks\_List will display three Task\_Item\_Template instances, each representing a task with its description and a checkbox, and also showing the due date if available.

#### Example 3: Building a Dynamic Navigation Menu

You want to create a navigation menu where the menu items are pulled from a list of categories, and each category should be a clickable link.

  • Inputs:
    • List: ["Home", "About Us", "Services", "Contact"] (e.g., a static list or from a "Get Menu Categories" action)
    • List UI element: Main\_Navigation\_Menu (a "Vertical List" component used as your main navigation)
    • Template: Menu\_Link\_Template (a template that displays text as a clickable link, with an "ITEM" parameter for the menu item text)
    • Template parameters: iconSize: "medium"
  • Result: The Main\_Navigation\_Menu will dynamically display "Home," "About Us," "Services," and "Contact" as individual clickable links, each potentially accompanied by a medium-sized icon as defined in the template.