Google App Script

Google Workspace + JavaScript = 🎉

Dustin Tauer

dustin@frontendmasters.com

Photo Credit: Andrei Labai

Last JavaScriptMN Presentation: October 25th, 2012

  • Google Apps Script allows you to create apps that integrate with Google Workspace.
  • You write code in modern-ish JavaScript (most ES6 features supported) and have access to built-in libraries for applications like Gmail, Calendar, Drive, and more.
  • There's nothing to install—the code editor is in the browser, and scripts are saved to Google Drive and run on Google's servers (V8 runtime).

Google App Script

https://developers.google.com/apps-script/

Google App Script

Why is this cool?

JavaScript Knowledge

Power

Google App Script

Getting Started

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('My Custom Item')
	.addItem('Menu 1', 'callbackFunction1')
    .addItem('Menu 2', 'callbackFunction2')
    .addSeparator()
    .addItem('Menu 3', 'callbackFunction3')
    .addToUi()
}

Google App Script

Code Example: Creating a custom menu

// Code.gs
let template = HtmlService.createTemplateFromFile('Email-Invitation')
template.data = {workshops: data}
let html = template.evaluate().getContent()
let draft = GmailApp.createDraft(
  '', 
  `Frontend Masters Workshops`, 
  '', 
  {htmlBody: html}
);

Google App Script

Implementation & UI

// "Printing scriptlets" <?= ?> in HTML Templates
<? for(var i = 0; i < data.workshops.length; i++){ ?>
  <p><?= data.workshops[i].workshopName ?><p>                           
<? } ?>

Google App Script

Authorizing the Application

Google App Script

Demo: Generating Dynamic Gmail Drafts

Google App Script

Thank You!

Dustin Tauer

dustin@frontendmasters.com

Google App Script

By Dustin Tauer

Google App Script

  • 81