Overview of serving HTML with the app - csm-asme/google-spreadsheet-html-gui GitHub Wiki

Refer to the official google documentation for more info

Basically, 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. (Directly from the mouth of google)

Within the HTML file, you can write most standard HTML, CSS, and client-side JavaScript.

In the code file (code.gs) there must be a doGet function that returns an HtmlOutput object. This HtmlOutput is created using an html file in the project.

Example below.

Within code.gs

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

There must be an html file in the project called index.html

Official google documentation

Apps Script templates can contain three special tags, called scriptlets. Inside a scriptlet, you can write any code that would work in a normal Apps Script file: scriptlets can call functions defined in other code files, reference global variables, or use any of the Apps Script APIs. You can even define functions and variables within scriptlets, with the caveat that they can't be called by functions defined in code files or other templates.

The code inside the tag (scriptlet) runs on the server before the page is served to the user. This means that it only runs once. If you want it to run again you will need to refresh the page

Standard Scriptlet: ... ?>. Executes code without explicitly outputting content to the page. However, as this example shows, the result of the code inside a scriptlet can still affect the HTML content outside of the scriptlet:

Example:

 <? if (true) { ?>
      <p>This will always be served!</p>
 <? } else  { ?>
      <p>This will never be served.</p>
 <? } ?>

Printing Scriptlets: = ... ?> outputs the results of their code into the page using contextual escaping. Use this for printing something that a user inputs. This prevents the user from inserting code or html into the page.

Example:

 <?= 'My favorite Google products:' ?>
 <? var data = ['Gmail', 'Docs', 'Android'];
   for (var i = 0; i < data.length; i++) { ?>
     <b><?= data[i] ?></b>
 <? } ?>

Force-printing scriptlets: != ... ?> like printing scriptlets except that they avoid contextual escaping. As a general rule, use printing scriptlets rather than force-printing scriptlets unless you know that you need to print HTML or JavaScript unchanged.

code.gs file

  function doGet() {
    return HtmlService
       .createTemplateFromFile('index')
       .evaluate();
 }

 function getData() {
   return SpreadsheetApp
       .openById('1234567890abcdefghijklmnopqrstuvwxyz')
       .getDataRange()
       .getValues();
 }

index.html file

 <? var data = getData(); ?>
 <table>
    <? for (var i = 0; i < data.length; i++) { ?>
     <tr>
       <? for (var j = 0; j < data[i].length; j++) { ?>
         <td><?= data[i][j] ?></td>
       <? } ?>
     </tr>
   <? } ?>
 </table>