Collection

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

Click on 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.

https://d33v4339jhl8k0.cloudfront.net/docs/assets/5eeb6c752c7d3a10cba92698/images/5f75eed04cedfd0017dcd77f/img-26566-1601563787-791634978.png

By default, your new collection includes 2 properties: id and name.
Click 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
Click Save.

Edit content

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

Click on Components and insert the Collection component.

In the component Properties window, fill in the source:

[data:ID_SOURCE(/COLLECTION_NAME)]
  • 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.

https://d33v4339jhl8k0.cloudfront.net/docs/assets/5eeb6c752c7d3a10cba92698/images/5f75eed14cedfd0017dcd781/img-26566-1601563791-1031105507.png

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.

https://d33v4339jhl8k0.cloudfront.net/docs/assets/5eeb6c752c7d3a10cba92698/images/5f75eed0cff47e001a58a27c/img-26566-1601563789-340514570.png

Insert multiple text blocks for title, address and price. Customize the visual appearance from the Properties window.
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 > Text button.

For text, use the following formula:

[data:ID_SOURCE(/COLLECTION_NAME/@getById:[data:ID_SOURCE(rowId)]/PROPERTY_NAME)]

in which: 
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:

[data:ID_SOURCE(/COLLECTION_NAME/@getById:[data:ID_SOURCE(rowId)]/PROPERTY_NAME/value)]

Refresh data

Now you need to update the data automatically when the screen is displayed.
Select the screen and open the Actions window.
Select Current Screen > Interact with a Component > select the data provider in the Project level Objects window > Refresh Data.

Still need help? Contact Us Contact Us