Add template ui element to vertical list

Function: Add template ui element to vertical list

Inject a "Template ui element" into a designated "Vertical list."

This function allows you to dynamically add a pre-designed "Template" (which is a reusable UI element) into an existing "Vertical List" on your application page. This is useful for building dynamic forms, lists, or sections where content needs to be added or removed based on user actions or data.

Input

• List ui element (PART, required) Specify the target "Vertical List" where the "Template ui element" should be added. This is the container on your page that will hold the new template.
• Template (TEMPLATE, required) Specify the "Template" you want to insert. This is a pre-built, reusable UI component that will be added to your list.
• Code (STRING, required) Provide a unique identifier (code) for the template UI element being added. This helps in referencing or manipulating the added element later if needed.
• Form group (STRING, required) Specify the form group that the new template UI element will belong to. This is useful for organizing form elements and handling data submission.
• Template parameters (TEMPLATE_PARAMS, optional) If the chosen "Template" requires specific data or settings to function correctly, you can provide those parameters here. These are key-value pairs that configure the template's behavior or initial display.

Output

This function does not return any explicit output. Its primary effect is to modify the user interface by adding the specified template to the vertical list.

Execution Flow

Real-Life Examples

Example 1: Adding a new item to an order form

Imagine you have an order form where customers can add multiple products. You have a "Vertical List" named "Order Items" and a "Template" called "Product Item" that represents a single product entry (with fields for product name, quantity, price).

• Inputs:
  • List ui element: "Order Items" (the vertical list on your form)
  • Template: "Product Item"
  • Code: "product_item_003"
  • Form group: "order_details"
  • Template parameters:

    \{
        "productName": "Laptop X1",
        "quantity": 1,
        "price": 1200.00
    \}
• Result: A new "Product Item" template is added to the "Order Items" vertical list, pre-filled with "Laptop X1", quantity 1, and price $1200.00, allowing the user to add another product to their order.

Example 2: Dynamically adding a contact field

You are building a contact management application, and users need to add multiple phone numbers or email addresses for a single contact. You have a "Vertical List" named "Contact Details" and a "Template" called "Contact Field" that contains input fields for a type (e.g., "Home", "Work") and a value (e.g., "123-456-7890").

• Inputs:
  • List ui element: "Contact Details" (the vertical list for contact info)
  • Template: "Contact Field"
  • Code: "phone_field_002"
  • Form group: "contact_info"
  • Template parameters:

    \{
        "fieldType": "Mobile",
        "fieldValue": ""
    \}
• Result: A new "Contact Field" template is added to the "Contact Details" vertical list, with the "Type" field pre-set to "Mobile" and an empty "Value" field, ready for the user to enter a new mobile number.

Example 3: Expanding a FAQ section with new questions

You have a dynamic FAQ page where new questions can be added by administrators. There's a "Vertical List" called "FAQ List" and a "Template" named "FAQ Item" which includes fields for a question and its answer.

• Inputs:
  • List ui element: "FAQ List" (the vertical list displaying FAQs)
  • Template: "FAQ Item"
  • Code: "faq_item_005"
  • Form group: "faq_management"
  • Template parameters:

    \{
        "question": "How do I reset my password?",
        "answer": "You can reset your password by clicking the 'Forgot Password' link on the login page."
    \}
• Result: A new "FAQ Item" template is added to the "FAQ List" vertical list, displaying the question "How do I reset my password?" and its corresponding answer, making it immediately visible on the FAQ page.