CODEWITHSUNDEEP
google-apps-scriptevaluate
Jukebox Jory
Jukebox Jory

Reputation: 31

How can I nest Templates in GAS

I am cross-training myself from Cold Fusion to Google Apps Scripts. All was going well until I tried to call the createTemplateFromFile function nested within another of the same. Am I trying to do the impossible or can it be done.

My aim is to call:-

htmlhead.html - this just contains static html

bodystart.html - this just contains static html

mainmenu.html - this takes the user context and get/post values to show the menu at the level needed

contentswitcher.html - this takes the get/post value clicked and responds with the data or form html code needed

pagefooter.html - this responds with the page call date/time and the time taken to run

bodyandhtmlend.html - this just contains static html

Each file can contain scriptlets that either run on their own or call functions within something like the Code.gs file, so they need to be evaluated. I can write and test any of these with success. So far, I can evaluate them and output them on their own but I cannot join/concatenate them into one output page. I cannot find anything in the instructions or Q&A that suggest it is even a good/possible idea. Am I looking in the wrong place. A pointer to a different approach would be as welcome as anything.

Many thanks.

Upvotes: 1

Views: 290

Answers (2)

RedyAu
RedyAu

Reputation: 119

The most important thing here, is that you need to disable escaping HTML when nesting files, so that your formatting stays intact.

That is done like so:

<?!= notEscapedString ?>

So if you need to evaluate both parts of the template you can do it like so:

let content = HtmlService.createTemplateFromFile('content');

let baseTemplate = HtmlService.createTemplateFromFile('baseTemplate');
baseTemplate.contentString = content.evaluate().getContent();

return baseTemplate.evaluate(); // Or do whatever you like with the result

And inside baseTemplate.html just include your content like so:

<div> <!-- Or whatever your containing structure is -->
  <?!= contentString ?>
</div>

Upvotes: 0

Nikola Grujičić
Nikola Grujičić

Reputation: 187

You can copy this function into your .gs file:


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

... and create single index.html file that will contain templates. Now, you can place your templates into index.html

<!-- This goes into <head> -->
<div>
  <?!= include('htmlhead'); ?>
</div>

<!-- This goes into <body> -->
<div>
  <?!= include('bodystart'); ?>
</div>
<div>
  <?!= include('mainmenu'); ?>
</div>
<div>
  <?!= include('contentswitcher'); ?>
</div>
<div>
  <?!= include('pagefooter'); ?>
</div>
<div>
  <?!= include('bodyandhtmlend'); ?>
</div>

You can also import some JavaScript code separately, but save it in html file (not in .gs file) with regular tag.

Upvotes: 0

Related Questions