CardService provides the ability to create generic cards used across different Google extensibility products, such as Google Workspace Add-ons .
Below is a sample for an add-ons card.
function createCard() { return CardService.newCardBuilder() .setHeader(CardService.newCardHeader().setTitle('CardTitle')) .build(); }
Or you can return multiple Cards like so:
function createCards() { return [ CardService.newCardBuilder().build(), CardService.newCardBuilder().build(), CardService.newCardBuilder().build(), ]; }
The following shows how you could define a card with a header, text, an image and a menu item:
function createWidgetDemoCard () { return CardService . newCardBuilder () . setHeader ( CardService . newCardHeader () . setTitle ( ' Widget demonstration ' ) . setSubtitle ( ' Check out these widgets ' ) . setImageStyle ( CardService . ImageStyle . SQUARE ) . setImageUrl ( ' https : //www.example.com/images/headerImage.png'), ) . addSection ( CardService . newCardSection () . setHeader ( ' Simple widgets ' ) // optional . addWidget ( CardService . newTextParagraph (). setText ( ' These widgets are display - only . ' + ' A text paragraph can have multiple lines and ' + ' formatting . ' , ), ) . addWidget ( CardService . newImage (). setImageUrl ( ' https : //www.example.com/images/mapsImage.png', ), ), ) . addCardAction ( CardService . newCardAction (). setText ( ' Gmail ' ). setOpenLink ( CardService . newOpenLink (). setUrl ( ' https : //mail.google.com/mail'), ), ) . build (); }
Sample for a Chat Apps card.
const cardHeader = CardService . newCardHeader () . setTitle ( 'Sasha' ) . setSubtitle ( 'Software Engineer' ) . setImageUrl ( 'https://developers.google.com/chat/images/quickstart-app-avatar.png' , ) . setImageStyle ( CardService . ImageStyle . CIRCLE ) . setImageAltText ( 'Avatar for Sasha' ); const cardSection = CardService . newCardSection () . setHeader ( 'Contact Info' ) . setCollapsible ( true ) . setNumUncollapsibleWidgets ( 1 ) . addWidget ( CardService . newDecoratedText () . setStartIcon ( CardService . newIconImage () . setIcon ( CardService . Icon . EMAIL )) . setText ( 'sasha@example.com' ), ) . addWidget ( CardService . newDecoratedText () . setStartIcon ( CardService . newIconImage () . setIcon ( CardService . Icon . PERSON )) . setText ( '<font color="#80e27e">Online</font>' ), ) . addWidget ( CardService . newDecoratedText () . setStartIcon ( CardService . newIconImage () . setIcon ( CardService . Icon . PHONE )) . setText ( '+1 (555) 555-1234' ), ) . addWidget ( CardService . newButtonSet () . addButton ( CardService . newTextButton () . setText ( 'Share' ) . setOpenLink ( CardService . newOpenLink () . setUrl ( 'https://example.com/share' ), ), ) . addButton ( CardService . newTextButton () . setText ( 'Edit' ) . setOnClickAction ( CardService . newAction () . setFunctionName ( 'goToView' ) . setParameters ({ viewType : 'EDIT' }), ), ), ); const card = CardService . newCardBuilder () . setHeader ( cardHeader ) . addSection ( cardSection ) . build ();
Properties
Property | Type | Description |
---|---|---|
BorderType
|
BorderType
|
The BorderType
enumeration. |
ChipListLayout
|
ChipListLayout
|
The ChipListLayout
enumeration. |
ComposedEmailType
|
ComposedEmailType
|
The ComposedEmailType
enumeration. |
ContentType
|
ContentType
|
The ContentType
enumeration. |
GridItemLayout
|
GridItemLayout
|
The GridItemLayout
enumeration. |
HorizontalAlignment
|
HorizontalAlignment
|
The HorizontalAlignment
enumeration. |
Icon
|
Icon
|
The Icon
enumeration. |
ImageButtonStyle
|
ImageButtonStyle
|
The ImageButtonStyle
enumeration. |
ImageCropType
|
ImageCropType
|
The ImageCropType
enumeration. |
ImageStyle
|
ImageStyle
|
The ImageStyle
enumeration. |
InputType
|
InputType
|
The InputType
enumeration. |
LoadIndicator
|
LoadIndicator
|
The LoadIndicator
enumeration. |
OnClose
|
OnClose
|
The OnClose
enumeration. |
OpenAs
|
OpenAs
|
The OpenAs
enumeration. |
SelectionInputType
|
SelectionInputType
|
The SelectionInputType
enumeration. |
TextButtonStyle
|
TextButtonStyle
|
The TextButtonStyle
enumeration. |
UpdateDraftBodyType
|
UpdateDraftBodyType
|
The UpdateDraftBodyType
enumeration. |
Methods
Detailed documentation
newActionResponseBuilder()
Creates a new ActionResponseBuilder
.
Return
ActionResponseBuilder
— An empty ActionResponse builder.
newActionStatus()
Creates a new ActionStatus
.
Only available for Google Chat apps. Not available for Google Workspace Add-ons.
const actionStatus = CardService . newActionStatus () . setStatusCode ( CardService . Status . OK ) . setUserFacingMessage ( 'Success' );
Return
ActionStatus
— An empty ActionStatus.
newAttachment()
newAuthorizationAction()
newAuthorizationException()
Creates a new AuthorizationException
.
Return
AuthorizationException
— An empty AuthorizationException.
newBorderStyle()
newCalendarEventActionResponseBuilder()
Creates a new CalendarEventActionResponseBuilder
.
Return
CalendarEventActionResponseBuilder
— An empty CalendarEventActionResponseBuilder
.
newCardAction()
newCardBuilder()
newCardHeader()
newCardSection()
newCardWithId()
Creates a new CardWithId
. This is used to send a card in a Google Chat message. card ID
is a unique identifier for a card in a message when sending multiple cards.
Only available for Google Chat apps. Not available for Google Workspace Add-ons.
const cardSection = CardService . newCardSection (); cardSection . addWidget ( CardService . newTextParagraph () . setText ( 'This is a text paragraph widget.' ), ); const card = CardService . newCardBuilder () . setHeader ( CardService . newCardHeader () . setTitle ( 'Card title' )) . addSection ( cardSection ) . build (); const cardWithId = CardService . newCardWithId () . setCardId ( 'card_id' ) . setCard ( card );
Return
CardWithId
— An empty CardWithId
.
newChatActionResponse()
Creates a new ChatActionResponse
.
Only available for Google Chat apps. Not available for Google Workspace Add-ons.
const card = CardService . newCardBuilder () . setHeader ( CardService . newCardHeader () . setTitle ( 'Card title' )) . build (); const dialog = CardService . newDialog () . setBody ( card ); const dialogAction = CardService . newDialogAction () . setDialog ( dialog ); const chatActionResponse = CardService . newChatActionResponse () . setResponseType ( CardService . ResponseType . DIALOG ) . setDialogAction ( dialogAction );
Return
ChatActionResponse
— An empty ChatActionResponse
.
newChatResponseBuilder()
Creates a new ChatResponseBuilder
.
Only available for Google Chat apps. Not available for Google Workspace Add-ons.
const cardSection = CardService . newCardSection (); cardSection . addWidget ( CardService . newTextParagraph () . setText ( 'This is a text paragraph widget.' ), ); const card = CardService . newCardBuilder () . setHeader ( CardService . newCardHeader () . setTitle ( 'Card title' )) . addSection ( cardSection ) . build (); const cardWithId = CardService . newCardWithId () . setCardId ( 'card_id' ) . setCard ( card ); const chatResponse = CardService . newChatResponseBuilder () . addCardsV2 ( cardWithId ) . build ();
Return
ChatResponseBuilder
— An empty ChatResponseBuilder.
newChip()
newChipList()
Creates a new ChipList
.
Only available for Google Chat apps. Not available for Google Workspace Add-ons.
const chip = CardService . newChip (); // Finish building the text chip ... const chipList = CardService . newChipList () . setLayout ( CardService . ChipListLayout . WRAPPED ) . addChip ( chip );
Return
ChipList
— An empty ChipList.
newCollapseControl()
Creates a new CollapseControl
.
Only available for Google Chat apps. Not available for Google Workspace Add-ons.
const collapseControl = CardService . newCollapseControl () . setHorizontalAlign ( CardService . HorizontalAlignment . START ) . setExpandButton ( CardService . newTextButton () . setText ( 'Expand' )) . setCollapseButton ( CardService . newTextButton () . setText ( 'Collapse' ));
Return
CollapseControl
— An empty CollapseControl.
newColumn()
Creates a new Column
.
Available for Google Chat apps and Google Workspace Add-ons.
const columnWidget = CardService . newTextParagraph (); const column = CardService . newColumn () . setHorizontalSizeStyle ( CardService . HorizontalSizeStyle . FILL_AVAILABLE_SPACE ) . setHorizontalAlignment ( CardService . HorizontalAlignment . CENTER ) . setVerticalAlignment ( CardService . VerticalAlignment . CENTER ) . addWidget ( columnWidget );
Return
Column
— An empty Column.
newColumns()
Creates a new set of Columns
.
Available for Google Chat apps and Google Workspace Add-ons.
const firstColumn = CardService . newColumn () . setHorizontalSizeStyle ( CardService . HorizontalSizeStyle . FILL_AVAILABLE_SPACE ) . setHorizontalAlignment ( CardService . HorizontalAlignment . CENTER ) . setVerticalAlignment ( CardService . VerticalAlignment . CENTER ); const secondColumn = CardService . newColumn () . setHorizontalSizeStyle ( CardService . HorizontalSizeStyle . FILL_AVAILABLE_SPACE ) . setHorizontalAlignment ( CardService . HorizontalAlignment . CENTER ) . setVerticalAlignment ( CardService . VerticalAlignment . CENTER ); const columns = CardService . newColumns () . addColumn ( column ) . addColumn ( secondColumn ) . setWrapStyle ( CardService . WrapStyle . WRAP );
Return
Columns
— An empty set of Columns.
newComposeActionResponseBuilder()
Creates a new ComposeActionResponseBuilder
.
Return
ComposeActionResponseBuilder
— An empty ComposeActionResponse builder.
newDatePicker()
newDateTimePicker()
newDecoratedText()
newDialog()
Creates a new Dialog
.
Only available for Google Chat apps. Not available for Google Workspace Add-ons.
const card = CardService . newCardBuilder () . setHeader ( CardService . newCardHeader () . setTitle ( 'Card title' )) . build (); // Sets the card of the dialog . const dialog = CardService . newDialog () . setBody ( card );
Return
newDialogAction()
Creates a new DialogAction
.
Only available for Google Chat apps. Not available for Google Workspace Add-ons.
const card = CardService . newCardBuilder () . setHeader ( CardService . newCardHeader () . setTitle ( 'Card title' )) . build (); const dialog = CardService . newDialog () . setBody ( card ); const dialogAction = CardService . newDialogAction () . setDialog ( dialog );
Return
DialogAction
— An empty DialogAction
.
newDivider()
Creates a new Divider
. The following sample builds a simple card with 2 paragraphs
separated by a divider.
function buildCard () { const cardSection1TextParagraph1 = CardService . newTextParagraph () . setText ( 'Hello world!' ); const cardSection1Divider1 = CardService . newDivider (); const cardSection1TextParagraph2 = CardService . newTextParagraph () . setText ( 'Hello world!' ); const cardSection1 = CardService . newCardSection () . addWidget ( cardSection1TextParagraph1 ) . addWidget ( cardSection1Divider1 ) . addWidget ( cardSection1TextParagraph2 ); const card = CardService . newCardBuilder () . addSection ( cardSection1 ) . build (); return card ; }
Return
Divider
— A divider.
newDriveItemsSelectedActionResponseBuilder()
Creates a new DriveItemsSelectedActionResponseBuilder
.
Return
DriveItemsSelectedActionResponseBuilder
— An empty DriveItemsSelectedActionResponseBuilder
.
newEditorFileScopeActionResponseBuilder()
Creates a new EditorFileScopeActionResponseBuilder
.
Return
EditorFileScopeActionResponseBuilder
— An empty EditorFileScopeActionResponseBuilder
.
newImageButton()
newImageComponent()
newImageCropStyle()
newLinkPreview()
Creates a new LinkPreview
.
const decoratedText = CardService . newDecoratedText () . setTopLabel ( 'Hello' ) . setText ( 'Hi!' ); const cardSection = CardService . newCardSection () . addWidget ( decoratedText ); const card = CardService . newCardBuilder () . addSection ( cardSection ) . build (); const linkPreview = CardService . newLinkPreview () . setPreviewCard ( card ) . setTitle ( 'Smart chip title' );
Return
LinkPreview
— An empty LinkPreview.
newMaterialIcon()
Creates a new MaterialIcon
.
Available for Google Chat apps and Google Workspace Add-ons.
const materialIcon = CardService . newMaterialIcon () . setName ( 'check_box' ) . setFill ( true ); const cardSection = CardService . newCardSection (); cardSection . addWidget ( CardService . newDecoratedText () . setStartIcon ( CardService . newIconImage () . setMaterialIcon ( materialIcon )) . setText ( 'sasha@example.com' ), ); const card = CardService . newCardBuilder () . setHeader ( CardService . newCardHeader () . setTitle ( 'Card Title' )) . addSection ( cardSection ) . build ();
Return
MaterialIcon
— An empty MaterialIcon.
newNotification()
newOverflowMenu()
Creates a new OverflowMenu
.
Only available for Google Chat apps. Not available for Google Workspace Add-ons.
const overflowMenuItem = CardService . newOverflowMenuItem (); // Finish building the overflow menu item ... const overflowMenu = CardService . newOverflowMenu () . addMenuItem ( overflowMenuItem );
Return
OverflowMenu
— An empty OverflowMenu.
newOverflowMenuItem()
Creates a new OverflowMenuItem
.
Only available for Google Chat apps. Not available for Google Workspace Add-ons.
const overflowMenuItem = CardService . newOverflowMenuItem () . setStartIcon ( CardService . newIconImage () . setIconUrl ( 'https://www.google.com/images/branding/googleg/1x/googleg_standard_color_64dp.png' , ), ) . setText ( 'Open Link' ) . setOpenLink ( CardService . newOpenLink () . setUrl ( 'https://www.google.com' ));
Return
OverflowMenuItem
— An empty OverflowMenuItem.
newSelectionInput()
newSuggestions()
newSuggestionsResponseBuilder()
Creates a new SuggestionsResponseBuilder
.
Return
SuggestionsResponseBuilder
— An empty SuggestionsResponse builder.
newTextButton()
newTextParagraph()
newTimePicker()
newUniversalActionResponseBuilder()
Creates a new UniversalActionResponseBuilder
.
Return
UniversalActionResponseBuilder
— An empty UniversalActionResponse builder.
newUpdateDraftActionResponseBuilder()
Creates a new UpdateDraftActionResponseBuilder
.
Return
UpdateDraftActionResponseBuilder
— An empty UpdateDraftActionResponseBuilder.
newUpdateDraftBccRecipientsAction()
Creates a new UpdateDraftBccRecipientsAction
;
Return
UpdateDraftBccRecipientsAction
— An empty UpdateDraftBccRecipientsAction.
newUpdateDraftBodyAction()
Creates a new UpdateDraftBodyAction
.
Return
UpdateDraftBodyAction
— An empty UpdateDraftBodyAction.
newUpdateDraftCcRecipientsAction()
Creates a new UpdateDraftCcRecipientsAction
.
Return
UpdateDraftCcRecipientsAction
— An Empty UpdateDraftCcRecipientsAction.
newUpdateDraftSubjectAction()
Creates a new UpdateDraftSubjectAction
.
Return
UpdateDraftSubjectAction
— An empty UpdateDraftSubjectAction.
newUpdateDraftToRecipientsAction()
Creates a new UpdateDraftToRecipientsAction
.
Return
UpdateDraftToRecipientsAction
— An empty UpdateDraftToRecipientsAction.
newValidation()
Creates a new Validation
.
Available for Google Chat apps and Google Workspace Add-ons.
const validation = CardService . newValidation () . setCharacterLimit ( 5 ) . setInputType ( CardService . InputType . EMAIL );
Return
Validation
— An empty validation.