Google App Script include css from another file

Question

I'm trying out Google app scripts for the first time and I'm having a nightmare trying to get it to read my Stylesheet. I've read dozens of pages and they all say the same thing, but it just doesn't work.

This is my code.gs :-

return HtmlService.createHtmlOutputFromFile('index');

}


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

This is my index.html

<!DOCTYPE html>
 <html>
  <head>
    <base target="_top">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
    Hello!!!!<br>
    This is a test to see how Google scripts work<br>
  </body>
</html>

This is my Stylesheet

<style>
html{
min-height:100%;
background-color:blue;
}

</style>

If I put the style tags inside the index file, it works fine, but when I try to include it, the include script just gets added to my page. I've tried using createTemplateFromFile as well, but it has the same result. It seems like index.html is ignoring the script identifier <?!

Please could someone tell me what I'm doing wrong as every page I've looked at says to do it this way!!!!!

Thanks

Does this answer your question? Google Apps Script - HTML service "createTemplateFromFile" not usable from within App (spreadsheet, etc.)? — 0Valt
– 0Valt, Commented Jun 24, 2020 at 16:48

Steffen Andersland · Accepted Answer · 2020-06-24 16:46:21Z

3

I assume it could be because your are not calling .evaluate()

return HtmlService.createTemplateFromFile('index').evaluate();

https://developers.google.com/apps-script/guides/html/best-practices#code.gs

edited Jun 24, 2020 at 16:46

answered Jun 24, 2020 at 15:22

Steffen Andersland

6296 silver badges8 bronze badges

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

1 Comment

Steffen Andersland Over a year ago

You're right! I edited my answer. Either way, the documentation linked should light the way

Maulik Pipaliya Joyy · Accepted Answer · 2022-03-17 05:21:14Z

0

Seems like it's been missed to add evaluate() function.

As per the HTML Service: Templated HTML , one should be using particular scriptlet as per the requirement.

I'd recommend a generalized solution like below:

function include(fileName, params) {
    return render(fileName, params).getContent();
}

function render(path, params) {
    let htmlBody = HtmlService.createTemplateFromFile(path);
    
    // for prop drilling
    htmlBody.allParams = {};
    
    if (params) {
        htmlBody.allParams = params;
        Object.keys(params).forEach(key => {
            htmlBody[key] = params[key];
        });
    }
    return htmlBody.evaluate();
}

answered Mar 17, 2022 at 5:21

Maulik Pipaliya Joyy

3444 silver badges14 bronze badges

Collectives™ on Stack Overflow

Google App Script include css from another file

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related