Pagination is the app mechanism to "load more items." This is recommended when your app needs to load content from a large database. If your app loads all the data in one API call, it can cause an app crash, slow performance, or timeout issues (error 408). Pagination allows the app to load portions of the data, page by page, upon the user's request.
The pagination behaviour in Bravo is a continuous page (A.K.A. infinite scrolling), like most mobile apps. Navigation buttons at the bottom of each page are usually used for websites.
Check out this article to learn more about how pagination works.
🤔 When should I use pagination?
Pagination allows for smoother UX, reduces data loading time, and saves network traffic and battery. It's always recommended if your API supports it.
🏗 How to set up pagination
Make sure your API supports pagination. Pagination setup is found in the API documentation and is specific to each API.
This tutorial shows setting up pagination for Airtable. However, you can configure the pagination section for any API.
- In Bravo Studio, in a new request setup page, paste the GET request URL for your data.
- In the Pagination section, the fields will varies depends on the pagination type.
- Type = the type of pagination your API uses. Types available:
- Offset parameter = the name of the query parameter used to set the numeric pagination offset.
- Page parameter = the name of the query parameter used to set the page.
- Cursor parameter = the name of the query parameter used to set the pagination cursor position.
- Page size parameter = the name of the query parameter used to set the number of records per page.
- Default page size = number of records per page you want to display.
- Starts with = does the page/offset start with
- Last value path = the data path to the last value on the page. This will be passed to the "after" parameter for the next page.
- Results path = the data path to the results list.
Sendto send the request
- From Received Data, select the data records you want to display in your app.
- Bind the data to your app UI.
- In Bravo Vision, the app page with pagination will display the specified page size first and load the next "page" when the user scrolls to the bottom.
📚 Pagination types
Offset pagination is implemented with two parameters: a "limit" parameter and an "offset" parameter. These parameters are sent by the client in the HTTP request, usually in the URL query string.
The "limit" parameter specifies the number of elements that should be included in the response, and the "offset" specifies the number of elements that have to be skipped, starting from the beginning of the list.
In this pagination type, instead of sending an "offset" parameter, a "page" parameter is sent, so that the API knows which set of elements to return. Usually, the APIs have a default page size set, but this can normally be specified in the request as well, with a "pageSize" parameter.
In this example, let's assume the API has a default page size of 20 elements, and that the page numeration starts with 1. In the following request, the elements 81 to 100 will be returned (page 1 to 4 would cover the first 80 elements).
If this API supports setting the page size, the following request will cause the elements 50 to 60 to be returned.
In "Seek" pagination type, when performing an API request, the API will return the first set of elements, and a "cursor" parameter, with an API-defined value. This parameter will be a pointer that will need to be included in the following API request, in order to retrieve the next set of elements. Depending on the API implementation, it might be possible to specify the number of elements to return in each API call.
🗂 Example pagination setup
Below are a few example of popular tools and how you would set up their pagination in Bravo.
- Wordpress and Github
- Reddit listing
1️⃣ Sample Airtable
Explore Colorado - Airtable Universe
Whether you're visiting Colorado or a long-time local, here are some of pre-vetted Colorado destinations curated by a recent Denver transplant. ...
2️⃣ Sample Figma file
3️⃣ Sample XD file
That's it! 🥳