Web App Development with Google Apps Script/Templated html

Putting variables into html pages
As noted in the Hello World chapter, you can have a basis of an html page by creating one and using it as a template. Normally you'd want to tailor that page with information from the server (ie usually one of your Google Sheets). You can use the various templating tools to do that.

You send a variable to the template with  and you put it in the html document with.

doGet code
from "code.gs":

html code
From "main.html":

More complex variables
If you want to send something more complex than a string, there are a few options:
 * will print things with special characters in it. This is useful, for example, for strings that contain html tags in them.
 * inside a  tag on the html page will then let the local javascript deal with it as a global variable.
 * If you have a bunch of variables that you want to have as global variables in the html document:
 * in the code.gs doc
 * this works because the  object is the global so-called "namespace" for the html document. That just means it's where global variables sit.
 * this works because the  object is the global so-called "namespace" for the html document. That just means it's where global variables sit.

Passing functions
The Google Apps Script editor doesn't work very well when checking for syntax errors in javascript code that's embedded in an html file. Here's a trick to let you write javascript functions in the server code spaces (which lets them be syntax checked) and then pass them to the client. The trick is to use function expressions.

In the server side you'd do this:

and in the client html file you'd do this: