🗂️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.

Binding a single paginated list to a screen is supported. However, binding multiple paginated lists to one screen is currently not supported.

🏗 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, page, seek
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 0 or 1?
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.

 https://example.com/elements?**limit**=10&**offset**=30

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).

 https://example.com/elements?page=5

If this API supports setting the page size, the following request will cause the elements 50 to 60 to be returned.

 https://example.com/elements?page=6&pageSize=10

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.

 https://example.com/elements?cursor=abc123

🗂 Example pagination setup

Below are a few examples of popular tools and how you would set up their pagination in Bravo.

Airtable

The API documentation normally specifies the values you need for the fields.

Wordpress and Github

Reddit listing

💾 Resources

Sample Airtable

Explore Colorado - Airtable UniverseAirtable

Sample Figma file

https://www.figma.com/community/file/984136570875651180/Bravo-sample%3A-Travel-app-2.0www.figma.com

Sample XD file

816KB

Bravo sample - Travel app 2.xd.zip

archive

Open

Bravo Sample: Travel app 2.0 (Adobe XD)