Add remote actions to your UI

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:

💡 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.
  2. (The sample design file already included the tag in the layer name of the checkmark icon.)

    image

  3. In your app project page, click on the app screen with the remote action Tag to enter Data Binding mode.
  4. image

  5. 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.
  6. image

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

    image

  9. Check Bravo Vision to see if you have correctly bound the data.
  10. image

  11. Now we will bind the remote action that will affect the remote data. Select the UI element with the remote action Tag.
  12. In the example, we are binding the DELETE request to the checkmark icon.

    image

  13. 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.
  14. image

  15. [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.
  16. image

  17. Set up the Response Actions, which is feedback to let the user know if the remote action is successful or not.
  18. 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

    image

  19. Test out your remote action in Bravo Vision! 📱
  20. image