🖼 Display Collection List
421
Before you can display collection data on a page, make sure you have:
- Added a data source from the data menu (e.g. Airtable, REST API, SQL database), and
- Set up a data collection that fetches data from a data source.
Once those prerequisites are met, you will be able to display data from a collection on a page.
Bind a Collection List to a Container
In WeWeb, you can bind a collection to any container: a flexbox, a collection list, a table, a columns element, any container.
You do this by selecting the container in the navigator, and binding that container to a list of items:
Keep in mind that, bar one specific exception we will discuss later, you should always bind to a list of items.
In WeWeb, this is represented by <collection_name[‘data’]> in the no-code formula input as shown above.
Bind the Data from a Collection Item to an Element
When you bind a list of items to a container, the first child of that element will be a collection item, also called a repeated item.
What does that mean? 🤔
It means that, if you want to bind several pieces of information from one collection item – like a job title, company name, salary, etc. – the first child of your collection list needs to be a container that includes several elements.
In the example above, you can see that, right below the “Jobs” columns element where we bound our list of jobs, there is a container named “Job Wrapper”.
Inside that “Job Wrapper” element, there are other elements that we can bind to specific data fields in our list of jobs:
- Company logo
- Company name
- Job title
- Job location
- Contract type
- Salary
- List of perks
All of the elements with a purple plug in the navigator are bound to a specific field of the collection item:
