Break Google Apps HTMLService Page into multiple .html files

Question

I want to combine a few related HTMLService interface in to a tabbed page. I can get the tabs working using the code here. But I want to put the page for each Tab into a different html file in the project. How would I show Billets.html inside the div below? Basically replacing "Put the Billet Locations here" with the contents of the html file. My goal is to have a Main.html file that is loaded and shows Tabs for various tasks, using different files for the contents of each Tab to better organize the Project. Iam also looking to have each item load in the most efficient manor, meaning either loaded when the tab is selected (it may never be selected by a given user) or loading it all at the onset.

<div id="tabs-2">
  <p>Put the Billet Locations App here</p>
</div>

Answer 1

Two basic strategy's would be:

• Inject all the HTML when your page first loads
• Inject HTML after the page loads, (like when the user clicks a tab)

The first strategy can be accomplished with scriptlets:

HTML Service: Templating

index.html

//include is the name of a function
<div id="tabs-2">
  <?!= include("HTML_Tab2"); ?> //HTML_Tab2 is name of HTML file
</div>

code.gs

doGet() {
  var template = HtmlService.createTemplateFromFile("index");

  return template
    .evaluate() // evaluate MUST come before setting the sandbox mode
    .setTitle("nameOfApp")
    .setSandboxMode(HtmlService.SandboxMode.IFRAME); //Also NATIVE
};

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

In order for the scriptlet to run correctly, the HtmlService method createTemplateFromFile() must be used. Because the index.html file has a scriptlet in it, it's a template.

The other option would involve making a separate google.script.run call to the server, getting the HTML, returning it, then using client side javascript to inject the HTML into that P tag.

Reference Guide- Google Documentation - Client side API

For that option, you would need to use something like a DOM property innerHTML or textContent to inject the HTML.

Documentation innerHTML - Mozilla