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
Components and insert 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.
Source field, enter the identifier of the data source in the following form:
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.
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.
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 each object to its data source.
Select each object and open
Click on the
Dynamic Data icon in the upper right corner and the
+ Add >
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
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
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.