Card
以下是加購項目資訊卡的範例。
function createCard() { return CardService.newCardBuilder() .setHeader(CardService.newCardHeader().setTitle('CardTitle')) .build(); }
或者,您也可以傳回多個資訊卡,如下所示:
function createCards() { return [ CardService.newCardBuilder().build(), CardService.newCardBuilder().build(), CardService.newCardBuilder().build(), ]; }
以下說明如何定義含有標題、文字、圖片和選單項目的資訊卡:
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(); }
Chat Apps 資訊卡範例。
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();
屬性
屬性 | 類型 | 說明 |
---|---|---|
Border | Border | Border 列舉。 |
Chip | Chip | Chip 列舉。 |
Composed | Composed | Composed 列舉。 |
Content | Content | Content 列舉。 |
Grid | Grid | Grid 列舉。 |
Horizontal | Horizontal | Horizontal 列舉。 |
Icon | Icon | Icon 列舉。 |
Image | Image | Image 列舉。 |
Image | Image | Image 列舉。 |
Image | Image | Image 列舉。 |
Input | Input | Input 列舉。 |
Load | Load | Load 列舉。 |
On | On | On 列舉。 |
Open | Open | Open 列舉。 |
Selection | Selection | Selection 列舉。 |
Text | Text | Text 列舉。 |
Update | Update | Update 列舉。 |
方法
內容詳盡的說明文件
new Action Response Builder()
new Action Status()
建立新的 Action
。
僅適用於 Google Chat 應用程式。不適用於 Google Workspace 外掛程式。
const actionStatus = CardService.newActionStatus() .setStatusCode(CardService.Status.OK) .setUserFacingMessage('Success');
回攻員
Action
:空白的 ActionStatus。
new Attachment()
new Authorization Action()
new Authorization Exception()
new Border Style()
new Calendar Event Action Response Builder()
new Card Action()
new Card Builder()
new Card Header()
new Card Section()
new Card With Id()
建立新的 Card
。這項屬性可用於在 Google Chat 訊息中傳送資訊卡。當您傳送多張資訊卡時,資訊卡 ID 是訊息中資訊卡的專屬 ID。
僅適用於 Google Chat 應用程式。不適用於 Google Workspace 外掛程式。
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);
回攻員
Card
:空白 Card
。
new Chat Action Response()
建立新的 Chat
。
僅適用於 Google Chat 應用程式。不適用於 Google Workspace 外掛程式。
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);
回攻員
new Chat Response Builder()
建立新的 Chat
。
僅適用於 Google Chat 應用程式。不適用於 Google Workspace 外掛程式。
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();
回攻員
Chat
- 空白的 ChatResponseBuilder。
new Chip()
new Chip List()
new Collapse Control()
建立新的 Collapse
。
適用於 Google Chat 應用程式。在 Google Workspace 外掛程式的開發人員預覽版中。
const collapseControl = CardService.newCollapseControl() .setHorizontalAlign(CardService.HorizontalAlignment.START) .setExpandButton(CardService.newTextButton().setText('Expand')) .setCollapseButton(CardService.newTextButton().setText('Collapse'));
回攻員
Collapse
:空白的 CollapseControl。
new Column()
建立新的 Column
。
適用於 Google Chat 應用程式和 Google Workspace 外掛程式。
const columnWidget = CardService.newTextParagraph(); const column = CardService.newColumn() .setHorizontalSizeStyle( CardService.HorizontalSizeStyle.FILL_AVAILABLE_SPACE) .setHorizontalAlignment(CardService.HorizontalAlignment.CENTER) .setVerticalAlignment(CardService.VerticalAlignment.CENTER) .addWidget(columnWidget);
回攻員
Column
:空白資料欄。
new Columns()
建立新的 Columns
組合。
適用於 Google Chat 應用程式和 Google Workspace 外掛程式。
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);
回攻員
Columns
:空白的資料欄組合。
new Compose Action Response Builder()
new Date Picker()
new Date Time Picker()
new Decorated Text()
new Dialog()
new Dialog Action()
建立新的 Dialog
。
僅適用於 Google Chat 應用程式。不適用於 Google Workspace 外掛程式。
const card = CardService.newCardBuilder() .setHeader(CardService.newCardHeader().setTitle('Card title')) .build(); const dialog = CardService.newDialog().setBody(card); const dialogAction = CardService.newDialogAction().setDialog(dialog);
回攻員
new Divider()
建立新的 Divider
。以下範例會建立簡單的資訊卡,其中 2 個段落以分隔符分隔。
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; }
回攻員
Divider
:分隔符。
new Drive Items Selected Action Response Builder()
new Editor File Scope Action Response Builder()
new Image Button()
new Image Component()
new Image Crop Style()
new Link Preview()
建立新的 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');
回攻員
Link
:空白的 LinkPreview。
new Material Icon()
建立新的 Material
。
適用於 Google Chat 應用程式和 Google Workspace 外掛程式。
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();
回攻員
Material
:空白的 MaterialIcon。
new Notification()
new Overflow Menu()
建立新的 Overflow
。
適用於 Google Chat 應用程式。在 Google Workspace 外掛程式的開發人員預覽版中。
const overflowMenuItem = CardService.newOverflowMenuItem(); // Finish building the overflow menu item... const overflowMenu = CardService.newOverflowMenu().addMenuItem(overflowMenuItem);
回攻員
Overflow
:空白的 OverflowMenu。
new Overflow Menu Item()
建立新的 Overflow
。
適用於 Google Chat 應用程式。在 Google Workspace 外掛程式的開發人員預覽版中。
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'));
回攻員
Overflow
:空白的 OverflowMenuItem。
new Selection Input()
new Suggestions()
new Suggestions Response Builder()
new Text Button()
new Text Paragraph()
new Time Picker()
new Universal Action Response Builder()
建立新的 Universal
。
回攻員
Universal
:空的 UniversalActionResponse 建構工具。
new Update Draft Action Response Builder()
建立新的 Update
。
回攻員
Update
:空白的 UpdateDraftActionResponseBuilder。
new Update Draft Bcc Recipients Action()
建立新的 Update
。
回攻員
Update
- 空的 UpdateDraftBccRecipientsAction。
new Update Draft Body Action()
new Update Draft Cc Recipients Action()
建立新的 Update
。
回攻員
Update
:空白的 UpdateDraftCcRecipientsAction。
new Update Draft Subject Action()
new Update Draft To Recipients Action()
建立新的 Update
。
回攻員
Update
- 空的 UpdateDraftToRecipientsAction。
new Validation()
建立新的 Validation
。
適用於 Google Chat 應用程式和 Google Workspace 外掛程式。
const validation = CardService.newValidation().setCharacterLimit(5).setInputType( CardService.InputType.EMAIL);
回攻員
Validation
:空白驗證。