Changing HtmlOutput in Google Apps Script Web App

Question

In my Google Apps Script I have two html files, let's call them A.html and B.html. My doGet() function is this simple one:

function doGet() {    
  return HtmlService.createHtmlOutputFromFile('A').setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

It works, but I would like to redirect to the B page when clicking a button, or at least replacing the content of the HtmlOutput with the content of the B page. Is changing the content of the page through javascript manipulation the only way or is there some smarter way using the functions provided by Google?

In your situation, is this thread useful? https://stackoverflow.com/q/15668119 — Tanaike, Jul 10 '23 at 11:34
Or if not worried that you load everything in one go you could also do `function include(filename) { return HtmlService.createHtmlOutputFromFile(filename).getContent(); }` and then inside of the HTML code you slap in `!= include('B'); ?>` for `B.html` to simply have all the html files loaded up even when separated. Then just use css to hide elements and display them when the interaction is made to display them. That's how I did a menu for one of my scripts. 16 HTML files split between JS code, css and just plain webpage code — Vytautas, Jul 10 '23 at 12:39
https://stackoverflow.com/questions/15668119/linking-to-another-html-page-in-google-apps-script/55770563#55770563 — Cooper, Jul 10 '23 at 15:50

score 1 · Answer 1 · answered Jul 10 '23 at 13:53

Here is an example of using GAS to replace the contents of the HTML body. Although I am using a spreadsheet as my basis, I believe it should work with a Web App. I add a <div> to the body so as not to disturb the <script> section.

Code.gs

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

function showTest() {
  let html = HtmlService.createTemplateFromFile("HTML_Body");
  SpreadsheetApp.getUi().showModalDialog(html.evaluate(),"Test");
}

function getHtml(id) {
  let fileName = id === "buttonA" ? "HTML_B" : "HTML_A";
  let html = HtmlService.createHtmlOutputFromFile(fileName);
  return html.getContent();
}

HTML_Body.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div id="htmlBody">
      <?!= include("HTML_A"); ?>
    </div>
    <?!= include("JS_ButtonOnClick"); ?>
  </body>
</html>

HTML_A.html

<p>This is A</p>
<input id="buttonA" type="button" value="Click Me" onclick="buttonOnClick(this)">

HTML_B.html

<p>This is B</p>
<input id="buttonB" type="button" value="Click Me" onclick="buttonOnClick(this)">

JS_ButtonOnClick

<script>
  function buttonOnClick(button) {
    try {
      google.script.run.withSuccessHandler( 
        function(html) {
          document.getElementById("htmlBody").innerHTML = html;
        }
      ).getHtml(button.id);
    }
    catch(err) {
      alert(err);
    }
  }
</script>

References

Changing HtmlOutput in Google Apps Script Web App

1 Answers1