Mit dem Card
Unten sehen Sie ein Beispiel für eine Add-on-Karte.
function createCard() { return CardService.newCardBuilder() .setHeader(CardService.newCardHeader().setTitle('CardTitle')) .build(); }
Du kannst auch mehrere Karten so zurückgeben:
function createCards() { return [ CardService.newCardBuilder().build(), CardService.newCardBuilder().build(), CardService.newCardBuilder().build(), ]; }
Im Folgenden wird gezeigt, wie Sie eine Karte mit einer Überschrift, Text, einem Bild und einem Menüpunkt definieren können:
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(); }
Beispiel für eine Karte für 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();
Attribute
| Attribut | Typ | Beschreibung |
|---|---|---|
Border | Border | Die Aufzählung Border. |
Chip | Chip | Die Aufzählung Chip. |
Composed | Composed | Die Aufzählung Composed. |
Content | Content | Die Aufzählung Content. |
Grid | Grid | Die Aufzählung Grid. |
Horizontal | Horizontal | Die Aufzählung Horizontal. |
Icon | Icon | Die Aufzählung Icon. |
Image | Image | Die Aufzählung Image. |
Image | Image | Die Aufzählung Image. |
Image | Image | Die Aufzählung Image. |
Input | Input | Die Aufzählung Input. |
Load | Load | Die Aufzählung Load. |
On | On | Die Aufzählung On. |
Open | Open | Die Aufzählung Open. |
Selection | Selection | Die Aufzählung Selection. |
Text | Text | Die Aufzählung Text. |
Update | Update | Die Aufzählung Update. |
Methoden
Detaillierte Dokumentation
new Action Response Builder()
Erstellt einen neuen Action
Rückflug
Action – ein leerer ActionResponse-Builder.
new Action Status()
Erstellt einen neuen Action
Nur für Google Chat-Apps verfügbar. Nicht verfügbar für Google Workspace-Add-ons.
const actionStatus = CardService.newActionStatus() .setStatusCode(CardService.Status.OK) .setUserFacingMessage('Success');
Rückflug
Action – ein leerer ActionStatus.
new Attachment()
new Authorization Action()
Erstellt einen neuen Authorization
Rückflug
Authorization: Eine leere Autorisierungsaktion.
new Authorization Exception()
Erstellt einen neuen Authorization
Rückflug
Authorization – eine leere AuthorizationException.
new Border Style()
new Calendar Event Action Response Builder()
Erstellt einen neuen Calendar
Rückflug
Calendar – ein leeres Calendar.
new Card Action()
new Card Builder()
new Card Header()
new Card Section()
new Card With Id()
Erstellt einen neuen Card Damit wird eine Karte in einer Google Chat-Nachricht gesendet. Die Karten-ID ist eine eindeutige Kennung für eine Karte in einer Nachricht, wenn mehrere Karten gesendet werden.
Nur für Google Chat-Apps verfügbar. Nicht verfügbar für 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);
Rückflug
Card – ein leeres Card.
new Carousel()
Erstellt einen 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')))
Rückflug
Carousel – ein leeres Karussell.
new Carousel Card()
Erstellt einen neuen Carousel
const carouselCard = CardService.newCarouselCard().addWidget( CardService.newTextParagraph().setText('Text paragraph in carousel'));
Rückflug
Carousel – ein leerer Chip.
new Chat Action Response()
Erstellt einen neuen Chat
Nur für Google Chat-Apps verfügbar. Nicht verfügbar für 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);
Rückflug
Chat – ein leeres Chat.
new Chat Response Builder()
Erstellt einen neuen Chat
Nur für Google Chat-Apps verfügbar. Nicht verfügbar für 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();
Rückflug
Chat – ein leerer ChatResponseBuilder.
new Chip()
new Chip List()
Erstellt einen neuen Chip
Verfügbar für Google Chat-Apps. In der Entwicklervorschau für Google Workspace-Add-ons.
const chip = CardService.newChip(); // Finish building the text chip... const chipList = CardService.newChipList() .setLayout(CardService.ChipListLayout.WRAPPED) .addChip(chip);
Rückflug
Chip – eine leere ChipList.
new Collapse Control()
Erstellt einen neuen Collapse
Verfügbar für Google Chat-Apps. In der Entwicklervorschau für Google Workspace-Add-ons.
const collapseControl = CardService.newCollapseControl() .setHorizontalAlign(CardService.HorizontalAlignment.START) .setExpandButton(CardService.newTextButton().setText('Expand')) .setCollapseButton(CardService.newTextButton().setText('Collapse'));
Rückflug
Collapse: Eine leere CollapseControl.
new Column()
Erstellt einen neuen Column
Verfügbar für Google Chat-Apps und 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);
Rückflug
Column: Leere Spalte.
new Columns()
Erstellt einen neuen Satz von Columns.
Verfügbar für Google Chat-Apps und 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);
Rückflug
Columns: Leere Spalten.
new Compose Action Response Builder()
Erstellt einen neuen Compose
Rückflug
Compose – ein leerer ComposeActionResponse-Builder.
new Date Picker()
new Date Time Picker()
new Decorated Text()
new Dialog()
Erstellt einen neuen Dialog
Nur für Google Chat-Apps verfügbar. Nicht verfügbar für 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);
Rückflug
new Dialog Action()
Erstellt einen neuen Dialog
Nur für Google Chat-Apps verfügbar. Nicht verfügbar für 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);
Rückflug
Dialog – ein leeres Dialog.
new Divider()
Erstellt einen neuen Divider Im folgenden Beispiel wird eine einfache Karte mit zwei Absätzen erstellt, die durch eine Trennlinie voneinander getrennt sind.
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; }
Rückflug
Divider – Trennlinie
new Drive Items Selected Action Response Builder()
Erstellt einen neuen Drive
Rückflug
Drive – ein leeres Drive.
new Editor File Scope Action Response Builder()
Erstellt einen neuen Editor
Rückflug
Editor – ein leeres Editor.
new Image Button()
new Image Component()
new Image Crop Style()
new Link Preview()
Erstellt einen neuen 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');
Rückflug
Link: Eine leere Linkvorschau.
new Material Icon()
Erstellt einen neuen Material
Verfügbar für Google Chat-Apps und 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();
Rückflug
Material – ein leeres MaterialIcon
new Notification()
new Overflow Menu()
Erstellt einen neuen Overflow
Verfügbar für Google Chat-Apps. In der Entwicklervorschau für Google Workspace-Add-ons.
const overflowMenuItem = CardService.newOverflowMenuItem(); // Finish building the overflow menu item... const overflowMenu = CardService.newOverflowMenu().addMenuItem(overflowMenuItem);
Rückflug
Overflow – ein leeres Dreipunkt-Menü.
new Overflow Menu Item()
Erstellt einen neuen Overflow
Verfügbar für Google Chat-Apps. In der Entwicklervorschau für 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'));
Rückflug
Overflow: Ein leeres OverflowMenuItem.
new Selection Input()
new Suggestions()
new Suggestions Response Builder()
Erstellt einen neuen Suggestions
Rückflug
Suggestions – ein leerer SuggestionsResponse-Builder.
new Text Button()
new Text Paragraph()
new Time Picker()
new Universal Action Response Builder()
Erstellt einen neuen Universal
Rückflug
Universal – ein leerer UniversalActionResponse-Builder.
new Update Draft Action Response Builder()
Erstellt einen neuen Update
Rückflug
Update – ein leerer UpdateDraftActionResponseBuilder.
new Update Draft Bcc Recipients Action()
Erstellt eine neue Update.
Rückflug
Update: Eine leere UpdateDraftBccRecipientsAction.
new Update Draft Body Action()
Erstellt einen neuen Update
Rückflug
Update – eine leere UpdateDraftBodyAction.
new Update Draft Cc Recipients Action()
Erstellt einen neuen Update
Rückflug
Update – eine leere UpdateDraftCcRecipientsAction.
new Update Draft Subject Action()
Erstellt einen neuen Update
Rückflug
Update – eine leere UpdateDraftSubjectAction.
new Update Draft To Recipients Action()
Erstellt einen neuen Update
Rückflug
Update – eine leere UpdateDraftToRecipientsAction.
new Validation()
Erstellt einen neuen Validation
Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.
const validation = CardService.newValidation().setCharacterLimit(5).setInputType( CardService.InputType.EMAIL);
Rückflug
Validation – eine leere Validierung.