Ask AI
Skip to main content

Add template ui element to vertical list

Function: Add template UI element to vertical list​

This action allows you to dynamically insert a pre-designed "Template" into an existing "Vertical List" component on your application screen. This is useful for building dynamic interfaces where content needs to be added or removed on the fly, such as adding new items to a shopping cart, tasks to a to-do list, or comments to a feed.

Input​

  • List UI element: This is the specific "Vertical List" component on your screen where you want to add new content. You must select an existing Vertical List UI element.
  • Template: This is the pre-designed layout or component you wish to insert. You must specify which Template to use.
  • Code: A unique identifier or name for the new instance of the Template you are adding. This helps distinguish it from other elements. You must provide a code.
  • Form group: A label that groups related form fields within the inserted Template. This is useful for managing data input within the new component. You must provide a form group.
  • Template parameters: These are custom values or settings that you want to pass into the Template when it's added. For example, if you're adding a "Product Card" template, you might pass the product's name and price here. These are provided as key-value pairs.

Output​

This action does not produce a direct output value. Its effect is a visual change on the screen: the specified Template UI element is added to the chosen Vertical List.

Execution Flow​

Real-Life Examples​

Example 1: Adding a New Product to a Shopping Cart​

Imagine you have an online store and want to allow users to add products to their cart dynamically.

  • Inputs:
    • List UI element: "Shopping Cart Items (Vertical List)"
    • Template: "Product Card Template" (a template designed to display product details)
    • Code: "product_card_SKU12345"
    • Form group: "cart_item_forms"
    • Template parameters:
      • productName: "Wireless Headphones Pro"
      • price: "199.99"
      • quantity: "1"
  • Result: A new "Product Card" UI element, pre-filled with "Wireless Headphones Pro" details, is instantly added to the "Shopping Cart Items" list on the user's screen.

Example 2: Displaying a New Comment on a Blog Post​

When a user submits a new comment on a blog post, you want it to appear immediately without refreshing the page.

  • Inputs:
    • List UI element: "Blog Comments Section (Vertical List)"
    • Template: "Comment Display Template" (a template for showing a single comment)
    • Code: "comment_ID_9876"
    • Form group: "blog_comment_data"
    • Template parameters:
      • authorName: "Alex P."
      • commentText: "Fantastic article! Very insightful points."
      • timestamp: "2023-10-26 14:35"
  • Result: A new "Comment Display" UI element, showing Alex P.'s comment and the timestamp, is added to the "Blog Comments Section" list, appearing at the top or bottom depending on your list's configuration.

Example 3: Adding a New Task to a Project To-Do List​

In a project management application, a team member creates a new task, and it needs to be visible in the project's task list right away.

  • Inputs:
    • List UI element: "Project Tasks (Vertical List)"
    • Template: "Task Item Template" (a template for displaying a single task with status and due date)
    • Code: "task_ID_54321"
    • Form group: "project_task_details"
    • Template parameters:
      • taskTitle: "Prepare Q4 Financial Report"
      • dueDate: "2023-12-15"
      • assignedTo: "Sarah K."
      • status: "Pending"
  • Result: A new "Task Item" UI element for "Prepare Q4 Financial Report" is added to the "Project Tasks" list, allowing team members to see the new task immediately.