Category: HtmlService

Google Apps Script: Store a Unique User Key from a User Accessing your WebApp [updated Dec 2021]

Google Apps Script: WebApp [updated Dec 2021 – With thanks to Greg S]

In this tutorial, we will cover how you can get a unique temporary access key from a user accessing your WebApp that lasts for 30 days.

Temporary access keys allow you to track users as they use your WebApp over time while still providing anonymity to the user by providing only an access key to that user. Rather than, say, use their name or email address.

Why is this important? Well, you might want to limit the number of times a user submits a form on your WebApp. If you can get a user’s access key unique to them then you can store the number of attempts by the user and check it before the data is submitted.

For example, in a previous post, we created a chain story that we might want to limit the number of times our users contribute to our story to once a day.

NOTE! This tutorial is pretty much standalone. However, it will require some basic knowledge of Google Apps Script WebApp and HTML. Don’t worry if some basic setup parts are not covered in this tutorial, I’ll link to how to do these bits if you need some more instruction.

Let’s take a look at what we are going to make:

Continue reading “Google Apps Script: Store a Unique User Key from a User Accessing your WebApp [updated Dec 2021]”

Google Apps Script: How to create a basic interactive interface with Web Apps

Google Apps Script: Web Apps

Did you know that you can easily create an interactive webpage web app that you can embed in your own website or your Google Workspace domain for internal use with your organisation with Google Apps Script?

Perhaps you want to create a small online app using resources you have in your Google workspace, like Google Sheets or BigQuery.

Maybe the functionality of Google Forms is not enough and you want to build a custom form for something like a seat booking form with a way for users to register a bunch of participants and immediately see if there are seats available. Or create a form where each answer creates a new set of questions that you want to add to a Google Sheet in our own way.

What if you wanted to road test a new app idea and want to use the development speed of Google Apps Script to get a proof of concept up and running in a flash?

Fortunately for you, Google Apps Script has you covered with the ability to deploy Web Apps.

Even if you have been working in the Google Apps Script environment for a while, getting started on Web Apps can be a bit of a daunting task. It’s just that little bit different that it can make you apprehensive at first. However, let me tell you that once you master the few basics, you will be smashing out Web Apps in no time.

In this tutorial, we will go over the very basics of creating your very first Web App. Don’t worry it will be a little bit more useful and interactive than a “Hello World” app. We will get the user to enter a value client-side. Then send it server-side for calculation and then return it back for display client-side.

Let’s take a look at what we are going to build:

Continue reading “Google Apps Script: How to create a basic interactive interface with Web Apps”

Google Apps Script: Google Standard Color Palette Picker for Sidebar and Dialog Boxes in Google Sheets, Google Docs and Google Slides (Updated Feb 2022)

Google Apps Script: Dev Tools, Color Picker, Side Bar, Custom Prompt, HtmlService, onOpen, Sidebar, Dialog Box

I wanted to update one of my free Google Add-on apps that works with colour. What I had is just the standard HTML color input element where the user selects from the palette and that hexadecimal colour code is returned to Google Apps Script to be used in the App. The problem is that it is really hard to get a good colour match between the palette and Google’s own colour range that is accessible from the fill or text colour buttons.

Take a look at the comparison between the HTML color input element and the Google Sheet background colour palette in the image below.

Color input vs google sheet palette colours

That’s not a user-friendly tool to match colours with the standard Google palette.

So in the back of my mind, I had always wanted to create a tool for a sidebar or dialogue box that would allow the user to easily access the standard colours or use the custom palette provided by the HTML color input.

After finding a bit of time in my recent summer break I came up with this.

Google Color array picker

And this is how it looks in action:

(Note: add-ons has been updated to Extensions)

Continue reading “Google Apps Script: Google Standard Color Palette Picker for Sidebar and Dialog Boxes in Google Sheets, Google Docs and Google Slides (Updated Feb 2022)”

Google Apps Scripts: Create Time Triggers to automatically send email task reminders from a Google Sheets check list

Google Apps Script: Time Triggers, ClockTriggerBuilder, ScriptApp

One of the most powerful things about Google Apps Script is the ability to automatically complete tasks with time-driven triggers. You can set up your code to run any one of your functions in your script by the minute, hour, day, week, or month. You can even set it to run based on a specific date.

Have a look at the time-driven trigger options below:

    • Specific Date and Time: Based on: YYYY-MM-DD HH: MM format
    • Minute: Every minute or every 5, 10, 15 or 30 minutes.
    • Hour: Every hour or every 2, 4, 6, 8 or 12 hours.
    • Day: At a time within an hourly bracket. For example:
      • Midnight to 1 am,
      • 3 pm to 4 pm
  • Month: On a specific day of a calendar month at a specific time. For example:
      • Every 3 day of the month at between 3 am and 4 am.

There are two approaches to setting up these time-based triggers. The first one is by simply using the Trigger creator inside the G Suite Developer Hub. This allows you to select the function that you want to add a trigger to for your project and fill out a simple form to determine when you want your trigger to run.

Gsuite Developer hub time trigger

Alternatively, you can create a time trigger programmatically using the ClockTriggerBuilder class.

In this tutorial, we will build on a previous project we’ve called The Badger, that contains a task check off Google Sheet. If the user does not check off their sheet by the due date, then we can send them an HTML email reminder.

Google Apps Script email remind from Google Sheet The Badger 2

Don’t worry, I will provide the starter code and the Google Sheet for you in a minute. However, if you want to learn how I created the email reminder for The Badger you can follow the tutorial here:

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

If you want to see how I created the Spreadsheet, you can check out this link:

Google Sheets: How to create a task completion check sheet.

Setting Up

Continue reading “Google Apps Scripts: Create Time Triggers to automatically send email task reminders from a Google Sheets check list”

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