It appears that when one uses HtmlService.createTemplateFromFile(), the html code that is in the file is just a snippet. The method packages the snippet in an html wrapper which adds things like the DTD, and html, head, and body tags to form a complete html document. The documentation (https://developers.google.com/apps-script/guides/html/) suggests that HtmlService.createHtmlOutputFromFile() works differently. It suggests that in the later case the relevant file contains the ENTIRE html code and the method does not add a wrapper. Experimentation reveals that the later works like the former in that a wrapper is added. My question is this: Is there some way to return a snippet of html code (i.e., no wrapper) from an app-script? The reason that I ask is that I would like to be able to use AJAX to insert a snippet of code from an app-script into some point in the DOM structure. Thanks for any input.
... doug
P.S. I realize it's probably going to be a separate issue; but, it would be nice if the snippet could include a scriptlet.
In general, I can think of 5 basic strategies:
Static HTML from within an Apps Script project
Static HTML from a file outside of Apps Script
Dynamic HTML created from server side code
Dynamic HTML created with JavaScript in the browser, with data retrieved from somewhere.
Retrieve HTML from some other website's page.
You want to use a scriptlet, which is dynamic HTML, triggered from the front end. If it's dynamic HTML, the HTML can be dynamically changed from Javascript in the browser, or you could formulate HTML from the server, and then return a string of HTML. I guess there are multiple strategies for how this could be done.
You can call a Google Apps Script from another website, and use Apps Script as server side code without directly returning any output to the screen. You would use Content Service to do that.
Related
This is my website, https://unrealcousinzzz.com/.
I made it in HTML, CSS, and JavaScript. I cannot use PHP or anything like that right now because I am hosting it in AWS S3, because lightsail is too expensive for me. On each page in my website, I use the same HTML code. For example, every page has code for my navbar, and code google AdSense.
If I want to change these, I would have to do it on every page right now. Is there a way to make a file that other HTML pages will read, and use that where it is placed in that page?
HTML itself doesn't have any sort of templating, but there are alternatives.
Use something on your dev machine to compile your HTML for you. I use a Node.js script and a JavaScript template engine for this. Basically, I write out my templates, run the script which generates the HTML, and then I upload it to the S3 bucket.
It doesn't have to be done with Node. You could use PHP with this same method. Or, a Bash script for that matter.
Ok, so for me google tag manager is good. I can add custom html, and it goes onto all of my pages.
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
I have signed up for Google Analytics, and it gave me code to paste on every page I want to track, so can I paste it in my .css file as I have included that file in every webpage? So, may I expect that that google analytic code is included on my every webpage?
Your google analytic code would then be interpreted as CSS, and largely discarded by browsers. Anything that isn't will be read as CSS, and thus do Fun things.
You need to toss it into its own file (probably something .js assuming it's Javascript) and include that on every page- or if it's a widget (HTML rather than just JS), you'll have to insert the widget itself onto each page.
And uh... no offense but.... Honestly surprised I managed to give this one a straight-faced answer. CSS is non-executable. Microsoft had js in it for a while (IE LTE 7 woo) but I don't believe that's been something anyone has done since due to it being too large of an attack vector and extremely lagy.
There are multiple ways to add Analytics tracking to your page, and placing the tracking code in your .css file is not one of them. The only thing that should be placed in a .css file is css.
You need to include the snippet Google provides in every page you'd like to track before the closing </head> tag. You can also use the Google Tag Manager.
This is what the official Google Analytics website says:
Paste your snippet (unaltered, in its entirety) into every web page
you want to track. Paste it immediately before the closing
tag. If you use templates to dynamically generate pages for your site
(like if you use PHP, ASP, or a similar technology), you can paste the
tracking code snippet into its own file, then include it in your page
header.
You cannot add javascript tracking code to a css file and expect it to be executed. Mixing js and css in a single css file is nothing a browser does (the closest were computed styles on Internet Explorer which had vaguely script-ish syntax). I still suspect you have meant to ask for an external javascript file, which would indeed work.
You can, however, do Google Analytics tracking via a css file.
For that you would construct a tracking url via the measurement protocol and set it for example as a background image to an element if your page
<html>
<head>
<style>
body {
background-image:url('https://www.google-analytics.com/collect?v=1&t=pageview&tid=UA-123456-1&cid=555&dp=%2Fmy%2Fdocument%2Fpath');
}
</style>
</head>
<body>
</body>
</html>
In a similar way you could do event tracking etc, just add a class with a properly formed tracking url as background image when you want the event fired.
However this comes with a few caveats:
You would need to generate all parameters, including the client id yourself and pass them dynamically to the css.
If you were to use a CSS file, you'd need to generate it dynamically with some programming language on every pageview (plus you'd need to maintain the session yourself so you get same client ids on subsequent pageviews and visits).
Usually we strive to have the CSS file cached, so the user has to download it only once. That would not work here, or you would track only one pageview per visit.
I'm sure there are even more problems with this approach and while interesting in theory it is nothing something I would recommend. But in the spirit (if not the words) of the question I thought I#d mention it.
No, css files are for css only.
However, a common approach is to create a new html file (often called default.html) with the code from Google Analytics and a link to your css. You can then include this file on every page instead of just linking to your css.
I've been struggling with this a while. My script runs from within a spreadsheet to update a site with its data formatted as HTML.
Within the script I'm using app.add(app.createHTML(values[i][j])) within a loop over the data range. I'm also appending various panels within this loop.
At the end I then find the page I want to update in the site and call page.setHtmlContent(app) which obviously doesn't work - what do I need to do here instead?
The object app is a UiApp instance, not an html content. One should consider it more as a command that tells the Google server to generate an html page using GWT toolkit so obviously (as you said) the code you tried can't work.
If you try to get the content of the shown page using something like
var htmlContent = UrlFetchApp.fetch('https://script.google.com/macros/s/AKf------Z1BBusUdHBmbWI-eqNjM/exec').getContentText();
you will see that it looks like anything but an understandable html code , plus you will meet issues with authorizations, warning messages and/or 'loading' messages...
As far as I know there is not way to capture the html content from a webapp in a form that would be compatible with the site method page.setHtml, at least not using Google Apps Script methods.
maybe some hack somewhere but not that I know...
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.