Alternate Runtimes for Google Workspace Add-ons is coming soon. Learn more.

Card-based interfaces

8еа39680ц8 5138ц2ц823 800е90953а 1685бдфб67 8еа39680ц8 5138ц2ц823 800е90953а 1685бдфб67 8еа39680ц8 5138ц2ц823 800е90953а 1685бдфб67

Example add-on card

Add-ons present information and user controls in the sidebar of the host application UI. An add-on consists of a main identifying toolbar along with one or more cards.

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

Cards can be non-contextual or contextual. Contextual cards are presented to 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 as homepages) are presented to the user outside of a specific context of the host. For example, when the user is viewing their Gmail inbox, main Drive folder, or calendar.

Add-ons use the Apps Script Card service to create user interfaces out of cards. Each card consists of a header and one or more card sections. Each section is composed of a set of widgets. Widgets display 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 the applications they extend.
  • Card-based interfaces work on both desktop and mobile devices, but you only need to define the interface once.

Creating card-based interfaces

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

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

  • Add-on "Cats" quickstart

    This add-on sample shows a simple Add-on UI with multiple pages and homepages.

  • Add-on: "Translate"

    This add-on sample shows a Add-on that lets users translate text from within Docs, Sheets, and Slides.

  • Add-on: "Teams List"

    This add-on sample shows a more complex add-on sample, that shows user information about Gmail message recipients, Drive file editors, or Calendar event attendees. You can only use this add-on inside a domain, since it uses the Admin SDK Directory API to retrieve user information.