Collection is a component that manages an ordered collection of data items and presents them using customizable layouts. This component is associated to a data source via the internal data provider or an external data source (Airtable,...).
If your database does not yet exist, the Data Provider allows you to create an internal application database that will be linked to the Collection component. Otherwise you can use an external tool (Airtable...).
Access the data provider
Project in the breadcrumb trail.
Double-click on the
Data provider in the
Object list. You can change the name of this data provider
Create a collection and define properties
Let's take the example of a real estate catalogue.
Add a new property of type
Collection and choose its name, replacing new_key. This name will be reused, we will mention it like this : COLLECTION_NAME
Define the structure of your collection using properties.
Click on the
Settings icon to edit the properties of your collection.
By default, your new collection includes 2 properties: id and name.
Add a property to add the Date, Description, Price and Image fields:
- A Date property for the date
- A Text property for the description
- A property Number for the price
- An Image property for the visual
Note the name of these properties (replacing new_key). This will be your PROPERTY_NAME
The items correspond to your real estate products.
Click on 0 ITEM(S) to add new item.
To add an item, click on
Add new item. Rename each item (for example: "2 bedroom apartment Paris"). Click on the button on the right to edit the content of the form.
NB: if you have a large volume of content, our team can assist you with integration via more automated solutions.
Display a collection
Whether your content comes from the Data Provider, a component or an external source, it is displayed using the Collection component and according to certain display settings.
We will represent this collection in the form of a scrolling list of products, each product being presented by a synthetic thumbnail.
Insert the Collection component
Components and insert the
In the component Properties window, fill in the source:
If your source is the internal data provider, ID_SOURCE is the identifier of your data provider.
If your source is external: ID_SOURCE is the identifier of the HTTP component connected to your external source and COLLECTION_NAME comes from this external source.
If your source is the data of a component, ID_SOURCE is the identifier of your component.
Add graphic design elements
Inside the Collection component, insert a
Group (a container) that contains a sample thumbnail. This container will be duplicated from your contents.
Insert multiple text blocks for title, address and price. Customize the visual appearance from the
Insert an empty image object.
Connect to data source
Now you need to connect visual elements to the data source.
Go to the group. For each element and from the
Properties window, click on the
Dynamic Data icon in the upper right corner and the
+ Add >
For text, use the following formula:
ID_SOURCE is the source of your content
COLLECTION_NAME is the name of your property Collection
PROPERTY_NAME is the name of the sub-property
And for images:
Now you need to update the data automatically when the screen is displayed.
Select the screen and open the
Current Screen >
Interact with a Component > select the data provider in the Project level Objects window >