HTML Service Examples for Google Scripts

January 13, 2017

The HTML Service of Google Apps Scripts lets you serve HTML web pages with standard CSS and client side JavaScript as a web app. You can also communicate with various Google services and render the results in a HTML5 web page.

For instance, with HTML Service, you can build a Gmail like web app that displays your latest email messages and you can even interact - like delete or reply to emails. Or you can display a range of data from a Google Spreadsheet without making your entire sheet public.

Example #1 - a sample web app that displays a static web page. The script of course needs to be deployed as a web app through the script editor.

// code.gs function doGet() { return HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME); } // index.html
<div>Hello, world!</div>

Example #2 - Here the page uses CSS and JavaScript to display the current time to the user. Notice how we include the content of external files into the index.html file using the include() method.

// code.gs
function doGet() {
  var html = HtmlService.createTemplateFromFile('html').evaluate();
  html.setTitle('Webpage Title');
  return html;
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).setSandboxMode(HtmlService.SandboxMode.IFRAME).getContent();
}

// script_js.html
<script>
  function getTime() {
    document.getElementById('time').innerHTML = new Date().toString();
  }
</script>

// script_css.html
<style>
  div {
    padding: 20px;
    border: 1px solid gray;
  }
</style>

// index.html
<?!= include('script_js'); ?>
<?!= include('script_css'); ?>
<html>
  <body>
    <div id="time"></div>
  </body>
</html>

Example #3 - Here we’ll display the content of a spreadsheet into a web page. When the index.html file is loaded on the client side, it call the getData() server function and, if the call is successful, the data is rendered using the showData() method.

// code.gs function doGet() { var html = HtmlService.createTemplateFromFile("html").evaluate(); html.setTitle("Dynamic
Webpage"); return html; } function include(filename) { return HtmlService.createHtmlOutputFromFile(filename)
.setSandboxMode(HtmlService.SandboxMode.IFRAME) .getContent(); } function getData(){ var sheet =
SpreadsheetApp.openById("SheetID").getSheets()[0]; return sheet.getDataRange().getValues(); } // script_js.html
<script>
  window.onload = function () {
    google.script.run.withSuccessHandler(showData).getData();
  };

  function showData(data) {
    var html = '';
    for (var i = 0; i < data.length; i++) {
      html += '<br>' + data[i].join(':');
    }
    document.getElementById('data').innerHTML = html;
  }
</script>

// index.html
<?!= include('script_js'); ?>
<body>
  <div id="data"></div>
</body>

Google Apps Script

ShareWhatsAppTwitterFacebook

Amit Agarwal

Google Developer Expert, Google Cloud Champion

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.

Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory