Class CardService

CardService

CardService 可讓您建立通用資訊卡,用於不同的 Google 可擴充性產品,例如 Google Workspace 外掛程式

以下是加購項目資訊卡的範例。

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();

屬性

屬性類型說明
BorderTypeBorderTypeBorderType 列舉。
ChipListLayoutChipListLayoutChipListLayout 列舉。
ComposedEmailTypeComposedEmailTypeComposedEmailType 列舉。
ContentTypeContentTypeContentType 列舉。
GridItemLayoutGridItemLayoutGridItemLayout 列舉。
HorizontalAlignmentHorizontalAlignmentHorizontalAlignment 列舉。
IconIconIcon 列舉。
ImageButtonStyleImageButtonStyleImageButtonStyle 列舉。
ImageCropTypeImageCropTypeImageCropType 列舉。
ImageStyleImageStyleImageStyle 列舉。
InputTypeInputTypeInputType 列舉。
LoadIndicatorLoadIndicatorLoadIndicator 列舉。
OnCloseOnCloseOnClose 列舉。
OpenAsOpenAsOpenAs 列舉。
SelectionInputTypeSelectionInputTypeSelectionInputType 列舉。
TextButtonStyleTextButtonStyleTextButtonStyle 列舉。
UpdateDraftBodyTypeUpdateDraftBodyTypeUpdateDraftBodyType 列舉。

方法

方法傳回類型簡短說明
newAction()Action建立新的 Action
newActionResponseBuilder()ActionResponseBuilder建立新的 ActionResponseBuilder
newActionStatus()ActionStatus建立新的 ActionStatus
newAttachment()Attachment建立新的 Attachment
newAuthorizationAction()AuthorizationAction建立新的 AuthorizationAction
newAuthorizationException()AuthorizationException建立新的 AuthorizationException
newBorderStyle()BorderStyle建立新的 BorderStyle
newButtonSet()ButtonSet建立新的 ButtonSet
newCalendarEventActionResponseBuilder()CalendarEventActionResponseBuilder建立新的 CalendarEventActionResponseBuilder
newCardAction()CardAction建立新的 CardAction
newCardBuilder()CardBuilder建立新的卡片建構工具。
newCardHeader()CardHeader建立新的 CardHeader
newCardSection()CardSection建立新的 CardSection
newCardWithId()CardWithId建立新的 CardWithId
newChatActionResponse()ChatActionResponse建立新的 ChatActionResponse
newChatResponseBuilder()ChatResponseBuilder建立新的 ChatResponseBuilder
newChip()Chip建立新的 Chip
newChipList()ChipList建立新的 ChipList
newCollapseControl()CollapseControl建立新的 CollapseControl
newColumn()Column建立新的 Column
newColumns()Columns建立新的 Columns 組合。
newComposeActionResponseBuilder()ComposeActionResponseBuilder建立新的 ComposeActionResponseBuilder
newDatePicker()DatePicker建立新的 DatePicker
newDateTimePicker()DateTimePicker建立新的 DateTimePicker
newDecoratedText()DecoratedText建立新的 DecoratedText
newDialog()Dialog建立新的 Dialog
newDialogAction()DialogAction建立新的 DialogAction
newDivider()Divider建立新的 Divider
newDriveItemsSelectedActionResponseBuilder()DriveItemsSelectedActionResponseBuilder建立新的 DriveItemsSelectedActionResponseBuilder
newEditorFileScopeActionResponseBuilder()EditorFileScopeActionResponseBuilder建立新的 EditorFileScopeActionResponseBuilder
newFixedFooter()FixedFooter建立新的 FixedFooter
newGrid()Grid建立新的 Grid
newGridItem()GridItem建立新的 GridItem
newIconImage()IconImage建立新的 IconImage
newImage()Image建立新的 Image
newImageButton()ImageButton建立新的 ImageButton
newImageComponent()ImageComponent建立新的 ImageComponent
newImageCropStyle()ImageCropStyle建立新的 ImageCropStyle
newKeyValue()KeyValue建立新的 KeyValue
newLinkPreview()LinkPreview建立新的 LinkPreview
newMaterialIcon()MaterialIcon建立新的 MaterialIcon
newNavigation()Navigation建立新的 Navigation
newNotification()Notification建立新的 Notification
newOpenLink()OpenLink建立新的 OpenLink
newOverflowMenu()OverflowMenu建立新的 OverflowMenu
newOverflowMenuItem()OverflowMenuItem建立新的 OverflowMenuItem
newSelectionInput()SelectionInput建立新的 SelectionInput
newSuggestions()Suggestions建立新的 Suggestions
newSuggestionsResponseBuilder()SuggestionsResponseBuilder建立新的 SuggestionsResponseBuilder
newSwitch()Switch建立新的 Switch
newTextButton()TextButton建立新的 TextButton
newTextInput()TextInput建立新的 TextInput
newTextParagraph()TextParagraph建立新的 TextParagraph
newTimePicker()TimePicker建立新的 TimePicker
newUniversalActionResponseBuilder()UniversalActionResponseBuilder建立新的 UniversalActionResponseBuilder
newUpdateDraftActionResponseBuilder()UpdateDraftActionResponseBuilder建立新的 UpdateDraftActionResponseBuilder
newUpdateDraftBccRecipientsAction()UpdateDraftBccRecipientsAction建立新的 UpdateDraftBccRecipientsAction
newUpdateDraftBodyAction()UpdateDraftBodyAction建立新的 UpdateDraftBodyAction
newUpdateDraftCcRecipientsAction()UpdateDraftCcRecipientsAction建立新的 UpdateDraftCcRecipientsAction
newUpdateDraftSubjectAction()UpdateDraftSubjectAction建立新的 UpdateDraftSubjectAction
newUpdateDraftToRecipientsAction()UpdateDraftToRecipientsAction建立新的 UpdateDraftToRecipientsAction
newValidation()Validation建立新的 Validation

