Ask AI
Skip to main content

Add template ui elements to ui list

Function: Add template UI elements to UI list​

This action allows you to dynamically add multiple "Template UI elements" into an existing "Horizontal List" or "Vertical List" on your application page. It's perfect for situations where you have a collection of data (like a list of products, tasks, or users) and you want to display each item using a pre-designed template. For every item in your data list, this action will create a new instance of your chosen template and place it inside the specified list UI element.

Input,

  • List (Required, Type: A list of values) Specify the collection of data objects. For each object in this list, a new instance of your chosen template will be created and added to the UI list.
  • List UI element (Required, Type: A UI element) Choose the "Horizontal List" or "Vertical List" on your page where the new template UI elements should be added.
  • Template (Required, Type: A page or a reusable combination of UI elements) Select the "Template" you want to use for each item in your data list. This template should be designed to receive data, typically through a parameter named ITEM, to display information from each object in your list. It must be marked as a reusable component.
  • Code (Required, Type: A piece of text) Provide a unique identifier or "code" for the template UI element being inserted. This helps in managing and referencing the dynamically added elements.
  • Form group (Required, Type: A piece of text) Assign a "form group" to the template UI element. This is useful for organizing and managing form inputs within the dynamically added templates.
  • Template parameters (Optional, Type: Parameters that can be passed to templates) If your chosen "Template" has additional parameters beyond the ITEM parameter, you can provide values for them here. These parameters will be passed to every instance of the template created by this action.

Output,

This action does not produce a direct output value. Instead, it modifies the user interface by adding new template UI elements to the specified list on your page.

Execution Flow,

Real-Life Examples,

Example 1: Displaying a List of Products​

Imagine you have an e-commerce application and you want to show a list of products on a page. You have a Product Card template designed to display individual product details.

  • 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: Vertical List named "Product Display Area"
    • Template: Product Card
    • Code: "product_item_card"
    • Form group: "product_forms"
    • Template parameters: (None, as the Product Card template uses the ITEM parameter to receive product data)
  • Result: The "Product Display Area" on your page will be populated with three Product Card UI elements, each showcasing one of the products from your list.

Example 2: Showing User Notifications​

In a social media application, you want to display a user's recent notifications in a horizontal bar at the top of the screen. You have a Notification Item template for each notification.

  • Inputs:
    • List: [\{"message": "John liked your post", "time": "5m ago"\}, \{"message": "New follower: Jane", "time": "1h ago"\}, \{"message": "Event reminder: Meeting at 3 PM", "time": "2h ago"\}]
    • List UI element: Horizontal List named "Notification Bar"
    • Template: Notification Item
    • Code: "notification_display_item"
    • Form group: "notification_group"
    • Template parameters: (None)
  • Result: The "Notification Bar" will dynamically display three Notification Item UI elements side-by-side, each showing a different notification.

Example 3: Building a Dynamic Form with Repeating Sections​

You're creating a profile builder where users can add multiple "experience" entries. Each entry is a Experience Form Section template, and you want to add them to a Vertical List when the page loads, potentially pre-filling them with existing data.

  • Inputs:
    • List: [\{"title": "Software Engineer", "company": "Tech Corp", "years": 3\}, \{"title": "Junior Developer", "company": "Startup Inc", "years": 1\}]
    • List UI element: Vertical List named "Experience Sections"
    • Template: Experience Form Section
    • Code: "user_experience_entry"
    • Form group: "profile_forms"
    • Template parameters: \{"isEditable": true\} (assuming the Experience Form Section template has a parameter to control edit mode)
  • Result: The "Experience Sections" list will display two Experience Form Section UI elements. Each section will be pre-filled with the respective experience data and will be set to an editable state, allowing the user to modify their entries.