Bind multiple API requests to one screen

If you create several API requests, you can bind them to a single screen in the app, so it can interact with data from different requests. This allows to create a screen with several lists, for instance.

This tutorial is a continuation after you have retrieved data from a database. If you haven't done that yet, check out:

๐Ÿ‘‰ Get data from any database with REST API

We are using this design file and this Airtable base for the tutorial. In this example, we're displaying three lists in a single screen. Each list has the data from each of the tables.

Binding data from multiple requests

First, you'll need to have several API requests created in the Data Collections section. In this case, we have three GET requests that return a list of items.

We'll use the data from these requests in the Data Binding section. In our sample design file, we have three list containers. We'll bind each container to the list data from each API request.

After binding the list containers, we'll bind the individual UI elements inside each list. Once an API collection and a request are selected for a UI element, the same will be automatically selected for all elements in the same container. However, they can be changed if needed.

In addition to lists, you can also bind individual data items coming from different API requests.

For instance: In this design example, you can bind individual text elements to the title on the screen, so these texts don't need to be changed statically in the design file, but rather fetched from the backend.

Last updated