Ask AI
Skip to main content

Add template ui elements to horizontal list

Function: Add template UI elements to horizontal list​

This action allows you to dynamically populate a "Horizontal List" UI element with multiple instances of a "Template" UI element. For each item in a provided list of data, a new instance of your chosen template will be created and added to the horizontal list. This is perfect for displaying collections of items like product cards, user profiles, or news articles in a scrollable row.

Input​

  • List (List of values, Required): This is the collection of data items you want to display. For each item in this list, a new instance of your chosen template will be generated.
  • List UI element (UI element, Required): This is the specific "Horizontal List" UI element on your page where the new template instances will be added.
  • Template (Template): This is the reusable UI component (template) that will be created for each item in your list. Make sure this template has a parameter named ITEM to receive the data from each list item.
  • Code (A piece of text, Required): A unique identifier or code for the template UI element being inserted. This helps in managing and referencing the dynamically added elements.
  • Form group (A piece of text, Required): Specifies the form group that the dynamically inserted template UI element belongs to. This is useful for organizing and validating forms.
  • Template parameters (Parameters that can be passed to templates): Any additional parameters you want to pass to each instance of the template. These are specific to the template you've chosen.

Output​

This action does not produce any direct output values that can be used in subsequent steps. Its effect is to modify the UI of your application.

Execution Flow​

Real-Life Examples​

Example 1: Displaying Product Cards in a Store​

Imagine you have an online store and want to show a horizontal scrollable list of "Featured Products" on your homepage.

  • Inputs:
    • List: [\{"name": "Laptop Pro", "price": 1200, "image": "laptop.jpg"\}, \{"name": "Smartphone X", "price": 800, "image": "phone.jpg"\}, \{"name": "Smartwatch Z", "price": 250, "image": "watch.jpg"\}] (This list comes from your product database)
    • List UI element: FeaturedProductsHorizontalList (The horizontal list component on your homepage)
    • Template: ProductCardTemplate (A template designed to display a product's name, price, and image, with an ITEM parameter to receive product data)
    • Code: product_card_dynamic
    • Form group: product_display
    • Template parameters: (None in this case, as all data comes via ITEM)
  • Result: The FeaturedProductsHorizontalList on your homepage will now display three ProductCardTemplate instances, each showing the details of one featured product, allowing users to scroll horizontally through them.

Example 2: Showing User Achievements on a Profile Page​

You want to display a user's earned badges in a horizontal row on their profile page.

  • Inputs:
    • List: [\{"badgeName": "First Purchase", "icon": "star.png"\}, \{"badgeName": "Loyal Customer", "icon": "trophy.png"\}, \{"badgeName": "Top Reviewer", "icon": "medal.png"\}] (This list comes from the user's achievement data)
    • List UI element: UserBadgesHorizontalList (The horizontal list component on the user's profile)
    • Template: BadgeDisplayTemplate (A template showing a badge icon and name, with an ITEM parameter for badge data)
    • Code: user_badge_item
    • Form group: user_profile_badges
    • Template parameters: (None)
  • Result: The UserBadgesHorizontalList on the user's profile page will be populated with three BadgeDisplayTemplate instances, each representing an achievement badge, creating a visually appealing horizontal display.

Example 3: Building a Dynamic Navigation Menu​

You have a list of categories for a blog and want to create a dynamic horizontal navigation menu.

  • Inputs:
    • List: [\{"categoryName": "Technology", "link": "/tech"\}, \{"categoryName": "Lifestyle", "link": "/lifestyle"\}, \{"categoryName": "Travel", "link": "/travel"\}] (This list comes from your blog categories)
    • List UI element: MainMenuHorizontalNav (The horizontal navigation bar component)
    • Template: MenuItemTemplate (A template for a clickable menu item, with an ITEM parameter for category data and a linkTarget template parameter)
    • Code: nav_item_dynamic
    • Form group: main_navigation
    • Template parameters: \{"linkTarget": "ITEM.link"\} (This passes the link property from each list item to a linkTarget parameter within the MenuItemTemplate)
  • Result: The MainMenuHorizontalNav will display three MenuItemTemplate instances, each acting as a navigation link for a blog category. Clicking on "Technology" would take the user to /tech, "Lifestyle" to /lifestyle, and so on.