HTML Service: Create and Serve HTML (original) (raw)

HTML Service: Create and Serve HTML

Stay organized with collections Save and categorize content based on your preferences.

The HTML service lets you serve web pages that can interact with server-side Apps Script functions. It is particularly useful for building web apps or adding custom user interfaces in Google Docs, Sheets, and Forms. You can even use it to generate the body of an email.

Create HTML files

To add an HTML file to your Apps Script project, follow these steps:

1. Open the Apps Script editor.
2. At the left, click Add a file > HTML.

Within the HTML file, you can write most standard HTML, CSS, and client-side JavaScript. The page will be served as HTML5, although some advanced features of HTML5 are not available, as explained inRestrictions.

Your file can also include template scriptlets that are processed on the server before the page is sent to the user — similar to PHP — as explained in the section on templated HTML.

Serve HTML as a web app

To create a web app with the HTML service, your code must include a doGet()function that tells the script how to serve the page. The function must return an HtmlOutput object, as shown in this example.

Code.gs

function doGet() { return HtmlService.createHtmlOutputFromFile('Index'); }

Index.html

Once that basic framework is in place, all you have to do issave a version of your script, thendeploy your script as a web app.

After the script is deployed as a web app, you can alsoembed it in a Google Site.

Serve HTML as a Google Docs, Sheets, Slides, or Forms user interface

The HTML service can display a dialog or sidebarin Google Docs, Sheets, Slides, or Forms if your script iscontainer-bound to the file. (In Google Forms, custom user interfaces are only visible to an editor who opens the form to modify it, not to a user who opens the form to respond.)

Unlike a web app, a script that creates a user interface for a document, spreadsheet, or form does not need a doGet() function specifically, and you do not need to save a version of your script or deploy it. Instead, the function that opens the user interface must pass your HTML file as anHtmlOutput object to theshowModalDialog()) or showSidebar() methods of theUi object for the active document, form, or spreadsheet.

These examples include a few extra features for convenience: the onOpen()function creates a custom menu that makes it easy to open the interface, and the button in the HTML file invokes a specialclose() method of thegoogle.script.host API to close the interface.

Code.gs

// Use this code for Google Docs, Slides, Forms, or Sheets. function onOpen() { SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .createMenu('Dialog') .addItem('Open', 'openDialog') .addToUi(); }

function openDialog() { var html = HtmlService.createHtmlOutputFromFile('Index'); SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .showModalDialog(html, 'Dialog title'); }

Index.html

Note that the first time you want to display this user interface, you must either run the onOpen() functionmanually in the script editoror reload the window for the Docs, Sheets, or Forms editor (which will close the script editor). After that, the custom menu should appear within a few seconds every time you open the file. Choose Dialog > Open to see the interface.