Remote actions allow you to trigger an API request as an action.
This tutorial is a continuation after you have set up an API request in the Data Library. If you haven't done that yet, check out:
How to add remote actions to your design
This is part of the Data Binding of an app project. Binding is the action of connecting data sources (content, API request, etc.) to app UI (text, button, etc.)
- In your design, add the remote action Tag
[action:remote]to a UI element. This Tag will allow you to connect an API request to an element.
- In your app project page, click on the app screen with the remote action Tag to enter Data Binding mode.
- In order to use remote action, you must have remote data. So first, we will connect a list of content to this app screen. Select the collection and GET request you previously created in the Data Library.
- Bind the content to your app UI. (Check out the tutorial here)
- Check Bravo Vision to see if you have correctly bound the data.
- Now we will bind the remote action that will affect the remote data. Select the UI element with the remote action Tag.
- In the Remote action dropdown, select the API request you want to perform. In this example, we are using a DELETE request to delete the task from the database after completing it.
- [OPTIONAL] Set up a confirmation message that will display as an alert dialog when the user clicks the response action element. The dialog button will always be
- Set up the Response Actions, which is feedback to let the user know if the remote action is successful or not.
- Test out your remote action in Bravo Vision! 📱
(The sample design file already included the tag in the layer name of the checkmark icon.)
In this example, we're binding the list of tasks from Airtable to the "task item" container.
In the example, we are binding the DELETE request to the checkmark icon.
Show Alert: Display a pop-up message.
Go To Page: Redirects user to another page in the app.
Open URL: Opens the web browser on the phone with the specified URL.
Refresh: Refreshes the current page
👉 Next up: Add a native form with POST request