Google Apps Script Web App: Can't separate out css and js code

Question

I'm trying to separate my javascript and stylesheet from the main HTML file in my Google Apps Spreadsheet script that is published as a Web App. I have seen this answer to the problem, but I cannot get this approach to work for me.

When I have my stylesheet and javascript in the main HTML file, it works fine. When I try to separate them exactly as the answer recommends, the stylesheet and javascript code is not processed and instead the line that calls 'getContent()' is displayed in my browser. It looks like getContent() is not being executed at all.

I've tried moving my code away from the Spreadsheet to a Standalone Web App but still have the same problem. Any ideas why it's not working for me? Thank you!

A bit from my Code.gs:

   function doGet() {
      var output = HtmlService.createHtmlOutputFromFile('index');
      output.setSandboxMode(HtmlService.SandboxMode.IFRAME);
      output.setTitle('Dashboard Tool');
      return output;
    }
function getContent(filename) {
  Logger.log('getContent()');  
  return HtmlService.createTemplateFromFile(filename).getRawContent();
}

index.html:

<?!= getContent("stylesheet") ?>
    <div class='header'>Dashboard</div>
    <div id=content>
Content Here
</div>
<?!= getContent("javascript") ?>

'stylesheet.html' code is surrounded by the style tag and 'javascript.html' code is surrounded by the script tag.

Kriggs Kriggs · Accepted Answer · 2015-02-09T17:17:53

You forgot evaluate() in the createHtmlOutputFromFile(), also you should use the createTemplateFromFile, as such.

var output = HtmlService.createTemplateFromFile('index').evaluate();

As @brian-p pointed out, you need the 'Template' instead of 'Output', for the evaluate occur on the scriplets <?!= ?>.

Google Apps Script Web App: Can't separate out css and js code

2 Answers