Remote actions: trigger an API request with a UI element

Upgrade your free account to the Solo Plan to use this feature.

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:

👉 Connect to any API: GET request 👉 Connect to any API: DELETE request 👉 What are remote actions (a.k.a. CRUD operations)?

💡 We're using this design file and this Airtable for the tutorial.

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.)

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.)

Pro tip: You can add custom variables that can be used later in your API requests, by adding them in the tag in the following way: [action:remote:var1=value1;var2=value2;var3:value3]

*Note this only works with strings, not booleans or any other data type. Learn more about variables

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.

4. Bind the content to your app UI. (Check out the tutorial here) In this example, we're binding the list of tasks from Airtable to the "task item" container.

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! 📱