Comment on page
Swipe to delete
Enable a native swipe-to-delete functionality in your app
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.
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.
📍 Where to add the tag: A container element.
- 1.Add the
[swipetodelete]tag to the list container where we want to enable the swipe-to-delete gesture.
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:
.png?alt=media&token=dffd5ee1-5a21-45a0-9abc-2653e8878eae)
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.
.png?alt=media&token=683892ba-06e0-4995-91d3-8ee635e9fdcf)
3. Open the "Sort / Swipe to delete ID" property and select the unique ID mentioned on step 2.
.png?alt=media&token=cceb031f-5cfc-4990-b972-9f0bcd6ea9e8)
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.
6. Ready to go! Now your list items will be deletable with a swipe gesture.
Duplicate the example design file below to get started!
Last modified 2mo ago