Tag: HtmlService

Google Apps Script: Create an HTML email reminder service from Google Sheet data.

Google Apps Script: SpreadsheetApp, Utilities, MailApp, UrlFetchApp, HtmlService, onOpen

Ever wanted a quick way to send reminders to staff, letting them know that their task is overdue?

I often have to provide Google Sheet checklists that administration team managers can crosscheck to see if their team members have complete a certain task.

Reminding staff to complete a task can be time consuming and irritating. What if you could send an email to all those staff members who haven’t completed the task with a simple click of the button?

In this tutorial, we will learn how to create a Google Apps Script HTML email mail merge service that will send an email to a staff member who has not completed their task, indicated by a missing tick on a tickbox.

We will use the sample sheet below:

the badger Google Sheet

The Google Sheets reminder is triggered by a custom menu item.  You can see it at the top right of the image.

When the reminder is sent, it collects the rows of staff that have not indicated that they have completed the task.  It then sends an email to those staff members  with the reminder below:

HTML Email Reminder Google Apps Script
Get it! Badger! Ha!

As you can see, I’ve added some custom HTML to highlight the header and modify the width of the image. The email contains a number of unique pieces of data gathered from the Google Sheet Row:

  • The name of the user.
  • The deadline.
  • The name of the sheet (In this case, Tester).
  • The number of days overdue.

It also contains a link to the check sheet for the user to update once they have completed their task.

Back at The Badger Google Sheet, an alert window appears once the code is completed and also indicates any emails that could not be sent.

To get started you can Make a Copy of the Google Sheet by following this link:

Continue reading “Google Apps Script: Create an HTML email reminder service from Google Sheet data.”

Google Apps Script – Getting Input Data From a Dialog Box in Google Sheets (Updated January 2022)

Google Apps Script, Jquery, Javascript, HTML

One of the weekly tasks in my day job as an academic administrator is to look at a number of ‘modules’ or courses that our college is running and complete some analysis and crosschecking. Each week the students complete a ‘unit’. However, during some quarters, not all modules are doing the same unit. Before I can run my code I need to determine what modules are running and what units we are up to for me to run my automated code.

To do this I created a dialogue box when the code is run from the add-on bar. In a few clicks, I can then choose the relevant modules and units and then run the selected code.

Let’s take a look at what the dialogue box looks like:

Dialog Form in Google Apps Script

Upon “Submit”, the dialogue box returns an array of objects of checked values from the radio buttons that can be used in the server-side Google Apps Script.

In this tutorial we will look at the following :

Continue reading “Google Apps Script – Getting Input Data From a Dialog Box in Google Sheets (Updated January 2022)”

Google Apps Script – Disable Enable Submit Button in Sidebar

Google Apps Script, Javascript, Jquery, HTML

I was working on a Google Apps Script project lately in Google Sheets that set up parameters in a sidebar and then ran the process once the user clicked the “Submit” button. The problem was that the process was taking a while and that “Submit” Button was ripe to be clicked multiple times by the impatient user before the server-side code could even finish its operation.

To fix this I needed to disable the submit button once it had been clicked and then enable it again once the server-side process was complete. Here, I need to:

  1. Disable the button and get the data from the client-side Javascript inside my sidebar’s HTML file.
  2. Do something awesome with it server-side.
  3. Upon the completion of the server-side awesome, call back to the HTML file and enable the button again.

The Example

I have a very simple Google Sheets Side Bar with a “Submit” and “Cancel” button. When the “Submit” button is clicked it calls the function submittington (can he get any more creative? No. No he can’t).

This function then disables the “Submit” button sends a variable to the client-side code.gs and displays it stylishly in the sheet multiple times for the users viewing pleasure. After the code.gs function is executed, it calls back to the client-side submittington function and enables the button.

Behold!!! The example:

Disable Enable Button in Sidebar Google Apps Script

Continue reading “Google Apps Script – Disable Enable Submit Button in Sidebar”

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”

How to Get Something from Google Sheets and Display it in the Sidebar in Google Apps Script (Updated January 2022)

Google Apps Script: SpreadsheetApp, getUI, HTMLservice, 

What if you want to get a value or a range from Google Sheets and show it in your sidebar using Google Apps Script?

First, you will need to get the value or range by using Google’s server-side script. Then you will have to display it client-side in your HTML document.

Documentation on getting the server-side and client-side talking nicely to each other is a little vague. Hopefully, this very basic tutorial will help clear things up.

In this tutorial, I will also be using Jquery.

Let’s get started.

Continue reading “How to Get Something from Google Sheets and Display it in the Sidebar in Google Apps Script (Updated January 2022)”