Changing HtmlOutput in Google Apps Script Web App [duplicate]

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? stackoverflow.com/q/15668119 — Tanaike
– Tanaike, Commented Jul 10, 2023 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
– Vytautas, Commented Jul 10, 2023 at 12:39

TheWizEd · Accepted Answer · 2023-07-10 13:53:11Z

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

Collectives™ on Stack Overflow

Changing HtmlOutput in Google Apps Script Web App [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related