# Swipe to delete

{% hint style="info" %}
[Upgrade your free account](https://docs.bravostudio.app/get-started/unlock-power-features-to-create-interactive-apps) to the **Bravo Solo plan** to use this feature.
{% endhint %}

## 👉 **The Tag** <a href="#the-tag" id="the-tag"></a>

Enables a swipe-to-delete gesture for items in a list. The tag will be applied to the item container and it needs to be bound to an API request that deletes the item on the backend. When the user swipes the item, it is removed from the screen and the API request is triggered.

{% hint style="success" %}
On **Android**, when swiping an item, it will be automatically removed from the screen. On **iOS** the user will need to press on a “**delete**” button to confirm the action.
{% endhint %}

**📍 Where to add the tag**: A container element.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2F6OgUFKCVpzCihu4o2urb%2FScreen-Recording-2024-01-17-at-15.21.13.gif?alt=media\&token=48ea5cd1-3f02-4a19-a17a-da71f2ba789d)

## 🏷️ **How to set it up** <a href="#how-to-add-the-tag" id="how-to-add-the-tag"></a>

1. Add the `[swipetodelete]` tag to the list container where we want to enable the swipe-to-delete gesture.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2Fmd07ce1qMZrM6y8BVJQD%2FSwipe%20to%20delete.jpg?alt=media\&token=8720a759-a7b7-4b9d-b9ba-1360a5bad537)

The tag enables three properties that need to be bound:

* **Container**. To show the list of items and activate the gesture on each of them.
* **Sort/Swipe to delete ID**. To indicate the ID of each item.
* **Remote action (swipe to delete)**. To indicate the API request that performs the deletion on the backend.

You can skip the Visibility property.

2\. Bind the **Container property** to an API request returning a list of items. The list container can have as many UI elements inside as you wish. \
In our example, we have bound the "**Contacts - List"** request with the "**records"** object, which contain the list of items:

Make sure the API request returns a **unique ID** for each record, and that it is selected (it appears in the Selected Data tab). This variable will be used later for the delete action.

3\. Open the "**Sort / Swipe to delete ID**" property and select the unique ID mentioned on step 2.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FXBKluFa21P8OVpoasmPX%2FScreen-Recording-2024-01-17-at-15.27.11.gif?alt=media\&token=4c7d5d91-59c1-4fc3-840d-b22dd9d133e8)

4\. Create an API request that deletes the record from your backend. This request needs to receive the unique ID from step 3 as a param. Make sure the variable name is the same on both requests (in our case, "id") and it is set as `${id}`, wrapped up in with the dollar and brackets:

5\. Go back to the binding screen and open the **Remote action (swipe to delete)** property and select the delete API request. It will be triggered when the users perform the swipe gesture. You can also assign On Success and On Error actions.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2F4q5yjEkVKh9kVWJli6tj%2FScreenshot%202022-08-15%20at%2015.08.50.png?alt=media\&token=f8f954b1-b868-45d0-91c0-98b242ae34f8)

6\. Ready to go! Now your list items will be deletable with a swipe gesture.

## 💾 Example file <a href="#example-files" id="example-files"></a>

Duplicate the example design file below to get started!

{% embed url="<https://www.figma.com/community/file/1140972531178104786>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bravostudio.app/bravo-tags/containers/swipe-to-delete.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.