Custom Dialog Box with Apps Script

Google Sheets allows you to create your own dialog boxes using HTML, CSS, and JavaScript.

On this page, you will discover a simple example of a dialog box whose purpose is to display an image with a title and a button to close the window.


HTML Page

The window content is an HTML page, so start by adding an HTML file from the editor (which has been named logo in this example).

Default HTML tags are added.

Then insert the content of your dialog box (in HTML format) between the body tags:

<!DOCTYPE html>
<html>
  <head>
  
  </head>
  <body>
    <img src="https://www.sheets-pratique.com/template/img/en/logo.png">
    <input type="button" value="Close" onclick="google.script.host.close()">
  </body>
</html>

The following line corresponds to an image:

<img src="https://www.sheets-pratique.com/template/img/en/logo.png">

And this one to a button (with an action on click that closes the window):

<input type="button" value="Close" onclick="google.script.host.close()">

To add, for example, a paragraph, place your text between p tags:

<p>My paragraph ...</p>

Displaying the Dialog Box

The following function allows you to display the dialog box by integrating the HTML file named logo, with a width of 400 and a height of 132:

function example() {
  const html = HtmlService.createHtmlOutputFromFile('logo')
    .setWidth(400)
    .setHeight(132);
  SpreadsheetApp.getUi().showModalDialog(html, 'The website logo');
}

Preview:

google apps script custom window dialog box

Customizing the Style

Fortunately, you can modify the appearance of your HTML page content by adding CSS style rules between the head tags:

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        display: block;
      }
      input {
        display: inline-block;
        float: right;
        padding: 0.6rem 1rem 0.5rem;
        margin-top: 1.5rem;
        font-size: 1rem;
        background: #dce3f9;
        border: 2px solid #455fbb;
        border-radius: 0.4rem;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <img src="https://www.sheets-pratique.com/template/img/en/logo.png" alt="logo">
    <input type="button" value="Close" onclick="google.script.host.close()">
  </body>
</html>

Preview:

google apps script custom dialog box

Another Example

An example of a more advanced custom dialog box is available on the page Create a Sidebar, here is a preview:

google apps script custom window form png dialog box