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 · Accepted Answer · 2015-04-15 18:24:26Z

3

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 <?!= ?>.

edited Apr 15, 2015 at 18:24

answered Feb 9, 2015 at 17:17

Kriggs

3,7761 gold badge19 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Carrie Over a year ago

Thanks! Looks like I have to do some review of templated HTML, but this gets it working.

Bryan P Over a year ago

why use createTemplate() instead ?

Kriggs Over a year ago

@BryanP It was suposed to be be createTemplateFromFile, ended up writing only the first two words, but had written right on the code below. Edited.

Bryan P Over a year ago

right i know FromFile was needed, but i think it's important to point out why it needed to switch away from createHtmlOutput - to enable the scriplet tags. the server function inside the those tag types, won't run when using createHtmlOutput. could not wrap my head around that difference for the longest time.

Alan Wells · Accepted Answer · 2015-02-09 17:30:54Z

1

In this line of code:

return HtmlService.createTemplateFromFile(filename).getRawContent();

createTemplateFromFile() is being used. That method is for creating the original template, but the getContent() function is not for that purpose. Use:

return HtmlService.createHtmlOutputFromFile(filename).getContent();

answered Feb 9, 2015 at 17:30

Alan Wells

31.4k16 gold badges113 silver badges164 bronze badges

1 Comment

Carrie Over a year ago

After making the change recommended in the first answer, it seems that my original code referenced in this answer works OK. Though I need to brush up on templates, your answer does make sense and so I've made this change also.

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related