內容詳盡的說明文件

newAction()

建立新的 Action

回攻員

Action - 空白動作。


newActionResponseBuilder()

建立新的 ActionResponseBuilder

回攻員

ActionResponseBuilder:空白的 ActionResponse 建構工具。


newActionStatus()

建立新的 ActionStatus

僅適用於 Google Chat 應用程式。不適用於 Google Workspace 外掛程式。

const actionStatus = CardService.newActionStatus()
                         .setStatusCode(CardService.Status.OK)
                         .setUserFacingMessage('Success');

回攻員

ActionStatus:空白的 ActionStatus。


newAttachment()

建立新的 Attachment

回攻員

Attachment:空白附件。


newAuthorizationAction()

建立新的 AuthorizationAction

回攻員

AuthorizationAction:空白的 AuthorizationAction。


newAuthorizationException()

建立新的 AuthorizationException

回攻員

AuthorizationException:空白的 AuthorizationException。


newBorderStyle()

建立新的 BorderStyle

回攻員

BorderStyle:空白的 BorderStyle。


newButtonSet()

建立新的 ButtonSet

回攻員

ButtonSet - 空的 ButtonSet。


newCalendarEventActionResponseBuilder()


newCardAction()

建立新的 CardAction

回攻員

CardAction:空白的 CardAction。


newCardBuilder()

建立新的卡片建構工具。

回攻員

CardBuilder — 空白的卡片建立工具。


newCardHeader()

建立新的 CardHeader

回攻員

CardHeader — 空白的 CardHeader。


newCardSection()

建立新的 CardSection

回攻員

CardSection:空白的 CardSection。


newCardWithId()

建立新的 CardWithId。這項屬性可用於在 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);

回攻員

CardWithId:空白 CardWithId


newChatActionResponse()

建立新的 ChatActionResponse

僅適用於 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);

回攻員

ChatActionResponse - 空白的 ChatActionResponse


newChatResponseBuilder()

建立新的 ChatResponseBuilder

僅適用於 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();

回攻員

ChatResponseBuilder - 空白的 ChatResponseBuilder。


newChip()

建立新的 Chip

僅適用於 Google Chat 應用程式。不適用於 Google Workspace 外掛程式。

const chip = CardService.newChip()
                 .setLabel('Open Link')
                 .setOpenLink(CardService.newOpenLink().setUrl(
                     'https://www.google.com'));

回攻員

Chip:空白方塊。


newChipList()

建立新的 ChipList

僅適用於 Google Chat 應用程式。不適用於 Google Workspace 外掛程式。

const chip = CardService.newChip();
// Finish building the text chip...

const chipList = CardService.newChipList()
                     .setLayout(CardService.ChipListLayout.WRAPPED)
                     .addChip(chip);

回攻員

ChipList - 空白的 ChipList。


newCollapseControl()

建立新的 CollapseControl

僅適用於 Google Chat 應用程式。不適用於 Google Workspace 外掛程式。

const collapseControl =
    CardService.newCollapseControl()
        .setHorizontalAlign(CardService.HorizontalAlignment.START)
        .setExpandButton(CardService.newTextButton().setText('Expand'))
        .setCollapseButton(CardService.newTextButton().setText('Collapse'));

回攻員

CollapseControl:空白的 CollapseControl。


newColumn()

建立新的 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:空白資料欄。


newColumns()

建立新的 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(column)
                    .addColumn(secondColumn)
                    .setWrapStyle(CardService.WrapStyle.WRAP);

回攻員

Columns:空白的資料欄組合。


newComposeActionResponseBuilder()

建立新的 ComposeActionResponseBuilder

回攻員

ComposeActionResponseBuilder:空白的 ComposeActionResponse 建構工具。


newDatePicker()

建立新的 DatePicker

回攻員

DatePicker — 空白的 DatePicker。


newDateTimePicker()

建立新的 DateTimePicker

回攻員

DateTimePicker — 空白的 DateTimePicker。


newDecoratedText()

建立新的 DecoratedText

回攻員

DecoratedText:空白的 DecoratedText。


newDialog()

建立新的 Dialog

僅適用於 Google Chat 應用程式。不適用於 Google Workspace 外掛程式。

