Your Second iOS & SwiftUI App

At this point, you’re providing a way for users to set images for books, and update them. But there may be cases where they’d like to delete their custom images, and go back to the default.

However, that is going to represent a loss of data. So it would be good to make sure they really want to go through with it. A confirmation dialog is a good way to do that.

Like this sheet that we’re using in DetailView, a confirmation dialog is a type of modal view.

So just below the sheet modifier, start typing confirmation....nThere are a LOT of options here. The one we want takes a String for a title, a binding to a bool to present, an actions closure, and message closure.

      PHPickerViewController.View(image: $image)
    }
    .confirmationDialog(<#T##title: StringProtocol##StringProtocol#>, isPresented: <#T##Binding<Bool>#>, actions: <#T##() -> View#>, message: <#T##() -> View#>)
  }

For the title, this is will not actually show up visually. But it will act as the accessibility label for this dialoge - helping out anyone using voice-over to use the app. So make it descriptive, like “Delete image for (book.title)?”

    .confirmationDialog(
      "Delete image for \(book.title)?",

The isPresented argument takes a binding to a Bool. As with the preview below…

image: .constant(nil))

…we can just start off with a constant binding, to true.

.alert(isPresented: .constant(true)) {

The next two arguments are closures!

Both require some views from us. The first one will contain buttons to represent the possible actions you can take in this dialog. And the second will be the message you want to display.

In our case, it can be a Text that says exactly the same thing that the title does, so feel free to copy and paste:

      isPresented: .constant(true)) {
        <#code#>
      } message: {
        🟩Text("Delete image for \(book.title)?")
      }

Now back to the Actions closure. For a dialog like this, where we’re asking “do you want to delete this thing?”, we should give folks at least two options: “Yes, delete it”, and “No, cancel the deleting”

Confirmation dialogs actually create that second option for us automatically. So the only thing we need to provide in this closure is a button for deleting

Button("Delete")

For a Delete button, or any button that will make permanent destructive changes, you can use a “role” argument to specify that. A “destructive” button will be styled to look dangerous. You’ll see it in a moment.

Button("Delete", role: .destructive)

The final ingredient is the button’s action. It’ll be a closure, and in there, we can delete the image by setting the image binding to nil.

Button("Delete", role: .destructive) { image = nil }

That’s all set up! To check it out, go into Live Preview mode. And there’s the dialog!

Notice the dangerous looking Delete button, and the Cancel button that shows up automatically!

Tapping either button will dismiss the dialog for us. bTapping outside the dialog will do the same thing. That’s the equivalent of cancelling.

But it doesn’t make sense to show this when the detail view appears. And there’s no way to get the dialog back after you’ve cancelled. You’ll get that sorted out, next!