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