Serve up different HTML pages from same script?

Question

I am trying to have a single GAS project that changes its UI by serving up different HTML pages based on what the user clicks. I cannot figure out how to serve up different HTML from the script, replace the current browser page and retain state. Any help appreciated. Thank you.

Cooper · Answer 1 · 2017-02-24T17:11:56.483

With google.script.run you can run any script on the server from the html page. By communicating with the server you have access to PropertiesService which gives you the capability to store information between pages. Personally I like the HTML Service createHtmlOutput(html) because I can edit the html without having to edit a separate page.

I decided to answer your question here so that I could use the code section.

Question:

I am actually looking to avoid manipulating the HTML and serve up a completely different HTML file stored in the project. How do I make the page call the script again and replace itself with the new content?

We I'm guessing that completely replacing the page is not really what you want because the user will suffer a page refresh. But you could create divs like this:

<style>#R01{display:none;}</style>
<div class="replaceable" id="R01"></div>

If you put all your replaceable content in divs like that then you can request content from the server via calls like this:

google.script.run
    .withSuccessHandler(updateConversation)
    .withFailureHandler(showStatus)
    .getConversation();

and put the new content into the appropriate divs and then change the css with another pair and turn the old content off and the new content on. Thereby avoiding a page refresh. Don't forget to save the old data into the PropertiesService first. So I don't think changing the entire page is the way to go but I could be wrong. I think just changing some of the internal content will avoid the need for a total page refresh. If you want to change images you can avoid another download by using CSS Sprites

Yes, thanks. That's a good idea about the PropertiesService. I am actually looking to avoid manipulating the HTML and serve up a completely different HTML file stored in the project. How do I make the page call the script again and replace itself with the new content? Thank you. — skyser5, Feb 24 '17 at 13:48
I added an answer to your question in the answer section above as it's a little nicer since I can use the code sections. Thanks — Cooper, Feb 24 '17 at 17:13

score 0 · Answer 2 · edited May 23 '17 at 11:46

I use two options:

Have a main page which has buttons or text areas with onchange set to a function which calls back to the server side and gets new page data, then replace the current page or a portion of the page, with the new page.
Pass parameters in the URL and have the server side doGet() parse the parameters and branch to load a given page based on these values.

I have used a combination of both of these effectively. Basically I have a div which has my "menu" and a div which is the section to be replaced. My menu changes and then data is sent back to the server to get the dynamic body. The HTML is returned and then I replace using innerHTML.

In the same code I offer the ability to pass menu values via the published URL. This allows me to go directly to some values if I so choose as I have a Google Site where we embed the script into pages and the menu selections may be specific to that page. It allows us to use an iFrame to show the web app and go directly to the pertinent interface.

Serve up different HTML pages from same script?

2 Answers2