O Card
Confira abaixo um exemplo de card de complementos.
function createCard() { return CardService.newCardBuilder() .setHeader(CardService.newCardHeader().setTitle('CardTitle')) .build(); }
Ou você pode retornar vários cards assim:
function createCards() { return [ CardService.newCardBuilder().build(), CardService.newCardBuilder().build(), CardService.newCardBuilder().build(), ]; }
Confira a seguir como definir um card com um cabeçalho, texto, uma imagem e um item de menu:
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(); }
Exemplo de card de app de chat.
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();
Propriedades
| Propriedade | Tipo | Descrição |
|---|---|---|
Border | Border | A enumeração Border. |
Chip | Chip | A enumeração Chip. |
Composed | Composed | A enumeração Composed. |
Content | Content | A enumeração Content. |
Grid | Grid | A enumeração Grid. |
Horizontal | Horizontal | A enumeração Horizontal. |
Icon | Icon | A enumeração Icon. |
Image | Image | A enumeração Image. |
Image | Image | A enumeração Image. |
Image | Image | A enumeração Image. |
Input | Input | A enumeração Input. |
Load | Load | A enumeração Load. |
On | On | A enumeração On. |
Open | Open | A enumeração Open. |
Selection | Selection | A enumeração Selection. |
Text | Text | A enumeração Text. |
Update | Update | A enumeração Update. |
Métodos
Documentação detalhada
new Action Response Builder()
Crie um novo Action.
Retornar
Action: um builder de ActionResponse vazio.
new Action Status()
Crie um novo Action.
Disponível apenas para apps do Google Chat. Não disponível para complementos do Google Workspace.
const actionStatus = CardService.newActionStatus() .setStatusCode(CardService.Status.OK) .setUserFacingMessage('Success');
Retornar
Action: um ActionStatus vazio.
new Attachment()
new Authorization Action()
new Authorization Exception()
Crie um novo Authorization.
Retornar
Authorization: uma AuthorizationException vazia.
new Border Style()
new Calendar Event Action Response Builder()
Crie um novo Calendar.
Retornar
Calendar: um Calendar vazio.
new Card Action()
new Card Builder()
new Card Header()
new Card Section()
new Card With Id()
Crie um novo Card. É usado para enviar um card em uma mensagem do Google Chat. O ID do card
é um identificador exclusivo de um card em uma mensagem ao enviar vários cards.
Disponível apenas para apps do Google Chat. Não disponível para complementos do 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);
Retornar
Card: um Card vazio.
new Carousel()
Cria uma 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')))
Retornar
Carousel: um carrossel vazio.
new Carousel Card()
Crie um novo Carousel.
const carouselCard = CardService.newCarouselCard().addWidget( CardService.newTextParagraph().setText('Text paragraph in carousel'));
Retornar
Carousel: um ícone vazio.
new Chat Action Response()
Crie um novo Chat.
Disponível apenas para apps do Google Chat. Não disponível para complementos do 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);
Retornar
Chat: um Chat vazio.
new Chat Response Builder()
Crie um novo Chat.
Disponível apenas para apps do Google Chat. Não disponível para complementos do 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();
Retornar
Chat: um ChatResponseBuilder vazio.
new Chip()
new Chip List()
Crie um novo Chip.
Disponível para apps do Google Chat. Na prévia para desenvolvedores dos complementos do Google Workspace.
const chip = CardService.newChip(); // Finish building the text chip... const chipList = CardService.newChipList() .setLayout(CardService.ChipListLayout.WRAPPED) .addChip(chip);
Retornar
Chip: uma ChipList vazia.
new Collapse Control()
Crie um novo Collapse.
Disponível para apps do Google Chat. Na prévia para desenvolvedores dos complementos do Google Workspace.
const collapseControl = CardService.newCollapseControl() .setHorizontalAlign(CardService.HorizontalAlignment.START) .setExpandButton(CardService.newTextButton().setText('Expand')) .setCollapseButton(CardService.newTextButton().setText('Collapse'));
Retornar
Collapse: um CollapseControl vazio.
new Column()
Crie um novo Column.
Disponível para apps do Google Chat e complementos do 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);
Retornar
Column: uma coluna vazia.
new Columns()
Cria um novo conjunto de Columns.
Disponível para apps do Google Chat e complementos do 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);
Retornar
Columns: um conjunto vazio de colunas.
new Compose Action Response Builder()
Crie um novo Compose.
Retornar
Compose: um builder ComposeActionResponse vazio.
new Date Picker()
new Date Time Picker()
new Decorated Text()
new Dialog()
Crie um novo Dialog.
Disponível apenas para apps do Google Chat. Não disponível para complementos do 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);
Retornar
new Dialog Action()
Crie um novo Dialog.
Disponível apenas para apps do Google Chat. Não disponível para complementos do 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);
Retornar
Dialog: um Dialog vazio.
new Divider()
Crie um novo Divider. O exemplo a seguir cria um card simples com dois parágrafos
separados por um divisor.
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; }
Retornar
Divider: um divisor.
new Drive Items Selected Action Response Builder()
Crie um novo Drive.
Retornar
Drive: um Drive vazio.
new Editor File Scope Action Response Builder()
Crie um novo Editor.
Retornar
Editor: um Editor vazio.
new Image Button()
new Image Component()
new Image Crop Style()
new Link Preview()
Crie um novo 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');
Retornar
Link: uma LinkPreview vazia.
new Material Icon()
Crie um novo Material.
Disponível para apps do Google Chat e complementos do 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();
Retornar
Material: um MaterialIcon vazio.
new Notification()
new Overflow Menu()
Crie um novo Overflow.
Disponível para apps do Google Chat. Na prévia para desenvolvedores dos complementos do Google Workspace.
const overflowMenuItem = CardService.newOverflowMenuItem(); // Finish building the overflow menu item... const overflowMenu = CardService.newOverflowMenu().addMenuItem(overflowMenuItem);
Retornar
Overflow: um OverflowMenu vazio.
new Overflow Menu Item()
Crie um novo Overflow.
Disponível para apps do Google Chat. Na prévia para desenvolvedores dos complementos do 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'));
Retornar
Overflow: um OverflowMenuItem vazio.
new Selection Input()
new Suggestions()
new Suggestions Response Builder()
Crie um novo Suggestions.
Retornar
Suggestions: um builder SuggestionsResponse vazio.
new Text Button()
new Text Paragraph()
new Time Picker()
new Universal Action Response Builder()
Crie um novo Universal.
Retornar
Universal: um builder UniversalActionResponse vazio.
new Update Draft Action Response Builder()
Crie um novo Update.
Retornar
Update: um UpdateDraftActionResponseBuilder vazio.
new Update Draft Bcc Recipients Action()
Cria um novo Update.
Retornar
Update: uma UpdateDraftBccRecipientsAction vazia.
new Update Draft Body Action()
Crie um novo Update.
Retornar
Update: uma UpdateDraftBodyAction vazia.
new Update Draft Cc Recipients Action()
Crie um novo Update.
Retornar
Update: uma UpdateDraftCcRecipientsAction vazia.
new Update Draft Subject Action()
Crie um novo Update.
Retornar
Update: uma UpdateDraftSubjectAction vazia.
new Update Draft To Recipients Action()
Crie um novo Update.
Retornar
Update: uma UpdateDraftToRecipientsAction vazia.
new Validation()
Crie um novo Validation.
Disponível para apps do Google Chat e complementos do Google Workspace.
const validation = CardService.newValidation().setCharacterLimit(5).setInputType( CardService.InputType.EMAIL);
Retornar
Validation: uma validação vazia.