How do I include scripts in my Google Apps Script/Google Sheets HTML?

Question

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.

Look at the HTMLService's createTemplateFromFile: developers.google.com/apps-script/guides/html/… — Chris
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
Sorry, I'm on my phone right now. I'll see what I can do when I get back. — Chris
Can you post the portion of your code with the HTMLSevice and UI? — Chris
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

Chris Chris · Accepted Answer · 2018-02-17T18:57:07

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.

How do I include scripts in my Google Apps Script/Google Sheets HTML?

2 Answers