Skip to content

2. Alerts With Multiple Action Buttons

Gabriel Theodoropoulos edited this page Apr 17, 2019 · 1 revision

Alerts with multiple action buttons

The method we are going to see now, is a general method that can be used to present alerts with a varying number of action buttons. These buttons can have any of the supported action styles, such as Default, Cancel and Destructive. To understand how exactly it works, let's go through 2-3 different examples:

Initially, let's present an alert with two action buttons:

GTAlertCollection.shared.presentAlert(withTitle: "A Question", message: "What do you think?", buttonTitles: ["Yes", "No"], cancelButtonIndex: nil, destructiveButtonIndices: nil) { (actionIndex) in

    if actionIndex == 0 {
        print("It's a Yes")
    } else {
        print("It's a No")
    }

}

Two buttons alert

Let's discuss a bit about the parameters of the above method:

  • withTitle: This is the title of the alert. It's optional, so pass nil if you just don't want to display a title.
  • message: The message that will appear on the alert's body. It's optional too, so pass nil if there's no message to show.
  • buttonTitles: It's an array that should contain the titles of the action buttons that will be shown on the alert, in the order you want them to appear. The number of actions that will be auto-generated for the alert will be equal to the number of the titles in that array, so make sure you provide only the titles for the buttons you want to appear.
  • cancelButtonIndex: All action buttons of the alert are styled using the Default style option. However, if you would like to have one action that will act as the Cancel button and therefore to be styled accordingly, all you have to do is to specify the position of it in the collection of actions. Next example demonstrates that.
  • destructiveButtonIndices: Similarly to the above, if you want to show one or more Destructive-styled actions (those having red text color), just create an array with the indices of all action buttons that should be styled like that.
  • Action handler & actionIndex parameter: actionIndex is an Int value indicating the index of the action button tapped by the user. The first action has index 0. Using it you can determine the path your app should take after the user taps on any action button shown in the alert.

Let's take a look now on how to present an alert with multiple action buttons, including destructive and cancel actions as well:

GTAlertCollection.shared.presentAlert(withTitle: "Your Options",
                                      message: "What would you like to do?",
                                      buttonTitles: ["Create", "Update", "Delete one", "Delete all", "Cancel"],
                                      cancelButtonIndex: 4,
                                      destructiveButtonIndices: [2, 3]) { (actionIndex) in

                                        print("You tapped on button at index \(actionIndex)")
}   

The above example demonstrates the usage of the cancelButtonIndex and destructiveButtonIndices parameter values. Notice that the last action with index 4 (titled "Cancel") is marked as the Cancel-styled button, while actions at indices 2 & 3 (titled "Delete one" & "Delete all" respectively) are marked as destructive. Here's what is presented:

Multiple buttons alert

Again, use the actionIndex to determine the tapped action button.

Finally, let's see one last example where we have two action buttons; one is Cancel-styled and the other is Destructive-styled:

GTAlertCollection.shared.presentAlert(withTitle: "Delete your account?", message: "This action is irreversible!", buttonTitles: ["Yes, delete", "Cancel"], cancelButtonIndex: 1, destructiveButtonIndices: [0], actionHandler: { (actionIndex) in

    if actionIndex == 0 {
        print("Account was deleted")
    } else {
        print("Cancelled account deletion")
    }

})

Destructive alert