🎛
Conditional Actions
Create conditional actions depending on API response data
Add different callback actions after an API request, depending on specific data items. This can be used to create different navigation flows depending on certain conditions, creating form validations, and much more.
Conditional actions can be configured after an API request that follows a user action. This could be a form submission, or a remote action triggered after a user presses a UI element.
In the Data Binding panel, a conditional action can be specified on one of those two cases, as a response action after the API request:
Conditional actions can be defined based on these data items:
- Bravo built-in variables, for instance, user ID or email. These data items are not part in the API response, but are available by default in Bravo.
- Data items that come in the API response bound to the conditional action. For instance, in case we bind a conditional action to a form submission, we can use the data included in the API response coming from the backend after submitting the form.
Once we have the data item we want to create the condition with, the following conditions can be used:
IS: the action will be executed if a certain value equals the selected data item.IS NOT: the action will be executed if a certain value doesn't match the selected data item.IS EMPTY: the action will be executed if the selected data item is empty.IS NOT EMPTY: the action will be executed if the selected data item is not empty.IS TRUE: the action will be executed if the selected data item equalstrue. In this case, the selected data item should be a boolean.IS FALSE: the action will be executed if the selected data item equalsfalse. In this case, the selected data item should be a boolean.
Finally, after creating the condition, the following actions can be used.
- Show alert: a message inside an alert pop-up is displayed.
- Go to page: the user navigates to a specific app page.
- Go back: the user navigates to the previous app page.
- Open URL: a URL is opened in an external browser.
- Refresh: the app page is refreshed, including all the data coming from API requests.
These actions can also be created without a condition, for instance, in case we want to do the same action after submitting a form, regardless of the value of any data item.
Note that it is possible to create more than one conditional action. For instance, we could create conditional navigation flows to three different pages, depending on the value of a data item.
Only information returned by the remote action can be used in a conditional action.
As an additional constraint, data with a wildcard in the path (e.g.
.data[]) will not be usable by the conditional action even if it comes from the remote action response.The remote action can use the data coming from its bound context but it will be only available to the conditional action if the remote action returns that information as well
As an example, let's say you’ve a remote action in a list. The list items each have
id and do_a_thing .If the remote action is bound to http://example.com?id=${id}&do_a_thing=${do_a_thing} then the remote action would receive the correct values for those variables for each list item. If this request returns success and id where id is the value it was originally given then the values available to the conditional action would be success and id. In this way the conditional action could use
id from the list and success (as the remote action returned it) but it could not use do_a_thing because the remote action did not return it.
In this section, we'll describe a use case example that can be implemented with conditional actions. We'll create a form, so the app user needs to input their age before accessing some specific content. The content will be restricted for users below 18 years old.
This example consists of three screens:
- A screen with a form, where the user needs to input their age.
- A screen with the content that will only be accessible if the user is 18 or older.
- A screen with an "access denied" message, where users below 18 will be redirected.
You can see and duplicate the example design by opening the Figma link below:
In this example, we use Airtable to create a simple database that takes the form submissions where users input their age. The table consists of two columns:
- Age: this will be a numeric field where the user age is received.
- accessStatus: this will be a text field, calculated with a formula based on the Age field value. Its value will be either
AccessGrantedorAccessDenied.
You can duplicate our example Airtable base below:
After importing your design and creating your database, you can create a new Bravo app project and use the Airtable wizard to create some API GET requests targeting your database.
To send the form data, a POST request with the following JSON body is needed:
{
"records": [{
"fields": {
"Age": ${age}
}
}]
}
The request URL will depend on the database ID and name of your Airtable base. If you use the wizard, you can copy/paste the URL from one of the example requests.
Now, you'll need to test this API request by using some test values. Since the only variable we have in the request is ${age}, we'll need to provide a value for it:
Finally, we'll send the request. If the request is successful, we'll get back the data from our database, corresponding to the values the user submitted. In this case, we'll want to select the data for the accessStatus column, since we'll create our conditional action based on this data item.
Once we have our data, it's time to bind our API request to the screen with the form and create the conditional action.
First, we'll bind the age input field to the corresponding variable in our API request:
As a
On Success form response action, we'll select Conditional Action. We'll create the following conditions with the status data item. This is the item returning either AccessGranted or AccessDenied, based on our Airtable formula.- If
statusequalsAccessGranted, then we'll create a Go to page action to the screen with the content that we want to limit by age. - If
statusequalsAccessDenied, we'll create a Go to page action to the screen with the "Access Denied" message.
Last modified 10mo ago