[SOLVED] Google Apps Script switching html files

Google Apps Script switching html files

I'm wondering if it is possible with google apps script to display the contents of one html file return HtmlService.createHtmlOutputFromFile('0'); , within the file have a button, and when the button is pressed it will cause the screen to erase the current information and replace itself with a second html file return HtmlService.createHtmlOutputFromFile('1'); . *note I am NOT wanting to link to a google document nor another webpage. Simply wanting to know if you can switch between html files within the same script document. If it is possible, my reasoning is to have a "menu" page that will display different topics and keep everthing in one document to be more organized.

Solution

It's possible to an extent. We will imply have a function to grab the information from an HTML file and then write it on the page. If you want to be able to navigate, then each .html file you have must have the following function in the <script></script>

function changePage(page) {
    document.open();   //should work fine without this
    document.write(page);
    document.close();  //should work fine without this
}

this bit will handle changing the content of the entire page with new content. Now we need to get that content somehow. This will be done with a function inside of a .gs file in your Google Script that looks like this

function newPage(page) {
  return HtmlService.createHtmlOutputFromFile(page).getContent()
}

Then inside of your page, whenever you want to change to a new one you need to have let's say a button:

<button onclick="google.script.run.withSuccessHandler(changePage).newPage('success')">Next Page</button>

In this case the newPage() function expects a string that will say what is the name of the html. So following the logic we will do

return HtmlService.createHtmlOutputFromFile('success').getContent()`

once we press that button and once that script finishes and returns the string of an HTML we want, we then use that to set the HTML of the current page.

Here is the full example of how it would work. You can navigate between Index.html and success.html

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

function newPage(page) {
  return HtmlService.createHtmlOutputFromFile(page).getContent()
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>

  <script>  
  function changePage(page) {
    document.open();
    document.write(page);
    document.close();
  }
  </script>

  <body>
  First Page
    <button onclick="google.script.run.withSuccessHandler(changePage).newPage('success')">Next Page</button>
  </body>
</html>

success.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>  
  <script>  
  function changePage(page) {
    document.open();
    document.write(page);
    document.close();
  }
  </script>
  <body>
    It worked!
    <button onclick="google.script.run.withSuccessHandler(changePage).newPage('Index')">First Page</button>
  </body>
</html>