Creating Basic HTML Files | User Interfaces with HTML Service | Introduction to Google Apps Script: Automate Your Workflows and Boost Productivity

Welcome to the exciting world of user interfaces with Google Apps Script! While Apps Script can automate tasks behind the scenes, it also empowers you to create custom user interfaces within Google Workspace applications like Sheets, Docs, and Forms. This allows for more interactive and user-friendly automation. The primary way to achieve this is through the HTML Service.

The HTML Service allows you to embed HTML, CSS, and JavaScript directly into your Google Apps Script projects. You can create custom dialogs, sidebars, and even full-fledged web apps that interact with your Google services. Think of it as building your own mini-websites or applications that live alongside your spreadsheets and documents.

To start, you'll need to create HTML files within your Apps Script project. These files will contain the structure, styling, and dynamic behavior of your user interface. Let's begin with a simple example of how to create and display a basic HTML file.

In your Apps Script editor, go to 'File' > 'New' > 'HTML file'. You'll be prompted to name your file. Let's call it 'Index'.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title>My First HTML Interface</title>
  </head>
  <body>
    <h1>Hello from Apps Script HTML Service!</h1>
    <p>This is a simple HTML page created with Google Apps Script.</p>
  </body>
</html>

This Index.html file contains standard HTML elements: a doctype declaration, an html tag, a head section with a title, and a body section with a heading and a paragraph. This will form the visual content of our interface.

Now, to display this HTML file as a user interface, we need a corresponding Apps Script (.gs) file. You can rename the default Code.gs file or create a new one. This script will contain the logic to serve our HTML content.

function showMyHtmlPage() {
  var htmlOutput = HtmlService.createHtmlOutputFromFile('Index');
  SpreadsheetApp.getUi().showSidebar(htmlOutput);
}

Let's break down this Apps Script code:

function showMyHtmlPage(): This is a standard Apps Script function that we will trigger.
HtmlService.createHtmlOutputFromFile('Index'): This is the core of serving our HTML. It tells Apps Script to find an HTML file named 'Index' (without the .html extension) and prepare it as an output that can be displayed.
SpreadsheetApp.getUi().showSidebar(htmlOutput): This line displays the generated HTML output as a sidebar within the Google Sheet. You can also use showModalDialog() to display it as a popup window.