Creating a Responsive Modal in Google Apps Script UI

by

When designing web applications within the Google Apps Script environment, it’s crucial to ensure that UI elements like modals are responsive and look good on all devices, from desktops to mobile phones. This post will guide you through creating a responsive modal dialog in Google Apps Script using the HTML service, ensuring it adapts to different screen sizes and resolutions.

Why Responsiveness Matters

Responsiveness in web design ensures that your application provides an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices. For modals, this means ensuring that they are visually functional and appealing no matter the device used to view them.

Setting Up a Responsive Modal in Google Apps Script

Google Apps Script allows you to create and manipulate UI components using its HTML service, which can render HTML, CSS, and JavaScript in a sandboxed iframe. Below, we’ll create a simple HTML form within a modal dialog that is responsive, using basic CSS to manage its appearance on different devices.

Step 1: Create a New Script

Go to Google Apps Script and create a new project.

Step 2: Write the HTML and CSS

You’ll write HTML and CSS that defines the modal and ensures it is responsive. Here’s how you can set it up:

  1. Create an HTML file: In your Google Apps Script project, click on File > New > HTML file, and name it ModalContent.
  2. Write the HTML and CSS: Paste the following code into the HTML file. This code includes CSS for responsiveness and a simple form inside the modal.
<!DOCTYPE html>
<html>
<head>
  <style>
    .modal {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid #ccc;
      background-color: #fff;
      z-index: 1002;
      padding: 20px;
      box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
      width: 100%;
      max-width: 500px; /* Max width and full width on smaller screens */
    }
    @media (max-width: 600px) {
      .modal {
        width: 90%; /* Smaller padding on smaller screens */
      }
    }
  </style>
</head>
<body>
  <div class="modal">
    <h2>Responsive Modal</h2>
    <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name"><br><br>
      <input type="submit" value="Submit">
    </form>
  </div>
</body>
</html>

Step 3: Display the Modal Using Google Apps Script

You need to write a script to display this modal within a Google Apps Script UI, such as a sidebar or dialog in Google Sheets or Docs.

  1. Add the following code to your script file: This code opens a modal dialog when a function, such as showModal, is called from your Apps Script environment.
function showModal() {
  var html = HtmlService.createHtmlOutputFromFile('ModalContent')
    .setWidth(400) // Initial width in Google Workspace apps
    .setHeight(300); // Initial height
  SpreadsheetApp.getUi() // Or DocumentApp.getUi()
    .showModalDialog(html, 'Responsive Modal');
}

Step 4: Test Your Modal

You can test your modal by executing the showModal function directly in the Apps Script environment, or by attaching it to a menu item or button within your Google Workspace document or spreadsheet.

Conclusion

Creating a responsive modal in Google Apps Script is straightforward with the help of HTML, CSS, and JavaScript. By using CSS for styling and media queries for device-specific responsiveness, you can ensure that your modal looks great and functions well across all devices. This setup allows you to enhance the user interface of your Google Apps Script projects, making them more accessible and user-friendly.