Ronnie Headen Ronnie Headen - 2 months ago 18
CSS Question

Google Apps Script - template statements to include external files not working

I'm trying to use external CSS stylesheet. However what I get is the '* include stylesheet *' rendering in my html sidebar. I created the include function in my code.gs file. Why is this not working?

Index.html

<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('stylesheet'); ?>
</head>
<body>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
</body>
</html>


Code.gs

function onOpen() {
SpreadsheetApp.getUi()
.createMenu('Form')
.addItem('Open', 'openSidebar')
.addToUi();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
function openSidebar(){
var htmlOutput = HtmlService.createHtmlOutputFromFile('Index');
htmlOutput.setTitle('Customer Inquiry Form');
SpreadsheetApp.getUi().showSidebar(htmlOutput);
}


stylesheet.html

<style>
body{
background-color:'gray';
}
</style>

Answer

At this function:

function openSidebar(){
 var htmlOutput = HtmlService.createHtmlOutputFromFile('Index');
 htmlOutput.setTitle('Customer Inquiry Form');
 SpreadsheetApp.getUi().showSidebar(htmlOutput);
}

You're using the createHtmlOutputFromFile and it will serve the content of your Index.html, but it won't execute the scriptlets inside.

In order to execute the scriptlets you need to create an HtmlTemplate and then call evaluate() method, your function should look like this:

function openSidebar(){
  var template = HtmlService.createTemplateFromFile('Index')
      .evaluate()
      .setTitle('Customer Inquiry Form')
 SpreadsheetApp.getUi().showSidebar(template);
}

Also remove the ' of the value gray in your stylesheet.html:

<style>
html{
  background-color: gray;
 }
</style>
Comments