Page Summary

outlined_flag

• Google Workspace add-ons use cards to build user interfaces within the host application's sidebar, offering navigation and interactive elements.

• Cards can be contextual, appearing in specific situations like opening an email, or non-contextual, like when viewing your inbox.

• Card-based interfaces are built using cards, widgets, and actions, offering a structured way to present information and controls.

• Add-ons built with Apps Script utilize the Card service, while other languages require formatted JSON for card rendering.

• These interfaces are automatically styled, responsive across devices, and require no HTML/CSS knowledge for basic creation.

Note: Google Workspace add-ons are card-based. Editor add-ons areHTML-based.

Google Workspace add-ons present information and usercontrols in the sidebar of thehost applicationUI. An add-on consists of a main identifying toolbar along with one or morecards.

Each card represents a particular 'page' of your add-on's UI, andnavigating to a new card isusually just a matter of creating that card andpushing it onto an internal card stack.You can define navigation flows between cards for a rich interaction experience.

Cards can benon-contextual orcontextual. Contextual cards are presentedto the user when the host application is in a specific context. For example,when opening a Gmail message or Calendar event. Non-contextual cards (such ashomepages) are presented to the useroutside of a specific context of the host. For example, when the user isviewing their Gmail inbox, main Drive folder, or Calendar.

Google Workspace add-ons built in Apps Script use theCard service to create user interfaces out ofcards. Add-ons built in other languagesmust return properly formatted JSON for the interface to render as cards.

Each card consists of a header and one or more card sections. Each section iscomposed of a set ofwidgets. Widgetsdisplay information to the user or provide interaction controls like buttons.

Card-based interfaces have the following benefits:

• No knowledge of HTML or CSS is needed to create card-based interfaces.
• Cards and widgets are automatically styled to work well with theGoogle Workspace applications they extend.

• Card-based interfaces work on both desktop and mobile devices, but you onlyneed to define the interface once.

  Note: Gmail is currently the only host application that can be extended byGoogle Workspace add-ons on mobile.

Creating card-based interfaces

When building card-based add-ons, it's important to understand certainconcepts and design patterns. The following guides provide the informationyou need to build effective card-based add-ons:

• Cards
• Homepages
• Widgets
• Actions
• Event objects
• Constructing cards
• Building interactive cards
• Navigating between cards
• Using universal actions
• Adding autocomplete to text inputs
• Accessing user locales and timezones
• Connecting to non-Google services
• Style guide
• Best Practices

Reference these pages when creating cards and implementingUI behavior. You may also find the following additional samples useful toreference when implementing your add-on:

• Google Workspace add-on "Cats" quickstart

  This add-on sample shows a simple Google Workspace add-on UI with multiple pages andhomepages.

• Google Workspace add-on: "Translate"

  This add-on sample shows a Google Workspace add-on that lets users translate text fromwithin Docs, Sheets, and Slides.

• Google Workspace add-on: "Teams List"

  This add-on sample shows a more complexGoogle Workspace add-on sample, that showsuser information about Gmail message recipients, Drive file editors, orCalendar event attendees. You can only use this add-on inside a domain, sinceit uses theDirectory API to retrieveuser information.