Cardbuilder NPM

Introduction

Google Workspace Add-ons feature a card-based user interface. To create these UIs, you define the desired elements within a JSON object. This JSON structure outlines the various components needed for the add-on's interface. 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 still under development. Usage in production projects is therefore at your own discretion. Here are the features we are working on:

Full CardBuilder
Full Typescript type coverage
A helper for navigating through the card stack
More icons

Using this package

Install the package with npm install cardbuilder and import it. 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();