Display HTML modal dialogue popup

The following Google Apps Script is designed to display a dialogue box within a Google Sheet. Rather than using the typical Alert dialogue box however, this one does not suspend the server-side script whilst open. What this means is that the Apps Script code does not pause until the user has interacted with the popup in some way.

This is really useful for some of the systems I have produced because they can be running for several minutes at a time during which a user is unlikely to simply be sat watching them. So if they are off doing something else and the typical Alert dialogue pops up, it's possible the script will timeout and produce a bad error message.

With a HTML modal dialogue popup I can incorporate it into a try/catch and continue to display a user-friendly message whilst programming the code to terminate in a more controlled manner - regardless of how long the user takes to interact with it.

HTML modal dialogue box with a message

There are only a few lines of code required to create this type of dialogue box which keeps it nice and simple. Something to note is that the message itself does require some HTML tags - in this example they are simply the '<p></p>' tags for a paragraph.

function showHTMLPopup() {

  var htmlOutput = HtmlService
    .createHtmlOutput('<p>Congratulations this was a success.</p>')
    .setWidth(320)
    .setHeight(100);
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Completed');

}

 

File Download

Download the Display HTML modal dialogue popup sheet here. Please use 'File' > 'Make a copy' for your own version.