Home An intuitive way of using <? syntax on any include page within a Google Apps Script projects

Questions

An intuitive way of using <? syntax on any include page within a Google Apps Script projects

November 18, 2023

Within Google Apps Script projects in general, it feels like its necessary to initialize and return HtmlService.createTemplateFromFile("<the page name>") in order to use <? on "that" given page.

Within my code.js file, is my following doGet() function. The below code allows me to use <? variable syntax on my main page labeled as mpage.html :

function doGet(e) {
  // Logger.log(e.paramter);
  var tmp = HtmlService.createTemplateFromFile("mpage");
  tmp.title = "My Custom Title";
  return tmp.evaluate();
}

That allows me to do something like this on mpage.html :

  <header>
    <p>custom header content</p>
     <h1><?= title; ?></h1>
  </header>

When I deploy my web app, I can see <h1>My Custom Title</h1> on the front-end of my app.

But if I were to also place <?!= include("page-body"); ?> on my mpage.html and have a page called page-body.html, how can I extend my doGet(e) {} function so that I can use <? variable syntax on mpage.html, and page-body.html, and also any other include file added to mpage.html?

In detail below are my files :

mpage.html

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <?!= include("page-css"); ?>
</head>

<body>

    <header>
        <p>the below variable renders successfully on the front end of my web app</p>
        <h1><?= title; ?></h1>
    </header>

    <?!= include("page-body"); ?>

    <footer>
        <p>custom footer content</p>
    </footer>

</body>
</html>

page-body.html


<main>
    <p>how can I render another variable like this, from this page?</p>
    <h3><?= other-var; ?></h3>
</main>

code.js file


function doGet(e) {
  // Logger.log(e.paramter);
  var tmp = HtmlService.createTemplateFromFile("mpage");
  tmp.title = "My Custom Title";
  return tmp.evaluate();
}

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

>Solution :

Modification points:

From your question, I thought that in your situation, it is required to use HtmlService.createTemplateFromFile in the function include.
And, I’m worried that <h3><?= other-var; ?></h3> might be modified to other variable. For example, it’s <h3><?= other_var ?></h3>.

When these points are reflected in your script, how about the following modification?

Modified script:

Google Apps Script side:

Please modify include as follows.

function include(filename) {
  if (filename == "page-body") {
    const html = HtmlService.createTemplateFromFile(filename);
    html["other_text"] = "sample text";
    return html.evaluate().getContent();
  }
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

HTML side:

Please modify page-body.html as follows.

<main>
  <p>how can I render another variable like this?</p>
  <h3><?= other_text ?></h3>
</main>

Note;

When you modified 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 detail of this in my report "Redeploying Web Apps without Changing URL of Web Apps for new IDE (Author: me)".