Google Apps Script – How to create Javascript and CSS files for a Sidebar Project in Google Apps Script

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.

Project File Types - Google Apps Script

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:

Sidebar Example - Google Apps Script

Continue reading “Google Apps Script – How to create Javascript and CSS files for a Sidebar Project in Google Apps Script”

Google Apps Script – How to Alternate Colors in an Ordered List by Column Category. 

Google Apps Script and Google Sheets

Imagine that you have a Google Sheet that you have sorted by a certain column. You might be sorting by the surname of your sales team, class sections or regions. To make the sheet easier to read for your team, you want to alternate the background colours after each category in your sort column is complete.

The Example

I have the following list of numbers in column 1 and 2. I have sorted these numbers by my Grouping Column of planets in column 3. After each grouping, I have alternated the background colour to make the transition easier to read.

Alternating color by section - Google Apps Script

The Code

Continue reading “Google Apps Script – How to Alternate Colors in an Ordered List by Column Category. “

Google Apps Script – Get the Start Row and Length of Each Category in an Ordered Column in Google Sheets

Google Apps Script and Google Sheets

Quite often I will need to get the range of each category in an item and do something with it in Google Sheets. For example, I work in education, I will often have rows of students that are categorized by class sections. I will then be asked to do something like those sections like put each section of students in their own sheet or set alternating colours for each section to make the sheet easier to read.

Alternatively, you may want to grab sales data by region or sales items by a particular category and work with them in Google Apps Script.

The Example

Let’s say we want to get the range values of the following sheet by planets. We will be categorizing our data by the Grouping, column C.

Grouping By Planet - Google Apps Script

First, we don’t want to take into account the headers on the first row. Our first grouping will be Mars, followed by Jupiter, Uranus, and Mercury. We want to know which column that each category starts on and how many of that category there are.

The Code

Continue reading “Google Apps Script – Get the Start Row and Length of Each Category in an Ordered Column in Google Sheets”

Set the Paper Size and Orientation in a Doc Using Google Apps Script

Google Apps Script: DocumentApp setPageWidth, setPageHeight

Sometimes you need to prepare a Google Doc’s paper size and orientation programmatically using Google Apps Script.

Unfortunately, you can’t just call for say, A4 in Landscape. Okay, not until now (see my code below).

Google Apps Script does provide a way to set the dimensions of your page  in the body class by using:

  • setPageWidth(pageWidth)
  • setPageHeight(pageHeight)

The page widths and heights are measured in PostScripts Points which is a bit of a pain too.

Here is an example of setting and A3 paper size in Landscape.

Ugh. What a chore. You need to find the dimensions of the paper in points.

Enter this little nifty function and your life will be so much easier:

Continue reading “Set the Paper Size and Orientation in a Doc Using Google Apps Script”

How to make multiple copies of a file with Python 3 and a file name list from an Excel sheet

Python 3, openPyXl, os,  shutil on Windows 10

The Problem

As an academic administrator, I have to prepare 70 empty grade report spreadsheets templates at the end of each academic quarter: one for each of my teachers. Each copy of the template sheet needs to be named with the teacher’s name and class number. Then the quarter, title and year is appended to the end. For example:

Stephen Hawking 404-23 Q3 Grades 2017.xlsx

The hard way would be to copy and paste a file click the file and rename it, repeating the process 70 error-prone and mind wastingly dull times.  I could also get the teachers to rename the file, but…they are teachers, not administrators so…yeah…errors again.

Python 3 to the rescue:

Continue reading “How to make multiple copies of a file with Python 3 and a file name list from an Excel sheet”