Collection

Overview

Use a Collection when you have multiple objects being returned in an API response. From the Inspector panel, map the Collection to a Data property.

You can also Filter, Sort, and/or add a Limit to the Collection.

• Filter - Enable filtering options for a specific property based on the following conditions: Equals, Does Not Equal, Is Greater Than, Is Less Than, Is Set, Is Not Set, Is True, Is False.

• Sort - Specify whether the data retrieved should be sorted in Ascending or Descending order based on the property selected.

• Limit - Define the maximum number of objects to be included in an API response (Show) and indicate the starting point within the array for the list (Start at).

Example

In this dataset, the <code>library</code> component contains an array of objects, each representing a book category. Insert a Collection and map it to the <code>data.library</code> property. Since each category is a text value, insert a Text layer. Notice how 4 Text layers appear, 1 for each category: Non-Fiction, Fiction, Graphic Novel, and Poetry.

Binding those Text layers to the category property is similar to binding a property to a layer in a component. However, instead of creating a new property or attaching it to an existing one, you’ll choose the <code>data.category</code> property from the {} data menu option.

To populate each category with their books, insert another Collection and map it to <code>data.books</code>. As you build the layout, bind each layer to their relevant data properties.

<div class="callout note">Note
If your dataset has a Video property, your Video Player must be in its own component. The screen with the Data Source should contain an instance of the Video Player component with the Video property mapped to the one in the dataset.</div>