Reputation: 471
I'm trying to include a scriptlet in my apps script project so that I can separate html and css. When I do this, the scriptlet is printing out as plain text and the css isn't changing my html. I've included my code below!
HTML
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('css') ?>
</head>
<body>
code.gs
var ui = SpreadsheetApp.getUi();
/**
* Creates menu add on for Google sheets.
* Runs the function sendEmails
*/
function onOpen () {
ui.createMenu('Mail Merge')
.addItem('Start mail merge utility', 'sendEmails')
.addItem('Show prompt', 'myMenuPrompt')
.addToUi();
}
function onInstall(e) {
onOpen(e);
}
function myMenuPrompt(){
var html = HtmlService
.createHtmlOutputFromFile('index')
.setWidth(500)
.setHeight(370);
ui.showModalDialog(html, 'my app');
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
Upvotes: 1
Views: 1554
Reputation: 2676
Cooper answer is correct and it solves perfectly your issue, just to add on explanation and why that will make your code work.
What you lack in your code is to add the evaluate
method that will actually pre execute the script
From the official documentation page you can read what is actually happening:
function doGet() { return HtmlService .createTemplateFromFile('Index') .evaluate(); }
The function shown here generates an HtmlTemplate object from the HTML file, then calls its evaluate() method to execute the scriptlets and convert the template into an HtmlOutput object that the script can serve to the user.
Upvotes: 1
Reputation: 64062
function myMenuPrompt(){
var html = HtmlService.createTemplateFromFile('index').evaluate().setWidth(500).setHeight(370);
ui.showModalDialog(html, 'my app');
}
Upvotes: 2