Ask AI
Skip to main content

Add template ui element to horizontal list

Function: Add Template UI Element to Horizontal List​

This action allows you to dynamically insert a pre-designed "Template UI Element" into an existing "Horizontal List" on your application screen. A Horizontal List is a container that arranges its contents side-by-side, often used for carousels, galleries, or rows of cards. By adding a template, you can reuse complex UI components and populate them with specific data, making your application more modular and easier to manage.

Input​

  • List UI Element (PART)

    • Description: This is the specific "Horizontal List" component on your page where you want to add the new template. You must select an existing Horizontal List.
    • Type: UI Element (specifically a Horizontal List)
    • Required: Yes

  • Template (TEMPLATE)

    • Description: Choose the "Template" that you wish to insert into the Horizontal List. This template defines the structure and initial content of the UI element you're adding.
    • Type: Template
    • Required: Yes

  • Code (STRING)

    • Description: Provide a unique identifier or "code" for this specific instance of the template being added. This helps you refer to or manage this particular template element later if needed. If left empty, a unique code will be generated automatically.
    • Type: Text

  • Form Group (STRING)

    • Description: If your template contains form elements, you can assign it to a "Form Group." This is useful for organizing and submitting related form data together.
    • Type: Text

  • Template Parameters (TEMPLATE_PARAMS)

    • Description: If the chosen "Template" expects specific data to display or function correctly, you can provide those values here. These are custom inputs that the template uses.
    • Type: Template Parameters (Key-Value pairs)

Output​

This action does not produce a direct output value. Instead, it modifies your application's user interface by adding the specified Template UI Element to the chosen Horizontal List.

Execution Flow​

Real-Life Examples​

Example 1: Displaying Product Cards in a Carousel

  • Scenario: You have an e-commerce application and want to dynamically add new product cards to a "Featured Products" carousel on your homepage. Each product card is a reusable template.
  • Inputs:
    • List UI Element: Featured Products Carousel (the Horizontal List component)
    • Template: Product Card Template (a template designed to display product details)
    • Code: product_card_SKU12345
    • Form Group: (Leave empty, not applicable for display)
    • Template Parameters:
  • Result: A new "Wireless Headphones" product card, populated with the provided details, is added to the "Featured Products Carousel" on the homepage.

Example 2: Adding a User Widget to a Dashboard Section

  • Scenario: Your application's dashboard has a horizontal section for "Active Users." You want to add a new user's profile widget to this section when they log in.
  • Inputs:
    • List UI Element: Active Users Section (the Horizontal List component)
    • Template: User Profile Widget Template (a template showing user name, status, and avatar)
    • Code: user_widget_john_doe
    • Form Group: (Leave empty)
    • Template Parameters:
  • Result: A new "John Doe" user profile widget appears in the "Active Users Section" of the dashboard, showing his avatar and "Online" status.

Example 3: Building a Dynamic Address Form

  • Scenario: You are creating an order form where users can add multiple shipping addresses. Each address input block is a template.
  • Inputs:
    • List UI Element: Shipping Addresses Container (the Horizontal List component that holds address blocks)
    • Template: Address Input Block Template (a template with fields for street, city, zip, etc.)
    • Code: address_block_001
    • Form Group: shipping_address_group (to group all address fields for submission)
    • Template Parameters: (Leave empty, as the user will input values directly into the new form fields)
  • Result: A new, empty "Address Input Block" is added to the "Shipping Addresses Container," allowing the user to enter details for an additional shipping address. The fields within this block are part of the shipping_address_group.