In this lesson, we’re going to learn about a really important element type called a sheet. A sheet is what we’ll use when a user tries to delete one of their trips. This sheet will appear sliding up from the bottom of the view with extra actions the user can tap, or they can simply swipe down from the bottom of the sheet to hide it.

A sheet is basically an overlay group that slides in from the bottom and can hold content just like any other container. The user can swipe it out of view at any time.

To demonstrate, I’ll first delete the old swipe action we used for demonstration purposes. Then, from the element library, I’m going to add a sheet from the containers section. I’ll name it delete confirmation because it will be used to confirm whether the user really wants to delete a trip.

One thing to note right now is the default snap point setting, which is at 40%. This means the sheet will initially cover 40% of the viewport height (the user’s screen height). If I change it to something bigger like 92%, the sheet will cover more of the screen. For now, I’ll leave it as is and hide the sheet from view.

Next, I’ll add an action to show this sheet when the user triggers the deletion swipe action. So instead of deleting the trip immediately on swipe, we’ll just show the sheet. We’ll do this on both the left and right swipe actions so the sheet appears regardless of which direction the user swipes.

Now when I swipe a little and tap the delete icon, the sheet appears from the bottom. I can swipe it back down to hide it, or if I click outside the sheet on the dimmed background, the sheet also disappears.

You can add multiple snap points if you want, for example a second snap point at 80%. That means the sheet will start at 40%, but if you swipe up it will snap to 80%, and swiping down will snap it back to 40%. You can create as many snap points as you want to control exactly how the sheet displays.

You can also configure the blur effect on the content underneath the sheet. The default backdrop color is black with 10% opacity, so the background is slightly darkened. You can increase or decrease this effect or even set your own custom opacity.

For now, I’ll remove the extra snap point and focus on adding the content to the sheet.

I’ll add a big centered heading that says “Are you sure?” and then add two buttons below it. One button says Delete and I’ll set its style to a destructive style with a red color. I’ll duplicate this button and use a different style for the cancel button — a more subtle, gray style so it doesn’t clash with the delete button’s red.

I’ll add some spacing and padding so everything looks neat and tidy.

Because the sheet is snapping at 40%, there’s a lot of empty space below. Instead, I’ll set the sheet’s height to “fit height to content” so it only takes as much space as it needs.

Now the sheet looks good and compact.

Next, I’ll configure the cancel button to hide the sheet when clicked. This is done by adding a workflow that uses the “hide an element” action targeting the delete confirmation sheet.

Finally, we need to connect the delete button to actually delete the trip.

Here we have a similar challenge to when we display trip details. When we open the trip details view, we pass the trip data into the view so it knows which trip to show.

We need to do the same for the sheet — the sheet needs to know which trip to delete. Unlike a full page view, a sheet can have a content type like any container. So I’ll set the sheet’s content type to Trip.

Before showing the sheet, we have to pass the trip into it. So on the swipe action workflow where we show the sheet, we’ll first add an action called “Display data in a group” (even though it says group, it works for sheets as containers). We select the delete confirmation sheet as the target, and the data to display is the current item’s trip from the list.

To confirm this is working, I’ll add a text element inside the sheet that shows the sheet’s current trip’s title followed by “will be permanently deleted.” This helps verify the trip is being passed correctly.

Now when I test it, I see the correct trip title inside the sheet when I swipe to delete.

For the delete button’s workflow, we’ll delete the trip that’s currently stored in the sheet. Because the delete button is inside the sheet, it can access the sheet’s trip via the parent group’s trip.

After deleting, we’ll also hide the sheet.

Testing this out, when I hit delete, the trip is removed from the list and the sheet disappears.

This brings us to the end of this section. What we’ve learned is how to set up a native-feeling end-user experience with different view types, navigation gestures, and conditional logic.

In the next section, we’ll deepen our understanding of working with data behind the scenes — this is what will let you bring your unique app vision to life.

See you there!