Render List

The Render List configuration allows you to display data lists in a structured way on your website. Whether you are fetching data from an API or using information stored in your application, Render List helps you display lists that automatically adapt to the number of available items.

How does it work?

1. Define the "template" item: Design in Webflow how you want each item in the list to look. You can include text, images, buttons, and any other elements you need.

2. Choose the "template" element: Select the element (in the elements panel) that will act as the "template" for the list. This element will be duplicated by Wized as many times as necessary to display all items in your list.

3. Provide the data: In the Function Editor of the Render List configuration, you need to return an array (a list) of items. These items can come from an API request (for example, r.getProducts.data.products)

   // Example of how to return a list of products from an API
   return r.getProducts.data.products; // Returns the list of products

4. Define an index variable: Specify a variable (usually called i) to keep track of the position of each item in the list. This variable will be crucial for accessing the data of each individual item when customizing its content. Remember that each list must have a unique index to avoid potential errors.

Important

If you want to render multiple lists on the same page at the same time, make sure to use a different index variable for each Render List action.

---

Design and organization

Keep in mind that Wized handles the duplication and rendering of your list items, but the visual layout and organization of the list depend on how you have structured the container element in Webflow. Ensure that the design of your container element is flexible and adapts well to different amounts of content.

Configure Each Item in the List

Once the Render List action has been configured, each item in the list will be a copy of the "template item" designed in Webflow. To display dynamic information in each item and create a personalized experience, it is necessary to individually configure the child elements within the template.

Imagine you have a list of products. You can use Render List to display a dynamic list of cards for each product, and then use Set Text on another element within the card to show the name of each product in its respective card.

Steps to Personalize Elements Within a List

1. Ensure that Child Elements Include the Wized Attribute: Remember that each element you wish to "personalize" must include the Wized attribute with a unique value for Wized to recognize it as an Element.
2. Check the Hierarchy: The elements you wish to personalize must be direct children of the "template item" in the Webflow design structure.
3. Select the Child Element in the Wized Elements Panel: Select the child element you want to configure.
4. Choose the Desired Configuration: Apply the appropriate settings to what you want to do, such as Set Text, Set Visibility, Set Style, etc. For example, if you want an element to change its visibility based on certain conditions, you can configure it using Set Visibility.
5. Use the Index Variable in the Function Editor: Within the Function Editor, use the index variable (for example, v.i) to access the corresponding data for each item in the list.

The Importance of the Index Variable

In the Render List action, you must choose a variable that will act as an index or iterator. This variable is essential for dynamically customizing each item in the list. Wized, recognizes this variable and uses it to iterate through the data list you provided, assigning a numeric value to each item (starting from 0).

For example, if you have a list of products and choose the variable i as the index, Wized will assign the following values to each product:

• First product: i = 0
• Second product: i = 1
• Third product: i = 2
• And so on...

Then, when configuring the child elements within the list, you can use this index variable to access the data for each product. For example, if you want to display the name of each product in a text element, you could use the following expression in the Function Editor:

// Returns the name of the product corresponding to each item
return r.getProducts.data[v.i].name;

Nested Rendering: Lists Within Lists

Wized also allows rendering nested lists, which means lists within other lists. To do this, simply add a Render List configuration to a child element within the "template" element. Be sure to follow the steps mentioned earlier (Steps to customize elements within a list).

Note

• Use a different index variable for each level of nesting. For example, use v.i for the main list and v.j for the nested list.
• Access nested properties using the appropriate syntax. For example, r.getProducts.data[v.i].categories[v.j].name.

When to Use Nested Arrays?

Nested arrays are useful for representing hierarchical relationships or grouping data in more complex ways. Some common examples include:

• Categories and Subcategories: You can use a nested array to represent a list of categories, where each category contains an array of subcategories or products.
• Data Tables: You can use a nested array to represent a data table, where each row is an array that contains the values of different columns.
• Option Trees: You can use a nested array to represent an option tree, where each node in the tree contains an array of sub-nodes.

Example: Display a list of categories and their products

1. Structure in Webflow: Create a main "template item" for the list of categories and, inside it, a child "template item" for the list of products in each category.

2. Configuration in Wized:

   • Applies Render List to the parent "template item", using the index variable v.i and returning the categories array .
   • Applies Render List to the child "template item", using the index variable v.j and returning categories[v.i].products .
   • Use Set Text or other settings on the nested list's child items to display information for each product (e.g. categories[v.i].products[v.j].name ).

   Visual Example:

[Main List]
   ├── [Item 1]
   │      ├── [Sub Item 1]
   │      └── [Sub Item 2]
   ├── [Item 2]
   │      └── [Sub Item 1]

---

Examples

• Show Product Name:

// In the "Set Text" configuration for a text item within the list:
return r.getProducts.data[vi].name; // Returns the name of the product at the index vi

• Display an "Add to Cart" Button Only When Stock is Available:

// In the "Set Visibility" configuration for a button within the list:
return r.getProducts.data[vi].stock > 0; // Returns true if stock is greater than 0, otherwise false

Note: If the index variable is not used in the function editor, the same configuration will apply to all items in the list, which will not allow displaying dynamic.