Collections
The Collection component enables you to dynamically create components from an array of data. When connected to an array, the Collection component constructs an instance of the container and its children for each array item.
Here are some examples of how you can use Collections:
- Iterate through API data
- Build dynamic lists
- Construct tables
The Collection component includes the following preset actions:
- setItems: Calls the onItemConstructed event and constructs an instance of the container and its children for each connected array item.
- items: Items in the connected array.
- onItemConstructed: Event that occurs when a component instance is constructed.
- item: The component instance being constructed.
- index: Index of the array being built.
- getItems: Returns an array of data being used to render the collection.
This walkthrough outlines how to use the Collection component to iterate through an array and replicate text boxes with dynamic text for each item:
- 1.In the Design view, drag-and-drop a Collection component into the application.
- 2.Drag-and-drop a Text component into the Collection.
- 3.Click Logic to enter the Logic view, and drag-and-drop an Array component into the Logic panel.
- 4.Select the Array component and open the quick selection State menu to input an array of information.
- 5.From the Design References section, drag-and-drop the Home and Collection references into the Logic panel.
- 6.Connect the Array's getValue action to the Collection's items property. This passes your array into the Collection component.
- 7.Double-click into the Collection component and drag-and-drop a Text reference and a String Template component into the collection.
- 8.Select the String Template component and open the quick selection State tab.
- 9.In the template field, add a template sentence for your string. When you call the Collection component, the
${name}variable updates with items from the connected array.
- 10.Build the following node connections:
- (Collection) item > (String Template) name: Sets the value of the name node to the value of each item in the connected array for each iteration.
- (String Template) output > (Text) label: Passes the template into the Text component.
- (Text) setLabel > (Collection) onItemConstructed: Sets the Text's label to the connected String Template value each time a component instance is constructed.
- 11.Return to the Default flow layer using the breadcrumbs or back arrow, and connect the Home reference's onPageLoad node to the Collection's setItem's node. When the page loads, this calls the Collection component.
- 12.Preview your application to ensure the collection iterates through your array. In this example, the Collection component constructs and displays dynamic text for each item in the array.
Last modified 2mo ago