Intro to collections

In WeWeb, a collection is a set of data fetched from a 3rd-party API or backend. You can then use this data to display it in your app.

Pre-requisites

WARNING

Before you can create a new collection of data in WeWeb, you first need to have installed at least one data source plugin, e.g. Xano, Supabase, REST API, etc.

Once you have added a data source plugin, you will be able to create a collection to fetch data from that source.

Create a collection

To create a collection, go to the Data tab in the left sidebar, then click on + New to start setting up the collection.

The setup process is different for every data source plugin, but it revolves around the following steps:

• Give your collection a name
• Select the data source plugin you want to use
• Select the connection mode
• Configure how you want to fetch the data
• Fetch the data
• Apply any frontend sort, filter or pagination

Let's look at an example:

To deep-dive into how to setup a collection for each data source plugin, check out the following guides:

• Airtable
• REST API
• Xano
• Supabase
• Algolia

How to use a collection

Collections are typically used to display data in a list or a grid. To do so, you can use the Collection list element, or any div.

To learn more about how to display a collection, check out the following guide.

But in the end, collection are simple arrays of data that can be used in any workflow or formula.

They look like this inside the data explorer:

Let's deep dive into this:

• first, you'll find the collection as a whole. It contains your data, and some metadata about the collection (like the number of items, the total number of items, etc.) that WeWeb created.
• secondly, you'll find the data property. This is the array of data without any metadata.

TIP

Some elements require to be bound to the collection, others to the collection's data only, depending on if they use the metadata or not. If your binding doesn't seem to work, please try it again by binding only the data property!

• data[index] shows the data for the item at the index index in the collection. It's useful to bind to a specific item in the collection. To change the item, you can use the index dropdown next to the data property.
• Length is the number of items there are in the collection.

TIP

To know if a collection is empty, use the Length property. If it's equal to 0, the collection is empty!

• isFetching is a boolean that tells you if the collection is currently fetching data. It's useful to display a loading state while the data is being fetched.
• isFetched is a boolean that tells you if the collection has already been fetched.

TIP

To display a loading state while your collection is being fetched, you can use a loading GIF or SVG, and bind its display property to the collection's isFetching property.

• limit is the max index for the items that are currently displayed in the collection, given any active frontend filter, sort or pagination.
• total is the total number of items in the collection, given any active frontend filter, sort or pagination.
• offset is the index of the first item in the collection, given any active frontend filter, sort or pagination.

Optimize collection load

By default, a collection is:

• fetched automatically when a user navigates to a page that uses that collection, and
• is preserved (not fetched again), when a user navigates to other pages in the app.

To optimize the performance and UX of your web app, you can change that default behavior in the Fetch data step of the collection setup:

Fetch this collection automatically tells WeWeb if it should fetch the collection on every page load, or if you want to fetch it manually. If you want to fetch it manually, you can trigger the Fetch collection workflow action.

Preserve on navigation tells WeWeb if it should keep the collection in memory when the user navigates to a new page. If you want to fetch the collection again, you can trigger the Fetch collection workflow action.

There may be use cases where you want to change these default settings.

Why disable automatic fetch?

If you have a collection that you don’t need immediately on page load, you should consider disabling the automatic fetch to improve performances. For example, you might want to fetch a collection when the user opens a modal on a page and not on page load.

If you disable the automatic fetch on a collection, you'll need to remember to trigger a workflow that fetches the collection every where you need it in the app.

Why disable preserve on navigation?

A common use case where you don't want to preserve on navigation: a collection that fetches a single item selected on a previous page (if you preserve on navigation, there might be a blink where the info from the previously selected item appears while the API call takes place to fetch the info of the new selected item)

This is especially problematic if the collection data concerns a specific user with potentially private information. You want to make sure that data is not preserved on navigation in case 2 users connect to your app using the same browser.

Collection modes

TIP

To build dynamic web applications, we highly recommend creating Dynamic collections.

However, at times, when you need to pre-render content or bypass API rate limits from a data source, you may want to consider working with a Static or Cached collection instead.

• Static: the collection will be fetched once, on our servers, while the app is built. Everytime this collection is used in your app, the data will be pre-rendered (better for SEO, can slow down the publish process).
• Dynamic: the collection will be fetched on the client side, when the app is loaded. This is the best option if you want to fetch data that changes often (like a list of products).
• Cached: the collection will be fetched on the client side, but from our servers. This is the best option if you want to fetch data that changes often, but you want to avoid hitting any API rate limit (but you'll need to refresh the data yourself when it changes).

Frontend vs Backend filters

When setting up a collection, the Sort, Filter and Pagination step can be before or after the fetching one.

If you set it before, it's called a backend filter. It means that the data is fetched from the 3rd-party API, already filtered, sorted and paginated by the server.

If you set it after, it's called a frontend filter. It means that the data is fetched from the 3rd-party API, then filtered, sorted and paginated on the client side:

Why do some plugins have backend filters (like Supabase) when other have frontend filters (like Airtable)?

Well, it depends on the tools' API capabilities, and how they handle pagination, sorting and filtering.

Some APIs are very limited, and don't allow to filter, sort or paginate the data on the server side. In that case, WeWeb will have to fetch all the data, then filter, sort and paginate it on the client side.

When to use frontend vs backend filters?

• If you have a small collection, without any private data: use a frontend filter. It's the easiest to setup, and it's the fastest.
• If you have a big collection, or need to fetch private data: use a backend filter. It's a bit more complicated to setup, but it's the more secure.

WARNING

Keep in mind that any data fetched from a 3rd-party API is visible. It's not because you have a frontend filter and that the data is not visible to the user in your app, that it's not visible at all. Indeed, anyone can inspect the HTML of your app, and see the data that is fetched from the 3rd-party API.

If you need security: use a backend filter and make sure to use a backend with secured endpoints or RLS on the database.

Learn more about adding security to the web-apps you build with no-code tools.

Filter options

• Pagination is the number of items that are displayed per page. It's useful if you have lot of data to display, and you want to split it into multiple pages (using the Pagination element).

• Filter is a formula that filters the data. It's useful if you want to display only a subset of the data.

Let's look at an example:

Here, we're filtering the data to only display companies where their name contains the letter t or, (where their domain contains www and their number_of_employees is greater than 100).

As you can see, you can create groups of filters using condition groups.

For each of these groups or conditions, you can set them under certain conditions (using the Apply if...). For example, when a variable is true or false in your app.

You can also use the AND and OR operators to combine filters.

The toggles are Ignore if empty options that tell WeWeb not to apply the filter if the value is empty.

Sort is a formula that sorts the data. It's useful if you want to display the data in a specific order (like ascending or descending order for alphabetical or numerical values, etc).