I cannot get my Apps Script-based HTML to include any scripts.

My doGet function for the HtmlService works fine:

function doGet() {
return HtmlService.createHtmlOutputFromFile('myhtmlfilename');
}

I seem to get the following whether or not I have any script tags on my HTML file:

errors

I have tried storing all of my JavaScript in a separate HTML file with tags (called JavaScript.html) and then including them back into my HTML using force print scriptlets.

My HTML file containing my script tags:

<script>
function transferItems(){
google.script.run.test();
}

</script>

My function to include the script HTML as a scriptlet, which I have also tried as 'getRawContent' instead of 'evaluate':

function include(filename) {
return HtmlService.createTemplateFromFile(filename).evaluate().getContent();
}

My scriptlet:

<?!= include('JavaScript'); ?>

My function in my code.gs, called test():

function test() {
alert("This is a test."); 
}

My button in my main HTML page through which I am trying to call the test() function:

<button onClick="transferItems()">Transfer</button>

No matter what I try my page ends up displaying those scriptlets as text in the browser.

displayed result

What am I missing?

All of the answers and tutorials I have read are from 2015ish or earlier. I feel like I am following Google's documentation.

I cannot get my Apps Script-based HTML to include any scripts.

My doGet function for the HtmlService works fine:

function doGet() {
return HtmlService.createHtmlOutputFromFile('myhtmlfilename');
}

I seem to get the following whether or not I have any script tags on my HTML file:

errors

I have tried storing all of my JavaScript in a separate HTML file with tags (called JavaScript.html) and then including them back into my HTML using force print scriptlets.

My HTML file containing my script tags:

<script>
function transferItems(){
google.script.run.test();
}

</script>

My function to include the script HTML as a scriptlet, which I have also tried as 'getRawContent' instead of 'evaluate':

function include(filename) {
return HtmlService.createTemplateFromFile(filename).evaluate().getContent();
}

My scriptlet:

<?!= include('JavaScript'); ?>

My function in my code.gs, called test():

function test() {
alert("This is a test."); 
}

My button in my main HTML page through which I am trying to call the test() function:

<button onClick="transferItems()">Transfer</button>

No matter what I try my page ends up displaying those scriptlets as text in the browser.

displayed result

What am I missing?

All of the answers and tutorials I have read are from 2015ish or earlier. I feel like I am following Google's documentation.

• javascript
• html
• google-apps-script
• google-sheets

• 2 Look at the HTMLService's createTemplateFromFile: developers.google./apps-script/guides/html/… – Chris Commented Feb 17, 2018 at 17:14
• Thank you for responding, Chris. I did read that article before I posted my question. I must be implementing it incorrectly, but I can't figure out what I am doing wrong. – Matt W Commented Feb 17, 2018 at 17:30
• Sorry, I'm on my phone right now. I'll see what I can do when I get back. – Chris Commented Feb 17, 2018 at 17:35
• Can you post the portion of your code with the HTMLSevice and UI? – Chris Commented Feb 17, 2018 at 18:11
• Chris, thank you for your time in looking at this. I edited my post to include more information. Not sure if it's everything you need. – Matt W Commented Feb 17, 2018 at 18:45

2 Answers 2

If you have the <?...?> scriptlets in your HTML file when you evaluate with the HTMLService you need to use createTemplateFromFile() otherwise they will be treated as plain text. The createOutputFromFile() won't work for evaluating the script tags.

function doGet() {
 return HtmlService.createTemplateFromFile('myhtmlfilename').evaluate();
}

EDIT: Your include doesn't need to evaluate those <? ?> scriptlets. So it just needs the be like this:

function include(filename) { 
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

Using my phone to answer so the code might not be perfect.

The accepted answer worked for me but I also wanted to add that you can perform the include logic inline in the template rather than making a separate include() function. For example ...

<html>
<head>
    <?!= HtmlService.createHtmlOutputFromFile('ClientScript').getContent(); ?>
</head>

The only issue I've had is the editor doesn't work as well with JavaScript in HTML; I was really hoping I could use this method to include .gs files to re-use functionality between the client and server.

Here's a page for reference which explains separating out CSS and JavaScript files using this method: https://yagisanatode./2018/04/15/google-apps-script-how-to-create-javascript-and-css-files-for-a-sidebar-project-in-google-apps-script/