Inserting HTML including Javascript on Web Apps Created by Google Apps Script

GasTips / jstips
Google Apps Script / Javascript / WebApps

Gists

Abstract

One day, you might have a situation where you are required to create a Web Apps with Google Apps Script and are required to load another HTML created by Javascript on the Web Apps. This report will help achieve such a situation.

Introduction

Google Apps Script can create Web Apps. Ref When you access the Web Apps using your browser, you can see the HTML. When your browser can run Javascript, you can see the HTML reflecting the Javascript. The Web Apps created by Google Apps Script is one of the important and useful cloud applications. About the Web Apps, you have a situation where it is required to insert another HTML to the current HTML. And, another HTML might be required to be created by Javascript including the HTML. However, it is difficult a little to find detailed information about this. This report introduces a simple sample script for achieving such a situation.

Sample script

In this sample script, the following flow is run.

  1. Access Web Apps. By this, “index1.html” is loaded.
  2. By clicking a button, “index2.html” is loaded. “index2.html” is a template HTML. The final HTML is created by Javascript including the template HTML.
  3. By clicking a button, “index3.html” is loaded. “index2.html” is a template HTML. And, the final HTML is created by Javascript including the template HTML.

Usage

In order to test this script, please create a standalone Google Apps Script project.

1. Sample scripts

Please copy and paste the following script and HTML to the created Google Apps Script project.

Google Apps Script: Code.gs

Please copy and paste the following script to Code.gs which is a script type.

const getHtmlObj_ = (name) => HtmlService.createTemplateFromFile(name);
const getHtml = (name) => getHtmlObj_(name).evaluate().getContent();
const getJavascript = (name) => {
  const html = getHtmlObj_("javascript");
  html.text = `${name}.html was loaded.`;
  return html.evaluate().getContent();
};
const doGet = (_) => getHtmlObj_("index1").evaluate();

HTML1: index1.html

Please copy and paste the following HTML as index1.html which is a HTML type. When Web Apps is accessed, this HTML is opened.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top" />
  </head>

  <body>
    <p>Initial HTML was loaded.</p>
    <input type="button" value="clear" onclick="run()" />
    <input type="button" value="load index2" onclick="run('index2')" />
    <input type="button" value="load index3" onclick="run('index3')" />
    <div id="sample1"></div>
    <script>
      function run(name) {
        const div = document.getElementById("sample1");
        if (!name) {
          div.innerHTML = "";
          return;
        }
        google.script.run
          .withSuccessHandler((html) => {
            console.log(html);
            div.innerHTML = html;
            // I added the below script.
            [...div.getElementsByTagName("script")].forEach((o) =>
              new Function(`return function(){${o.innerText}}()`)()
            );
            // or
            // [...document.getElementsByTagName("script")].forEach(o => eval(o.innerText));
          })
          .getHtml(name);
      }
    </script>
  </body>
</html>

HTML2: index2.html

Please copy and paste the following HTML as index2.html which is a HTML type.

<?!= getJavascript("index2") ?>
<div id="sample2"></div>

HTML3: index3.html

Please copy and paste the following HTML as index3.html which is a HTML type.

<?!= getJavascript("index3") ?>
<div id="sample2"></div>

HTML4: javascript.html

Please copy and paste the following HTML as javascript.html which is a HTML type.

<script>
  document.getElementById("sample2").innerHTML = "<p><?!= text ?></p>";
</script>

2. Deploy Web Apps

The detailed information can be seen in the official document.

  1. On the script editor, at the top right of the script editor, please click “click Deploy” -> “New deployment”.
  2. Please click “Select type” -> “Web App”.
  3. Please input the information about the Web App in the fields under “Deployment configuration”.
  4. Please select “Me” for “Execute as”.
  5. Please select “Anyone” for “Who has access”.
  6. Please click “Deploy” button.
  7. Copy the URL of the Web App. It’s like https://script.google.com/macros/s/###/exec. This is your Web Apps URL.

When you modify the Google Apps Script of Web Apps, please modify the deployment as a new version. By this, the modified script is reflected in Web Apps. Please be careful about this. You can see the details of this in my report “Redeploying Web Apps without Changing URL of Web Apps for new IDE (Author: me)”.

3. Testing

When this Web Apps is used, the situation as shown in the top image can be achieved. When you access your deployed Web Apps using your browser, you can see 3 buttons.

  • When you click “load index2”, “index2.html” is loaded and the Javascript including “index2.html” is executed. By this, the message “index2.html was loaded.” is shown in div.
  • When you click “load index3”, “index3.html” is loaded and the Javascript including “index3.html” is executed. By this, the message “index3.html was loaded.” is shown in div.

The important point of this method is as follows.

  1. After the initial HTML is loaded, another template HTML is loaded in the div tag.
  2. When another template HTML is loaded, the template HTML is evaluated, and the Javascript in the HTML is run and the loaded HTML is modified by the Javascript.

I believe that this method will be useful for developing Web Apps using Google Apps Script.

 Share!