A helper library for creating Google Workspace Add-on UIs

A Zzapps project.

Introduction

Google uses a card-based UI for Workspace Add-ons. These UIs can be created by a JSON object with elements that you want in your UI. A handy tool to try all the available elements can be found here. Setting up these JSON objects by hand quickly becomes cumbersome though. For this reason, Google has offered a CardService in Apps Script to create UIs using a builder pattern.

However, if you're developing in plain Javascript or Typescript, you're out of luck. Until now. This package aims to provide full feature parity with the Apps Script builder, while adding some more useful features on top of it.

Roadmap

This project is in its early stages. Usage in production projects is therefore not recommended. Here are the features we are working on:

• Full CardBuilder
• A helper for navigating through the card stack
• More icons

Using the this package

Almost everything can be accessed from the CardService class. This class contains all the static methods to access the builders for card elements. The CardService namespace also contains all enums.

An example:

import { CardService } from 'cardbuilder'

// Create some widgets
const selectionInput = CardService.newSelectionInput()
    .setType(CardService.selectionInputType.DROPDOWN)
    .setLabel('My dropdown')
    .addItem('The default option', 'foo', true)
    .addItem('Another option', 'bar');

// Note that passing a string into this call immediately sets the text on the returned builder instance
const textParagraph = CardService.newTextParagraph('Hello world')

// Create a section and add the widgets
// Note that addWidget() can take any number of widgets as argument, but also supports chaining
const section = CardService.newCardSection().addWidget(selectionInput, textParagraph)

// Create a card and add the section
const card = CardService.newCardBuilder().addSection(section).build();

Included components and widgets

• Card
• Section
• Header
• Footer
• ImageButton
• TextButton
• ButtonList
• DateTimePicker
• SelectoinInput
• DecoratedText
• TextParagraph
• Divider

More coming soon