Set up an API DELETE request
The Data Collections allows you to create API requests to any database or tool with an available REST API.
In this tutorial, we're guiding you on how to create a DELETE request to delete data in an external data source from your app. We are going to use an already existing data collection.
If you don't have a Data collection yet, go to Data Collection & Binding: Complete Collection.
Figma file Sample
Here is the Figma file used in the example.
Database Sample
Copy this Airtable as the database to delete data.
Remote action tag
Ensure the delete element in your Figma file includes the remote action tag.
Delete records from Airtable's API
To delete records from the Score table using the Airtable API, follow these steps:
Open the Help menu by clicking on the Help button located at the top right of the screen.
Scroll to the end to select Api Documentation. A new page with the API documentation will then be displayed.
From the left-hand side menu, find the Score Table and then choose Delete Scores records.
Now, we'll copy a URL from an example request provided. To get the correct URL example, make sure to click on "You can also issue a DELETE request to the record endpoint to delete a single record. Click here to show an example."
Copy the example request URL provided.
How to set up a DELETE request in Bravo
To create a new request, click the blue "+" button.
Add a name for the request.
Choose the DELETE method from the request options.
Paste the URL that you have copied from Airtable's API.
The URL provided contains the ID "recPe7CDVCMiCFEMJ" at the end. Replace this with the variable name
${id}. This change makes it possible to delete any record the user selects by dynamically changing the${id}variable.To test, you may either use the same ID found in the URL or refer back to the Airtable API documentation to find an example ID provided in a sample request.
Add the key and the value in the Test Values tab. In this example:
The key field should contain the variable name "id"
The value field should contain: "recPe7CDVCMiCFEMJ".
Last but not least, do not forget to add the authentication in the request's Headers. The API documentation will specify the Headers you also need to enter the DELETE request. In this case, Airtable uses 'Authorization:Bearer'. Since the Airtable Wizard was used to create the API collection, the headers have been automatically generated. Therefore, we will use the same headers as in the Scores Detail request.
If you haven't already set up your API collection with Airtable Wizard, you'll need to obtain the Header from the Personal Access Token.
Execute the request by clicking on the Send button.
To verify whether an ID has been deleted, please check the Debug tool or Airtable.
The Binding
Go to the app's binding section.
On the left-hand side, under Elements, select the delete element marked by a lightning icon, where you previously inserted the
[remote:action]tag.After selecting the delete element, navigate to the right-hand side and locate the "Remote action" section. Here, choose the API delete request. You can also set your preferred actions for both "On success" and "On error" scenarios.
That's it! Proceed with testing using Bravo Vision.
Now, you are ready to go!!
Happy Bravorizing!
Last updated
