Ask AI
Skip to main content

Add template ui elements to vertical list

Function: Add template UI elements to vertical list​

This action allows you to dynamically populate a "Vertical List" UI element with multiple instances of a chosen "Template" UI element. For each item in a specified list of data, a new instance of your chosen "Template" will be created and added to the vertical list. This is incredibly useful for displaying dynamic content, such as a list of products, tasks, or user profiles, where each item needs to be presented using a consistent layout.

Input​

  • List

    • Description: Specify the list of objects (e.g., a list of products, users, or tasks) for which you want to add a template for each object.
    • Type: A list of values or a page of data.
    • Required: Yes

  • List UI element

    • Description: Specify the target "Vertical List" UI element on your page where the "Template" UI elements should be added.
    • Type: A UI element (specifically a "Vertical List").
    • Required: Yes

  • Template

    • Description: Specify the "Template" UI element that will be dynamically inserted into the chosen "Vertical List" for each item in your list. This template must be designed to receive data for a single item, typically through a parameter named "ITEM". This template should be marked as a reusable component.
    • Type: A page or a reusable combination of UI elements.
    • Required: Yes (The action will not proceed without a template.)

  • Code

    • Description: Optionally, provide a unique identifier (code) for the dynamically inserted template UI element. If left empty, a unique code will be automatically generated.
    • Type: A piece of text.
    • Required: No (A default is generated if not provided.)

  • Form group

    • Description: Optionally, specify a form group for the dynamically inserted template UI element. This can be useful for organizing form inputs within the template.
    • Type: A piece of text.
    • Required: No

  • Template parameters

    • Description: Provide any additional parameters specific to the chosen "Template" that you want to pass to each instance of the template. These are separate from the "ITEM" parameter which receives the list data.
    • Type: Parameters that can be passed to templates when executing.
    • Required: No

Output​

This action does not produce a direct output value. Instead, it modifies the specified "List UI element" by adding new "Template" UI elements to it.

Execution Flow​

Real-Life Examples​

Example 1: Displaying a list of products​

Imagine you have an online store and want to display a list of products on a page. You have a "Product Card" template that shows a product's image, name, and price.

  • Inputs:
    • List: [\{"name": "Laptop", "price": 1200, "image": "laptop.jpg"\}, \{"name": "Mouse", "price": 25, "image": "mouse.jpg"\}, \{"name": "Keyboard", "price": 75, "image": "keyboard.jpg"\}]
    • List UI element: Product_List_Container (a Vertical List UI element on your page)
    • Template: Product_Card_Template (a template designed to display a single product, expecting an "ITEM" parameter)
    • Code: (empty, a unique code will be generated for each product card)
    • Form group: (empty)
    • Template parameters: (empty)
  • Result: The Product_List_Container UI element will be updated to show three "Product Card" templates, each displaying the details of one product from the list.

Example 2: Showing a list of tasks for a project​

You are building a project management application and want to display all tasks associated with a specific project. You have a "Task Item" template that shows the task name, due date, and status.

  • Inputs:
    • List: [\{"taskName": "Design UI", "dueDate": "2023-10-26", "status": "In Progress"\}, \{"taskName": "Develop Backend", "dueDate": "2023-11-15", "status": "Not Started"\}, \{"taskName": "Write Documentation", "dueDate": "2023-11-30", "status": "Not Started"\}]
    • List UI element: Project_Tasks_List (a Vertical List UI element)
    • Template: Task_Item_Template (a template expecting an "ITEM" parameter for task details)
    • Code: (empty)
    • Form group: (empty)
    • Template parameters: (empty)
  • Result: The Project_Tasks_List UI element will be updated to display three "Task Item" templates, each representing a task from the project.

Example 3: Building a dynamic user profile section​

You want to show a list of user skills in a profile page. You have a "Skill Badge" template that displays a skill name and a rating.

  • Inputs:
    • List: [\{"skill": "JavaScript", "rating": 5\}, \{"skill": "CSS", "rating": 4\}, \{"skill": "No-code Development", "rating": 5\}]
    • List UI element: User_Skills_Section (a Vertical List UI element)
    • Template: Skill_Badge_Template (a template expecting an "ITEM" parameter for skill details)
    • Code: (empty)
    • Form group: (empty)
    • Template parameters: \{"displayMode": "compact"\} (assuming the Skill_Badge_Template has a displayMode parameter)
  • Result: The User_Skills_Section UI element will be updated to show three "Skill Badge" templates, each displaying a user skill in a "compact" display mode.