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.
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.
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
Related
I'm building a single page application using AngularJS. I want it to have a master detail appearance. Where there is a list on the side and a main view on the rest of the page showing the information for that list element.
I was wondering whether the correct way to approach this would be to use ng-route? Using ng-route I presume that I would have a url such as '/:elem' and a template url which then would display the information for that element using routeParams.
I'm having a bit of trouble just working out how all the server calls work. I have separate services for the API and the UI. So are the server calls like this:
The user navigates to my webpage and all the .html files are returned, including the template html files, but with no data apart from just the list of elements.
When the user clicks one of the elements, then another call is done to the server to retrieve the data for that element.
Thank you.
I see in Javascript; Sending user to another page and how to change page from within javascript references to using the window.location to switch to a new page. It is also possible to have a similar result by including a meta tag http-equiv with a refresh value.
While these work as advertised, I need something that will continue to retry in the event the host application is not available at the time the client starts up.
A cross-browser solution would be particularly appreciated.
Update:
My current solution does as suggested. Initial AJAX to verify connectivity, followed by an update of the window.location. My concern is exactly the one given - the status can change between getting the response and updating the page reference.
I could update a lower level element body.innerHtml, for example, in the page body, but prefer to change the top level element to cleanly switch over to the new page.
The purpose of the initial page is just to bootstrap a long running application that similarly uses an AJAX loop to fetch updates of both content and periodic page refreshes. The intent is to be able to drop off web display panels and have them automatically configure themselves when they are eventually connected to a network.
I have a form that I have implemented using HtmlService. When I submit it I want to see different Html page instead of the page with the form on it. Basically this new page should replace the form page. How do I go about doing this. I tried to create a template form from the process form function that gets called when the form is submitted. But it didn't work. Help me out with this please.
See this answer for an example of serving multiple html pages using HtmlService. The basic idea is to write doGet() to accept a query parameter that it will use to select which html page to serve.
I am not aware of any server-side redirect mechanism (that you could use in the template, that is). However, one way how to do it is via Ajax, client-side. See, for example, how I did it in VALET (open index.html and look from line 240 on).
As an aside: I also tried reloading a page which seemed not to work (maybe due to the restrictions re the window and document object.
You can use doPost() with HTML Services to load another html page.
See this answer.
I have been reading the dev guide but haven't been able to work out how to put my own codes into webpages
I know it is possible because AVG uses it (in it's link scanner), and FastestChrome extension uses it too (highlight something and a link to a search pops up).
I have a backgrounded page but I can't get it to effect the webpages I go on (permissions are correct as I can get css to effect)
I am probably missing something really simple :/
It's not intuitively presented in the documentation but your background page can not access the current webpage b/c they are in different contexts. In other words the background page is it's own separate page so it has no access to any other page's DOM.
If you want to affect the page the user is viewing in the browser you will need to use what is referred to as a "content script".
If you want to communicate between content scripts and the background page you will need to refer to the message passing API. Check out my extension's source code for reference. I do exactly that.
Just remember...
Background Page: used for general logic in your extension, not anything page specific.
Content Scripts: are loaded into every page the user sees, and can manipulate that specific page.
Those probably use Content Scripts to inject Javascript into webpages. These scripts run in the context of the web pages and can access the DOM.
You can either define a script to always run in a web page by declaring the script file in the extension manifest, or you can use your background page to inject a script when needed.
I have been trying to locate an example of remote Javascript execution from a local HTML 'a' tag. This is not going to be a malicious execution. On my index page, I use Javascript to hide divs and bring a single div to the front - in order to have multiple pages on one (in a nutshell). I typically do this using the following example snippet:
About Us
However, on a different PHP/HTML page on the same site, I would like to have links that will execute the Javascript in the same fashion, only after pushing the browser to the new HTTP request. For example, in my inept-thinking, I would expect it to work like this:
About Us
This was a failure - as my Firefox renders the hyperlink as plaintext, and not clickable. I've scoured Google and this site for info, but found no examples. I would appreciate any feedback.
Thanks.
My understanding is that you want to invoke the same JavaScript function in multiple pages. How about using the script src tag as follows:
<script src="../common.js"></script>
I believe the src attribute can be a remote js file, but haven't tested it out.
Therefore, no matter what page you want to use the JavaScript to show the about us footer, you can have the same link:
About Us
So... you want to have the browser navigate to http://samedomain.com and then execute javascript:footerAbout()?
How about passing an argument as part of the address? Something to the effect of:
http://samedomain.com&show=footerAbout
http://samedomain.com#footerAbout
Then reading the URL in your destination page and letting the destination execute footerAbout()?