Solution 1 :

function myMenuPrompt(){
  var html = HtmlService.createTemplateFromFile('index').evaluate().setWidth(500).setHeight(370);
  ui.showModalDialog(html, 'my app');

Solution 2 :

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
      .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.

Problem :

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!

Image of Output


<!DOCTYPE html>
    <base target="_top"> 
    <?!= include('css') ?>

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')


function onInstall(e) {

function myMenuPrompt(){

  var html = HtmlService
  ui.showModalDialog(html, 'my app');


function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)


Leave a Reply

Your email address will not be published. Required fields are marked *