5

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.

9
  • 2
    Look at the HTMLService's createTemplateFromFile: developers.google.com/apps-script/guides/html/…
    – Chris
    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
    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
    Feb 17, 2018 at 17:35
  • Can you post the portion of your code with the HTMLSevice and UI?
    – Chris
    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
    Feb 17, 2018 at 18:45

2 Answers 2

7

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.

3
  • That's almost it! It is no longer displaying the scriptlet as text. It also must be working as intended, because when I click the button, the error i get in the console is 'alert is not defined'. So it is including the second html file with my script containing the transferItems() function correctly. however, once google.script.run attempts to call the test() function, I am getting that alert.
    – Matt W
    Feb 17, 2018 at 19:12
  • I wouldn't except the alert to work as it's being called from outside the html JavaScript... But as I'm answering on my phone I can't test... I'll be home in about an hour and I can test a bit more.
    – Chris
    Feb 17, 2018 at 19:18
  • I tried it using a different function other than alert(), and it worked! Thank you so much, @Chris W. I am curious as to why the alert() function did not work though. Isn't that a standard javaScript function? Or is it because I'm calling it from within App Script and not directly in my html? -- ok you answered that already. Thanks again.
    – Matt W
    Feb 17, 2018 at 19:29
4

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.com/2018/04/15/google-apps-script-how-to-create-javascript-and-css-files-for-a-sidebar-project-in-google-apps-script/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.