CODEWITHSUNDEEP
google-apps-script
Chris S
Chris S

Reputation: 225

How do I implement Google Apps Script best practices using stylesheet.html?

I'm studying "HTML Service: Best Practices"

and I am wanting to bring in variables into my styles. I know how to bring them in if I put my styles in the page.html but no luck when trying to use the "HTML Service: Best Practices" example put out by Google.

my broken page.html looks like

<? var data = getData(); ?>
<?!= include('Stylesheet'); ?>

<br />
<div id="title"><?= data.myTitle ?></div>
<div id="thanksMessage">
<p><?= data.myText ?></p>
</div>
<p>More text</p>

my broken Stylesheet.html looks like

<style>
<? var data = Code.gs.getData(); ?>
@tcolor: #4D926F;
@tcolor2: <?= data.myTitleColorValue ?>;

p {
  color: #da0202;
}

#thanksMessage {
  font-size: 1.5em;
  line-height: 50%;
  color: #da0202;  
}

#title {
  font-size: 3.3em;
  line-height: 50%;
  color: <?= data.myTitleColorValue ?>;
  text-align: left;
  font-weight: bold;
  margin: 0px;
  margin-bottom: 10px;
}
</style>

My working Code.gs looks like

  function doGet(request) {
  return HtmlService.createTemplateFromFile('page')
      .evaluate();
}

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

    function getData() {
     var myValues = {}; 
     myValues["myTitleColorValue"] = "#da0202"  
     myValues["myTitle"] = "Hello Friends"  
     myValues["myText"] = "Thank-you for your help!"  
     return myValues;
    };

So I made it work by bringing the 'styles' into the page.html like this

<? var data = getData(); ?>
<style>
p {
  color: #da0202;
}

#thanksMessage {
  font-size: 1.5em;
  line-height: 50%;
  color: #da0202;  
}

#title {
  font-size: 3.3em;
  line-height: 50%;
  c/olor: #da0202;
  c/olor: @tcolor;
  color: <?= data.myTitleColorValue ?>;
  text-align: left;
  font-weight: bold;
  margin: 0px;
  margin-bottom: 10px;
}
</style>
<br />
<div id="title"><?= data.myTitle ?></div>
<div id="thanksMessage">
<p><?= data.myText ?></p>
</div>
<p>More text</p>

I am hoping someone can help me see my errors.

Regards,

Chris

Upvotes: 0

Views: 314

Answers (1)

Alan Wells
Alan Wells

Reputation: 31300

Your include() function currently looks like this:

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

I use this:

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

I'd remove the sandbox mode method, and see if that works. Actually, the sandbox method should be in your doGet() function.

I just noticed that your Stylesheet.html file has scriptlets in it. I'd put those in your main page.html file.

Upvotes: 1

Related Questions