Enhance User Interaction with Google Apps Script: How to Add Confirmation Pop-Ups to Prevent Mistakes

When you add a script execution button to a Google Spreadsheet, it’s convenient to run the script with just one click. However, have you ever felt worried about accidentally clicking it?

This concern is especially significant for scripts involving actions like sending emails or deleting data, as executing such processes without confirmation could lead to major mistakes.

In this article, we’ll introduce a method to display an “OK” or “Cancel” confirmation pop-up when using Google Apps Script.

By implementing this feature, you can effectively utilize scripts while preventing operational errors.

TOC

Example Output

  • A pop-up is displayed with a confirmation message: “Do you want to send the email?”, and two buttons, “OK” and “Cancel”, are presented.
  • If “OK” is clicked, the email sending process is executed, and the result is displayed in another pop-up.
  • If “Cancel” is clicked, the email is not sent, and a pop-up appears stating that the process was canceled.

When the script is executed via a trigger, the pop-up is ignored, and the script continues without waiting for user interaction.

How to Create a Pop-Up

Sample Script Example

function sendEmailWithConfirmation() {
    // Get the UI for the Spreadsheet
    var ui = SpreadsheetApp.getUi();
    
    // Display a confirmation pop-up
    var response = ui.alert("Confirmation", "Do you want to send the email?", ui.ButtonSet.OK_CANCEL);
    
    if (response == ui.Button.OK) {
        // Email sending process
        try {
            // Write specific email sending code here
            // Example: GmailApp.sendEmail(email, subject, body);
            Logger.log("The email has been sent!");
            
            // Show a success message in a pop-up
            ui.alert("Success", "The email has been sent!", ui.ButtonSet.OK);
        } catch (e) {
            // Handle errors
            Logger.log("Failed to send the email: " + e.message);
            
            // Show an error message in a pop-up
            ui.alert("Error", "Failed to send the email. Details: " + e.message, ui.ButtonSet.OK);
        }
    } else if (response == ui.Button.CANCEL) {
        Logger.log("The email sending was canceled.");
        
        // Show a cancel message in a pop-up
        ui.alert("Canceled", "The email sending has been canceled.", ui.ButtonSet.OK);
    }
}
Script Explanation
Creating a Pop-Up
  • Use SpreadsheetApp.getUi() to access the Spreadsheet’s UI and ui.alert to display a pop-up.
  • Specify ui.ButtonSet.OK_CANCEL to display two buttons: “OK” and “Cancel.”
Behavior of “OK” and “Cancel”
  • If “OK” is selected, the email sending process is executed, and the result is displayed in another pop-up.
  • If “Cancel” is selected, the process is aborted, and a message indicating the cancellation is displayed.
Error Handling

Use a try-catch block to handle errors appropriately if an issue occurs during the email sending process.

Write the specific code you want to execute in the following section of the script.

// Write specific email sending code here
// Example: GmailApp.sendEmail(email, subject, body);

Example: Sending an Email with a Fixed Recipient and Content

If the recipient, subject, and body are fixed, you can write the following:

GmailApp.sendEmail("example@example.com", "Test Email", "This email was sent via a script.");
  • example@example.com: The recipient’s email address.
  • “Test Email”: The subject of the email.
  • “This email was sent via a script.”: The body of the email.

How to Customize the Messages

The messages displayed in this script can be customized by modifying the following four sections:

Confirmation Message Title and Body

The confirmation message in the pop-up is set using the first and second arguments of the ui.alert function.

ui.alert("Confirmation", "Do you want to send the email?", ui.ButtonSet.OK_CANCEL);

First Argument (“Confirmation”)

Sets the title of the pop-up.

Example: Change it to "Action Confirmation".

ui.alert("Action Confirmation", "Do you want to send the email?", ui.ButtonSet.OK_CANCEL);

When the script is executed, it will change as follows:

Second Argument (“Do you want to send the email?”)

Sets the body message displayed in the pop-up.

Example: Change it to "Do you want to delete the selected data?".

ui.alert("Confirmation", "Do you want to delete the selected data?", ui.ButtonSet.OK_CANCEL);

When the script is executed, it will change as follows:

Message for the Processing Result

The result messages after a successful email send or when an error occurs can be customized by modifying the following sections.

Message for Successful Execution

ui.alert("Success", "The email has been sent!", ui.ButtonSet.OK);

First Argument (“Success”)

The title of the pop-up for successful execution.

Example: Change it to "Completed".

ui.alert("Completed", "The email has been sent!", ui.ButtonSet.OK);

When the script is executed, it will change as follows:

Second Argument (“The email has been sent!”)

The detailed message for successful execution.

Example: Change it to "The data has been successfully sent!".

ui.alert("Success", "The data has been successfully sent!", ui.ButtonSet.OK);

When the script is executed, it will change as follows:

Message for Errors
ui.alert("Error", "Failed to send the email. Details: " + e.message, ui.ButtonSet.OK);

First Argument (“Error”)

The title of the pop-up for errors.

Example: Change it to "Send Failed".

ui.alert("Send Failed", "Failed to send the email. Details: " + e.message, ui.ButtonSet.OK);

When the script is executed, it will change as follows:

Second Argument (“Failed to send the email. Details: ” + e.message)

The detailed message for the error.

Example: Change it to "There was an issue while sending the data. Details: " + e.message.

ui.alert("Error", "There was an issue while sending the data. Details: " + e.message, ui.ButtonSet.OK);

When the script is executed, it will change as follows:

Message for Cancellation
ui.alert("Canceled", "The email sending has been canceled.", ui.ButtonSet.OK);

First Argument (“Canceled”)

The title of the pop-up for cancellation.

Example: Change it to "Operation Aborted".

ui.alert("Operation Aborted", "The email sending has been canceled.", ui.ButtonSet.OK);

When the script is executed, it will change as follows:

Second Argument (“The email sending has been canceled.”)

The detailed message for cancellation.

Example: Change it to "The process has been canceled.".

ui.alert("Canceled", "The process has been canceled.", ui.ButtonSet.OK);

When the script is executed, it will change as follows:

Types of Button Sets

Google Apps Script provides several button sets for pop-ups, which can be selected based on your needs.

Here are the main examples:

OK Button Only

Used for providing notifications or information.

ui.alert("Notification", "The process is complete.", ui.ButtonSet.OK);
OK and Cancel

Useful when you want to confirm whether to proceed with an operation.

var response = ui.alert("Confirmation", "Do you want to continue?", ui.ButtonSet.OK_CANCEL);

Yes and No

Used when you need a clear answer to a question.

var response = ui.alert("Question", "Are you sure you want to execute this?", ui.ButtonSet.YES_NO);

Conclusion

With Google Apps Script, you can easily add pop-up functionality to create a system for preventing mistakes or confirming actions.

Google Apps Script with pop-ups can be applied to various use cases beyond email sending, such as data deletion, updates, or conditional processing.

Our company offers support for improving work efficiency through the use of Google Apps Script.
If you need assistance with Google Apps Script customization or error resolution, please feel free to contact us.
We are fully committed to supporting your business improvements.

Contact us here

Let's share this post !

Comments

To comment

TOC