Card
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 |
---|---|---|
Border
|
Border
|
The Border
enumeration. |
Chip
|
Chip
|
The Chip
enumeration. |
Composed
|
Composed
|
The Composed
enumeration. |
Content
|
Content
|
The Content
enumeration. |
Grid
|
Grid
|
The Grid
enumeration. |
Horizontal
|
Horizontal
|
The Horizontal
enumeration. |
Icon
|
Icon
|
The Icon
enumeration. |
Image
|
Image
|
The Image
enumeration. |
Image
|
Image
|
The Image
enumeration. |
Image
|
Image
|
The Image
enumeration. |
Input
|
Input
|
The Input
enumeration. |
Load
|
Load
|
The Load
enumeration. |
On
|
On
|
The On
enumeration. |
Open
|
Open
|
The Open
enumeration. |
Selection
|
Selection
|
The Selection
enumeration. |
Text
|
Text
|
The Text
enumeration. |
Update
|
Update
|
The Update
enumeration. |
Methods
Detailed documentation
new
Action
Response
Builder()
Creates a new Action
.
Return
Action
— An empty ActionResponse builder.
new
Action
Status()
Creates a new Action
.
Only available for Google Chat apps. Not available for Google Workspace add-ons.
const actionStatus = CardService . newActionStatus () . setStatusCode ( CardService . Status . OK ) . setUserFacingMessage ( 'Success' );
Return
Action
— An empty ActionStatus.
new
Attachment()
new
Authorization
Action()
new
Authorization
Exception()
Creates a new Authorization
.
Return
Authorization
— An empty AuthorizationException.
new
Border
Style()
new
Button
Set()
new
Calendar
Event
Action
Response
Builder()
Creates a new Calendar
.
Return
Calendar
— An empty Calendar
.
new
Card
Action()
new
Card
Builder()
new
Card
Header()
new
Card
Section()
new
Card
With
Id()
Creates a new Card
. 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
Card
— An empty Card
.
new
Carousel()
Creates a Carousel
.
const carousel = CardService . newCarousel () . addCarouselCard ( CardService . newCarouselCard (). addWidget ( CardService . newTextParagraph (). setText ( 'The first text paragraph in carousel' ))) . addCarouselCard ( CardService . newCarouselCard (). addWidget ( CardService . newTextParagraph (). setText ( 'The second text paragraph in carousel' ))) . addCarouselCard ( CardService . newCarouselCard (). addWidget ( CardService . newTextParagraph (). setText ( 'The third text paragraph in carousel' )))
Return
Carousel
— An empty Carousel.
new
Carousel
Card()
Creates a new Carousel
.
const carouselCard = CardService . newCarouselCard (). addWidget ( CardService . newTextParagraph (). setText ( 'Text paragraph in carousel' ));
Return
Carousel
— An empty Chip.
new
Chat
Action
Response()
Creates a new Chat
.
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
Chat
— An empty Chat
.
new
Chat
Response
Builder()
Creates a new Chat
.
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
Chat
— An empty ChatResponseBuilder.
new
Chip()
new
Chip
List()
Creates a new Chip
.
Available for Google Chat apps. In developer preview 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
Chip
— An empty ChipList.
new
Collapse
Control()
Creates a new Collapse
.
Available for Google Chat apps. In developer preview for Google Workspace add-ons.
const collapseControl = CardService . newCollapseControl () . setHorizontalAlign ( CardService . HorizontalAlignment . START ) . setExpandButton ( CardService . newTextButton (). setText ( 'Expand' )) . setCollapseButton ( CardService . newTextButton (). setText ( 'Collapse' ));
Return
Collapse
— An empty CollapseControl.
new
Column()
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.
new
Columns()
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 ( firstColumn ) . addColumn ( secondColumn ) . setWrapStyle ( CardService . WrapStyle . WRAP );
Return
Columns
— An empty set of Columns.
new
Compose
Action
Response
Builder()
Creates a new Compose
.
Return
Compose
— An empty ComposeActionResponse builder.
new
Date
Picker()
new
Date
Time
Picker()
new
Decorated
Text()
new
Dialog()
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
new
Dialog
Action()
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 (); const dialog = CardService . newDialog (). setBody ( card ); const dialogAction = CardService . newDialogAction (). setDialog ( dialog );
Return
Dialog
— An empty Dialog
.
new
Divider()
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.
new
Drive
Items
Selected
Action
Response
Builder()
Creates a new Drive
.
Return
Drive
— An empty Drive
.
new
Editor
File
Scope
Action
Response
Builder()
Creates a new Editor
.
Return
Editor
— An empty Editor
.
new
Icon
Image()
new
Image
Button()
new
Image
Component()
new
Image
Crop
Style()
new
Link
Preview()
Creates a new Link
.
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
Link
— An empty LinkPreview.
new
Material
Icon()
Creates a new Material
.
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
Material
— An empty MaterialIcon.
new
Notification()
new
Overflow
Menu()
Creates a new Overflow
.
Available for Google Chat apps. In developer preview for Google Workspace add-ons.
const overflowMenuItem = CardService . newOverflowMenuItem (); // Finish building the overflow menu item... const overflowMenu = CardService . newOverflowMenu (). addMenuItem ( overflowMenuItem );
Return
Overflow
— An empty OverflowMenu.
new
Overflow
Menu
Item()
Creates a new Overflow
.
Available for Google Chat apps. In developer preview 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
Overflow
— An empty OverflowMenuItem.
new
Selection
Input()
new
Suggestions()
new
Suggestions
Response
Builder()
Creates a new Suggestions
.
Return
Suggestions
— An empty SuggestionsResponse builder.
new
Text
Button()
new
Text
Input()
new
Text
Paragraph()
new
Time
Picker()
new
Universal
Action
Response
Builder()
Creates a new Universal
.
Return
Universal
— An empty UniversalActionResponse builder.
new
Update
Draft
Action
Response
Builder()
Creates a new Update
.
Return
Update
— An empty UpdateDraftActionResponseBuilder.
new
Update
Draft
Bcc
Recipients
Action()
Creates a new Update
;
Return
Update
— An empty UpdateDraftBccRecipientsAction.
new
Update
Draft
Body
Action()
Creates a new Update
.
Return
Update
— An empty UpdateDraftBodyAction.
new
Update
Draft
Cc
Recipients
Action()
Creates a new Update
.
Return
Update
— An Empty UpdateDraftCcRecipientsAction.
new
Update
Draft
Subject
Action()
Creates a new Update
.
Return
Update
— An empty UpdateDraftSubjectAction.
new
Update
Draft
To
Recipients
Action()
Creates a new Update
.
Return
Update
— An empty UpdateDraftToRecipientsAction.
new
Validation()
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.