In this tutorial, we will be looking at the web view and video tags in Bravo.
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.
- An account for the design tool
- Airtable account or Google Sheets/Sheety account
- A Bravo Studio account
- Bravo Vision app, either from Google Play Store or the iOS app store.
If your data is on Airtable, we will be making use of the Airtable API.
If your data is on Google Sheets, we will need a Sheety account, which will add the API functionality.
What are Bravo Tags?
A Bravo Tag is a text string that you place in the layer names in your design file. After you import the design file into Bravo Studio, the layer with the Tag will turn into a mobile component or action in Bravo Vision. Learn more about Bravo Tags here.
They allow you to embed webpages inside the rectangle element in the design tool.
An audio-less video that autoplays when a user is on the app screen. The video will replace the content of the rectangle. Supports URLs ending in .mp4. There are some exceptions. Copying the video address from Imgur, or Steam (Like we did in this tutorial) seems to have worked well.
Copying and pasting links from YouTube will not work with Video tags.
1. Setting up your designs with Bravo Tags
In *VideoCont [container] and *WebViewCont [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/Google Sheets 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-Video [component] instead of *Video [component]. All we are doing is indicating.
Then, create rectangles inside your [container]. Name them and the component tag shown below. As you can see, there are three parts. The last part, which is the URL, is just a default placeholder and you can substitute it in the design tool with anything. In case your data doesn't load, the URL will load instead, so it's also a great way to make sure everything is working before you do any data binding.
Another important aspect is prototyping and connecting our screens using interactions. It will transfer over to Bravo Studio when you import your design file.
Important note about using the Video Tag
The Video tag (also the WebView Tag) are applied on the rectangle element. So the container that it is inside in must include any padding (as you can see below).
2. Setting up your data
Google Sheets and Sheety
We will only be using our tables to hold the content for the WebView and Video tags. Notice they are on two different tables.
Now let's move to Sheety. This is where the simple Google Sheet is turned into something that can communicate with Bravo Studio to populate your designs.
Name your project and copy-paste the Sheets URL. Keep in mind that on the free plan, Sheety allows you 1 project.
Once it is imported, it should look something like this. Make sure the GET request is checked. This is what will grab the Sheets data to populate our template.
Keep this tab with Sheety open because you will need the endpoint URLs.
Setting up your Data Library on Bravo Studio
Open up Bravo Studio and click on Data Library. This is where you will connect your data to Bravo Studio. Click on New Collection and name it and hit save.
Let's start with the Video Tag. Grab the API endpoint URL for the Video table from Sheety. Paste it and hit send. If all went well, it should successfully show you the sample data, like below. Now check all the fields you want to get your data from that will populate your UI elements.
Check the box that has the link to the video. Make sure to also check .data.videoTagContent. By default, it will be set to 0, you want to set it to All. That will show all the data from the Google Sheets on your designs.
Now repeat the step with the data for the WebView Tag.
On Airtable, go to your account and generate your Airtable API key. You will need this in order to connect your data to Bravo Studio. Find more about it here.
Go to https://airtable.com/api while logged in to your Airtable account and it will show all the tables you have created in your workspace, and chose your table. You will be shown the page below. Keep this page open because you will need the Video and WebView api.airtable.com URLs for creating two GET requests.
Setting up your Data Library on Bravo Studio
Open up Bravo Studio and click on Data Library. This is where you will connect your data from Airtable to Bravo Studio. Click on New Collection and name it and hit save.
Let's start with the Video Tag. Grab the API endpoint URL for the Video table from the Airtable API page. Paste it and hit send. You will notice I have something in my header. This is where you are authenticating your API requests. So go to the Headers section and set it up as shown below. Field on left will have Authorization and field on the right will have Bearer YOUR_API_KEY.
If all went well, it should successfully show you the sample data, like below. Now check all the fields you want to get your data from that will populate your UI elements.
Check the box that has the link to the video. Make sure to also check .data.videoTagContent. By default, it will be set to 0, you want to set it to All.
3. Binding your data to your designs
Now navigate back to your projects and open the design file you just imported. It should look something like this. Select any screen to start binding your data to your design. This step is the exact same whether you are using Airtable or Google Sheets because the content and structure are the same.
From the collection dropdown we will select the Data Collection we just made and then it will pull up all the GET requests we created in that collection.
After that, underneath Data Content, you will see a blue link called + Add App Element. Because our elements that will be populated with data are under the *VideoCont container, select that on the popup with the list of visual elements. It will show up under design element.
You will see a dropdown under Bound Data from there select Videotagcontent, which is your table on Google Sheets. For Airtable it will just be Records. Once you do that, a plus sign will appear right underneath it. Click on it and you will be greeted with the same visual element selector popup.
Now repeat the same step for the screen for the WebView Tag.
4. Testing on Bravo Vision.
Congratulations! If all went well, it should have an autoplay video on the first page, and clicking on the Nintendo Switch icon will take you to a webpage with the Nintendo eShop, along with an option to go back to the main page.