const card = CardService.newCardBuilder()
                 .setHeader(CardService.newCardHeader().setTitle('Card title'))
                 .build();

// Sets the card of the dialog.
const dialog = CardService.newDialog().setBody(card);

回攻員

Dialog:空白 Dialog


newDialogAction()

建立新的 DialogAction

僅適用於 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);

回攻員

DialogAction:空白 DialogAction


newDivider()

建立新的 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:分隔符。


newDriveItemsSelectedActionResponseBuilder()


newEditorFileScopeActionResponseBuilder()


newFixedFooter()

建立新的 FixedFooter

回攻員

FixedFooter:空白的 FixedFooter。


newGrid()

建立新的 Grid

回攻員

Grid:空白格狀檢視畫面。


newGridItem()

建立新的 GridItem

回攻員

GridItem:空白的 GridItem。


newIconImage()

建立新的 IconImage

回攻員

IconImage:空白圖示圖片。


newImage()

建立新的 Image

回攻員

Image:空白的圖片。


newImageButton()

建立新的 ImageButton

回攻員

ImageButton:空白的 ImageButton。


newImageComponent()

建立新的 ImageComponent

回攻員

ImageComponent:空白的 ImageComponent。


newImageCropStyle()

建立新的 ImageCropStyle

回攻員

ImageCropStyle:空白的 ImageCropStyle。


newKeyValue()

建立新的 KeyValue

回攻員

KeyValue:空白的 KeyValue。


newLinkPreview()

建立新的 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');

回攻員

LinkPreview:空白的 LinkPreview。


newMaterialIcon()

建立新的 MaterialIcon

適用於 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();

回攻員

MaterialIcon - 空白的 MaterialIcon。


newNavigation()

建立新的 Navigation

回攻員

Navigation:空白的 Navigation。


newNotification()

建立新的 Notification

回攻員

Notification:空白的通知。


建立新的 OpenLink

回攻員

OpenLink:空的 OpenLink。


newOverflowMenu()

建立新的 OverflowMenu

僅適用於 Google Chat 應用程式。不適用於 Google Workspace 外掛程式。

const overflowMenuItem = CardService.newOverflowMenuItem();
// Finish building the overflow menu item...

const overflowMenu =
    CardService.newOverflowMenu().addMenuItem(overflowMenuItem);

回攻員

OverflowMenu:空白的 OverflowMenu。


newOverflowMenuItem()

建立新的 OverflowMenuItem

僅適用於 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'));

回攻員

OverflowMenuItem:空白的 OverflowMenuItem。


newSelectionInput()

建立新的 SelectionInput

回攻員

SelectionInput:空白的 SelectionInput。


newSuggestions()

建立新的 Suggestions

回攻員

Suggestions - 空白的建議。


newSuggestionsResponseBuilder()

建立新的 SuggestionsResponseBuilder

回攻員

SuggestionsResponseBuilder:空白的 SuggestionsResponse 建構工具。


newSwitch()

建立新的 Switch

回攻員

Switch - 空白的切換按鈕。


newTextButton()

建立新的 TextButton

回攻員

TextButton:空白的 TextButton。


newTextInput()

建立新的 TextInput

回攻員

TextInput — 空白的 TextInput。


newTextParagraph()

建立新的 TextParagraph

回攻員

TextParagraph - 空白的 TextParagraph。


newTimePicker()

建立新的 TimePicker

回攻員

TimePicker:空白的 TimePicker。


newUniversalActionResponseBuilder()

建立新的 UniversalActionResponseBuilder

回攻員

UniversalActionResponseBuilder:空的 UniversalActionResponse 建構工具。


newUpdateDraftActionResponseBuilder()

建立新的 UpdateDraftActionResponseBuilder

回攻員

UpdateDraftActionResponseBuilder:空白的 UpdateDraftActionResponseBuilder。


newUpdateDraftBccRecipientsAction()

建立新的 UpdateDraftBccRecipientsAction

回攻員

UpdateDraftBccRecipientsAction - 空的 UpdateDraftBccRecipientsAction。


newUpdateDraftBodyAction()

建立新的 UpdateDraftBodyAction

回攻員

UpdateDraftBodyAction:空的 UpdateDraftBodyAction。


newUpdateDraftCcRecipientsAction()

建立新的 UpdateDraftCcRecipientsAction

回攻員

UpdateDraftCcRecipientsAction:空白的 UpdateDraftCcRecipientsAction。


newUpdateDraftSubjectAction()

建立新的 UpdateDraftSubjectAction

回攻員

UpdateDraftSubjectAction - 空白的 UpdateDraftSubjectAction。


newUpdateDraftToRecipientsAction()

建立新的 UpdateDraftToRecipientsAction

回攻員

UpdateDraftToRecipientsAction:空白的 UpdateDraftToRecipientsAction。


newValidation()

建立新的 Validation

適用於 Google Chat 應用程式和 Google Workspace 外掛程式。

const validation =
    CardService.newValidation().setCharacterLimit(5).setInputType(
        CardService.InputType.EMAIL);

回攻員

Validation:空白驗證。