Over the next couple of lessons, we’re going to learn how to add swipe gestures to our trips list. Specifically, we’ll enable users to swipe on a trip entry and bring up a confirmation asking if they really want to delete it.

In this lesson, we’ll focus on swipe gestures themselves.

I’m here on our trips view, which is a vertical list view with our list of trips inside it. Each trip in the list is a vertical list item. When you select one of these items, you’ll see in the properties editor options for leading swipe actions and trailing swipe actions.

For example, if I click on a leading swipe action, it adds an icon on the left side of the list item with options to customize it. I can choose to show just a label instead of an icon, and I can change the icon’s color and background color, but I’ll keep the defaults for now.

Because this is a leading swipe action, it means that when you swipe the item from left to right, this button will appear.

There are two options with swiping: you can do a partial swipe where the icon stays visible unless you swipe back, or you can enable a full swipe action which triggers a workflow immediately when the swipe completes. We’ll set that up in a moment.

You can do the same on the other side with trailing swipe actions. For example, I’ll add an edit action on the right side and save it.

Now, when you swipe left to right, you see the delete icon; when you swipe right to left, you see the edit icon. You can attach workflows to both actions.

You can also add multiple swipe actions on one side by clicking the plus icon. For demonstration, I’ll add another edit action on the left. Now when you swipe, you’ll see two actions instead of one, and you can configure workflows for both.

For instance, the edit icon can open the trip details view by navigating to that view and passing the current trip as data — just like when you tap on a trip normally.

For the delete icon, add a workflow with a new action we haven’t used yet: under Data, choose Delete a thing, and select the current trip as the thing to delete.

Let’s try this out. Swiping just a little to reveal the buttons, tapping edit opens the trip details. Tapping delete removes the trip from the list.

If you swipe all the way across the trip, that trip is deleted immediately. This is called a full swipe action. You can enable it by ticking the checkbox for full swipe.

With full swipe enabled, the workflow attached to the first swipe action runs automatically when the swipe completes fully. In our case, that’s the delete action on the left.

Because a full swipe is easy to trigger by accident, it’s risky to allow users to delete trips immediately like this. To avoid unwanted deletions, in the next lesson we’ll set up a confirmation step to explicitly ask users if they really want to delete the trip before it actually happens.