Collection

The collection is a component that manages an ordered collection of data and presents it in the form of a list of items in a horizontal or vertical orientation. This component is associated with an internal data source (via the data provider) or external data source (via the HTTP component).
The first step is to create a database and to structure it correctly. The Collection component allows you to display it in your application in a 100% customized way. 

Insert a collection

Click on Components and insert the Collection component.
In the  Properties window, you can: 
  • Choose the orientation of your collection: Horizontal or Vertical to display the items in a single row or column.
  • By clicking on Wrap Children, choose whether the items in the collection appear in a single row/column or whether they can be spread over several rows
  • Set margins between items. 
In the Source field, enter the identifier of the data source in the following form:
[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

Use the Sort by (ascending order/descending order) and Filter by (a condition) options to customize the display of the collection. 

Create an item

Customize UI design

Inside the collection, your data is displayed as a list of items. It's up to you to choose the UI of these elements: list, "card" etc...
Double-click on the Collection component to edit its content. Inside the component, the layout is not free: we recommend that you first insert a Group (a container) in which you add the visual objects (for example, a white background, an image, a text block for the title, another for the description). This group will be duplicated from your content.

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 each object to its data source. 
Select each object and open 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

For images

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

Refresh data

Now that the collection is set up, you have to make sure that it is automatically displayed in the application. 
Select the screen and open the Actions window.
Select Current Screen > Interact with a Component:
  • If your data source is internal via the data provider, select it at the Project level and click Refresh Data.
  • If your data source is external, select the HTTP component and click on Start Request.

Still need help? Contact Us Contact Us