Google Apps Script-templates, Javascript, CSS
So, I started working on a larger Google Sheet Sidebar project in Google Apps Script recently and I quickly realised that it was going to be a mess if I didn’t separate my Javascript, CSS and even some of my HTML into separate files. However, if you have ever noticed in the script editor that there is no way for you to add script or style files to the code. Your only two options are Google Script files *.gs
and Html files *.html
.
Then, what’s the trick?
The trick is to create separate HTML files for your CSS and Javascript and include or import them into your main HTML file. Unfortunately, you can’t do this with the standard:
HtmlService.createHtmlOutputFromFile(filename)
Instead, we will need to use the templating method:
html = HtmlService.createTemplateFromFile(filename)
We will get into a little more detail on templates later in this tutorial.
My main reference for this was the Google Apps Script UI best practice guide, and you will see code snippets of the first example there that I have modified for my own example.
The thing is, the explanations were a bit vague for me to work out clearly so I really needed to create an example of my own to work through how to use it. The example below breaks down the steps to create file relationships to make your code look neater. It also dives into some uses of template statements in HTML.
The Final Result
The goal of our little sidebar project will be to display a sidebar with coloured paragraph text, a list generated with Javascript and a randomly assigned body page the contain the text “Body 1” or “Body 2”.
Take a look at the demo: