Web App Development with Google Apps Script/Templated html

Putting variables into html pagesEdit

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 t.coolvariable="whatever" and you put it in the html document with <?= coolvariable ?>.

doGet codeEdit

from "code.gs":

function doGet() {
   var t = HtmlService.createTemplateFromFile("main");
   t.coolvariable = "hi there";
   return t.evaluate();

html codeEdit

From "main.html":

<!DOCTYPE html>
    <base target="_top">
    <?= coolvariable ?>

Web resultEdit

hi there

More complex variablesEdit

If you want to send something more complex than a string, there are a few options:

  • <?!= somevariable ?> will print things with special characters in it. This is useful, for example, for strings that contain html tags in them.
  • var pagevariable = <?!= JSON.stringify(somevariable) ?>; inside a <script> 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:
    • t.globals={"var1":var1, "var2":var2}; in the code.gs doc
    • var globals = <?!= JSON.stringify(globals) ?>;
    • this works because the window object is the global so-called "namespace" for the html document. That just means it's where global variables sit.

Passing functionsEdit

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:

function doGet() {
  var t=HtmlService.createTemplateFromFile("main");
  return t.evaluate();

var a=(c,d)=>c+d;
var b=(e,f)=>e*f;
var temp=(a,b,c)=>{
                    var d=a+b;
                    var e=b*c;
                    return d+e;

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

var funcnames=<?!= JSON.stringify(funcnames) ?>;
var funcs=[<?!= funcs ?>];