This is a step by step tutorial about adding sorting functionality to your lists using the Airtable API on Bravo Studio.

This tutorial contains screenshots from an old version of data binding in Bravo Studio. The functionalities remain the same as the current interface.

Before you start

Here are some of the things you need to have ready before you begin this.

  1. Figma or Adobe XD
  2. An Airtable account
  3. A Bravo Studio account
  4. The Bravo Vision app, either from Google Play Store or the iOS app store.

https://i.imgur.com/gDsORUI.mp4

1. Setting up your designs with Bravo Tags

We will have a list of pantry items, where we will show the name, the quantity and the last time it was stocked up, and that is how we will be sorting them.

In *Item [container], the [container] is a Bravo tag that tells Bravo Studio that this is the layer containing the elements that will be used with your Airtable data.

Why the *asterisk? Well, these are the layers that will be populated with data. The only purpose of the asterisk is to allow those layers to stand out when we are binding our data to the designs in Bravo Studio. Alternatively, you can even do DATA-Item Name instead of *Item Name. All we are doing is indicating.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4f3857ae-cd4b-40b8-94d0-7d3092b21217/Untitled.png

Layer Structure and Naming

As you can see, we have 3 buttons for our sorting; Item name, quantity, and last stocked. We are sorting our data in ascending and descending order. So that's a total of 6 screens.

Connect each button to the respective screen and test out the prototype to make sure the flow is how you want it to be.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6a77cc0c-f6ca-458d-8561-dce0e0ab396b/Untitled.png

Prototype with all the interactions

2. Setting up your data

We will have this data with varying names, quantities, dates. That way when we sort it, we can see it in ascending and descending clearly.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f9bc2e3a-72cd-4f0d-b9fb-338dcb3dcac0/Untitled.png