🗂️Pagination
What is pagination?
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.
Tip: 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
Note: 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, on a new request setup page, paste the GET request URL for your data.
In the Pagination section, the fields will vary depends on the pagination type of your API.
Field | Definition |
Type | The type of pagination your API uses. Types available: |
Offset parameter | Name of the query parameter used to set the numeric pagination offset. |
Page parameter | Name of the query parameter used to set the page. |
Cursor parameter | Name of the query parameter used to set the pagination cursor position. |
Page size parameter | Name of the query parameter used to set the number of records per page. |
Default page size | The 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. |
After filling out the pagination panel, click Send to send the request.
From Received Data, select the data records you want to display in your app.
Then go to your app project, bind the data to your app UI. Test the pagination in Bravo Vision -- the app page with pagination will load the page size you specified and load the next "page" when the user scrolls to the bottom.
📚 Pagination types
Offset
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.
Page
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.
Seek
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 examples of popular tools and how you would set up their pagination in Bravo.
Airtable
Wordpress and Github
Reddit listing
💾 Resources
Sample Airtable
Sample Figma file
Sample XD file
Last updated
