'How to navigate html pages with standalone Google Apps Script?

I am using the HTMLService to create a standalone google apps script web app. I want to be able to write code to take clicks on links on the HTML page for the app and go to the pages that are in the links. Much like a regular web page, except as a Google Web App. The normal ">Click me doesn't work.

Here is what I am doing:

Code.gs

/*
 * Main function, sets up webapp ui.
 */ 
function doGet() {
    return HtmlService.createHtmlOutputFromFile('Index')
   .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

 function navigateTo(url) {
   return HtmlService.createHtmlOutputFromFile(url)
  .setSandboxMode(HtmlSerivce.SandboxMode.IFRAME);
}

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
    function handleNavigation() {
      //Logger.log("Hello from handleNavigation, within Index.html");
      google.script.run.navigateTo('EditUsers')
      document.getElementById("test").innerHTML = "Success!";
    }
  </script>
  </head>
  <body>
    <h1>Home</h1>
    This is the beginning of the Project Status Web App<br/>
    <a href="EditUsers.html">Edit Users</a><br/><button
        onclick="handleNavigation()">Button Time!</button>
    <a id="test" href="EditProjects.html">Edit Projects</a><br/>
    <a href="ViewProjectStatuses.html">View Project Statuses</a><br/>
  </body>
</html>

google-apps-script web-applications

Solution 1:^[1]

Setting up a page navigation system has multiple parts. If the HTML in a "page" is already present, then you may or may not want to get all new content from the server and inject the content again. If there is content that changes, you may want to retrieve content from the server, and inject new content. If the content in the page doesn't need to be updated, and content is already present, then all you need to do is show the page, and hide the previous page. You may want the code for the page navigation to check for all of those situations, and act accordingly.

You can get the same content from the server every time that a user navigates to a new page, and in that case, the code would be much simpler. So, it's not necessary to check for existing content every time.

If no content is in the "page" that you want to show, you will need a withSuccessHandler() to receive the new HTML from the server.

Right now you have:

google.script.run.navigateTo('EditUsers')

You need:

google.script.run
  .withSuccessHandler(injectNewHtml)
  .navigateTo('EditUsers');

function injectNewHtml() {
  //Code here to inject HTML into the new page

  //Code to show page being navigated to

  //Code to hide all other pages

};

If you want to check for existing content, you could use something like this:

var numberOfChildNodes = document
              .getElementById(elementOfPage).childNodes.length;

if (numberOfChildNodes === 0) {
  google.script.run
    .withSuccessHandler(injectNewHtml)
    .navigateTo('EditUsers');
};

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Alan Wells

'How to navigate html pages with standalone Google Apps Script?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]