Remote actions: trigger an API request with a UI element
Last updated
Was this helpful?
Last updated
Was this helpful?
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. If you haven't done that yet, check out:
👉 👉 👉
💡 We're using and for the tutorial.
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.)
1. 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.
(The sample design file already included the tag in the layer name of the checkmark icon.)
2. In your app project page, click on the app screen with the remote action Tag to enter Data Binding mode.
3. 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.
5. Check Bravo Vision to see if you have correctly bound the data.
6. Now we will bind the remote action that will affect the remote data. Select the UI element with the remote action Tag. In the example, we are binding the DELETE request to the checkmark icon.
7. 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.
8. [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 Yes and Cancel.
9. Set up the Response Actions, which is feedback to let the user know if the remote action is successful or not.
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
10. Test out your remote action in Bravo Vision! 📱
4. Bind the content to your app UI. () In this example, we're binding the list of tasks from Airtable to the "task item" container.
