Set up an API DELETE request - Xano

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

We're using this Xano table in this example.

Scores table in Xano

🏷️ Remote action tag

Ensure that the delete element in your Figma file includes the remote action tag.

[action:remote]

Obtaining the API Request from Xano

1. Within an API group, click on Add API Endpoint.

2. Select CRUD database operations.

3. Choose the desired table and the DELETE operation.

4. Finally, click on the Copy Endpoint URL.

Creating DELETE API request in Xano

How to set up a DELETE request in Bravo

1. To create a new request, click the blue "+" button.

2. Add a name for the request such as "Delete Scores record"

3. Choose the DELETE method from the request options.

4. Paste the URL that you have copied from Xano's API.

5. The URL provided contains the {scores_id} at the end. Replace this with the variable name ${scores_id}. This change makes it possible to delete any record the user selects by dynamically changing the ${scores_id} variable.

6. To test, go to the Input Variables & Test Values tab, add the variable named scores_id, and set the test value to 5, which corresponds to the 5th item in the table.

7. Last but not least, do not forget to authenticate the request. Add the variable name _authorization and the token as test value in Input Variables & Test Values. Generally, its the same token used in the other requests if you already have them set up.

8. Execute the request by clicking on the Send button. In the Received data tab, you'll get a response as "Request was successful but no data was sent back in the response, this behaviour is set by the backend you are using. For more info regarding this request go to Debug tab"

Request successful

To verify whether an ID has been deleted, please check the Debug tool or Xano.

Under the HTTP response, receiving a null response indicates that item 5 isn't found in the database, confirming it has been deleted successfully.

HTTP response 200 - OK

To verify in Xano, refresh the scores table and confirm that item 5 has been deleted.

Updated data in Xano. Item 5 has been deleted.

How to bind the API to the design

1. Once the API request is configured, navigate to the app's binding section.

2. On the left-hand side, under Elements, select the delete element marked by a lightning icon, where you previously inserted the [action:remote] tag.

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

4. That's it! Proceed with testing using Bravo Vision.

Now, you are ready to go!!

Your feedback is valuable to us. If you have any suggestions or questions, please don't hesitate to reach out to us in the community.