Linking to another HTML page in Google Apps Script
When linking from ScriptDbConsole.html to legend.html I get the following error message:
Sorry, the file you have requested does not exist. Please check the address and try again.
This would normally work in a normal environment, but not here I guess. It's in script.google.com.
When creating a new .html file in script.google.com project, it creates it at the same location as it did for the others, so this code should actually work right? How can I open legend.html from ScriptDbConsole.html?
<a href='legend.html' target='_blank'>Open in new window</a>
Answer
While the HtmlService allows you to serve HTML, it is not "hosting" pages, and you cannot access the various html files in your Apps Script project by URL directly. Instead, your Web App will have a URL when it is published, and that is the only URL you have.
Here's a way that you can serve separate pages from your script, and have them behave similarly to html file links.
The doGet() function is passed an event when called, and we can take advantage of that to indicate which page we want served. If our Web App ID is <SCRIPTURL>, here is what a URL plus a querystring requesting a specific page will look like:
https://script.google.com/macros/s/<SCRIPTURL>/dev?page=my1
Using templated HTML, we can generate the necessary URL + querystring on the fly. In our doGet(), we just need to parse the querystring to determine which page to serve.
Here's the script, with two sample pages containing buttons to flip between them.
Code.gs
/**
* Get the URL for the Google Apps Script running as a WebApp.
*/
function getScriptUrl() {
var url = ScriptApp.getService().getUrl();
return url;
}
/**
* Get "home page", or a requested page.
* Expects a 'page' parameter in querystring.
*
* @param {event} e Event passed to doGet, with querystring
* @returns {String/html} Html to be served
*/
function doGet(e) {
Logger.log( Utilities.jsonStringify(e) );
if (!e.parameter.page) {
// When no specific page requested, return "home page"
return HtmlService.createTemplateFromFile('my1').evaluate();
}
// else, use page parameter to pick an html file from the script
return HtmlService.createTemplateFromFile(e.parameter['page']).evaluate();
}
my1.html
<html>
<body>
<h1>Source = my1.html</h1>
<?var url = getScriptUrl();?><a href='<?=url?>?page=my2'> <input type='button' name='button' value='my2.html'></a>
</body>
</html>
my2.html
<html>
<body>
<h1>Source = my2.html</h1>
<?var url = getScriptUrl();?><a href='<?=url?>?page=my1'> <input type='button' name='button' value='my1.html'></a>
</body>
</html>