CardService proporciona la capacidad de crear tarjetas genéricas que se usan en diferentes productos de extensibilidad de Google, como los complementos de Google Workspace.
A continuación, se muestra un ejemplo de una tarjeta de complementos.
function createCard() { return CardService.newCardBuilder() .setHeader(CardService.newCardHeader().setTitle('CardTitle')) .build(); }
También puedes devolver varias tarjetas de la siguiente manera:
function createCards() { return [ CardService.newCardBuilder().build(), CardService.newCardBuilder().build(), CardService.newCardBuilder().build(), ]; }
A continuación, se muestra cómo podrías definir una tarjeta con un encabezado, texto, una imagen y un elemento de menú:
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(); }
Ejemplo de una tarjeta de Apps 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();
Propiedades
| Propiedad | Tipo | Descripción |
|---|---|---|
Border | Border | Es la enumeración Border. |
Chip | Chip | Es la enumeración Chip. |
Common | Common | Es la enumeración Common. |
Composed | Composed | Es la enumeración Composed. |
Content | Content | Es la enumeración Content. |
Drive | Drive | Es la enumeración Drive. |
Expression | Expression | Es la enumeración Expression. |
Expression | Expression | Es la enumeración Expression. |
Grid | Grid | Es la enumeración Grid. |
Horizontal | Horizontal | Es la enumeración Horizontal. |
Icon | Icon | Es la enumeración Icon. |
Image | Image | Es la enumeración Image. |
Image | Image | Es la enumeración Image. |
Image | Image | Es la enumeración Image. |
Input | Input | Es la enumeración Input. |
Load | Load | Es la enumeración Load. |
On | On | Es la enumeración On. |
Open | Open | Es la enumeración Open. |
Selection | Selection | Es la enumeración Selection. |
Text | Text | Es la enumeración Text. |
Text | Text | Es la enumeración Text. |
Update | Update | Es la enumeración Update. |
Variable | Variable | Es la enumeración Variable. |
Visibility | Visibility | Es la enumeración Visibility. |
Workflow | Workflow | Es la enumeración Workflow. |
Métodos
Documentación detallada
newActionResponseBuilder()
Crea una ActionResponseBuilder nueva.
Volver
ActionResponseBuilder: Es un compilador de ActionResponse vacío.
newActionStatus()
Crea una ActionStatus nueva.
Solo está disponible para las apps de Google Chat. No está disponible para los complementos de Google Workspace.
const actionStatus = CardService.newActionStatus() .setStatusCode(CardService.Status.OK) .setUserFacingMessage('Success');
Volver
ActionStatus: Es un ActionStatus vacío.
newAttachment()
newAuthorizationAction()
newAuthorizationException()
Crea una AuthorizationException nueva.
Volver
AuthorizationException: Es un AuthorizationException vacío.
newBorderStyle()
newCalendarEventActionResponseBuilder()
Crea una CalendarEventActionResponseBuilder nueva.
Volver
CalendarEventActionResponseBuilder: Es un CalendarEventActionResponseBuilder vacío.
newCardAction()
newCardBuilder()
newCardHeader()
newCardSection()
newCardWithId()
Crea una CardWithId nueva. Se usa para enviar una tarjeta en un mensaje de Google Chat. El ID de tarjeta es un identificador único de una tarjeta en un mensaje cuando se envían varias tarjetas.
Solo está disponible para las apps de Google Chat. No está disponible para los complementos de 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);
Volver
CardWithId: Es un CardWithId vacío.
newCarousel()
Crea un 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')))
Volver
Carousel: Es un carrusel vacío.
newCarouselCard()
Crea una CarouselCard nueva.
const carouselCard = CardService.newCarouselCard().addWidget( CardService.newTextParagraph().setText('Text paragraph in carousel'));
Volver
CarouselCard: Es un chip vacío.
newChatActionResponse()
Crea una ChatActionResponse nueva.
Solo está disponible para las apps de Google Chat. No está disponible para los complementos de 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);
Volver
ChatActionResponse: Es un ChatActionResponse vacío.
newChatResponseBuilder()
Crea una ChatResponseBuilder nueva.
Solo está disponible para las apps de Google Chat. No está disponible para los complementos de 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();
Volver
ChatResponseBuilder: Es un ChatResponseBuilder vacío.
newChip()
Crea una Chip nueva.
Disponible para las apps de Google Chat. En la versión preliminar para desarrolladores de los complementos de Google Workspace
const chip = CardService.newChip() .setLabel('Open Link') .setOpenLink(CardService.newOpenLink().setUrl( 'https://www.google.com'));
Volver
Chip: Es un chip vacío.
newChipList()
Crea una ChipList nueva.
Disponible para las apps de Google Chat. En la versión preliminar para desarrolladores de los complementos de Google Workspace
const chip = CardService.newChip(); // Finish building the text chip... const chipList = CardService.newChipList() .setLayout(CardService.ChipListLayout.WRAPPED) .addChip(chip);
Volver
ChipList: Es un ChipList vacío.
newCollapseControl()
Crea una CollapseControl nueva.
Disponible para las apps de Google Chat. En la versión preliminar para desarrolladores de los complementos de Google Workspace
const collapseControl = CardService.newCollapseControl() .setHorizontalAlign(CardService.HorizontalAlignment.START) .setExpandButton(CardService.newTextButton().setText('Expand')) .setCollapseButton(CardService.newTextButton().setText('Collapse'));
Volver
CollapseControl: Es un CollapseControl vacío.
newColumn()
Crea una Column nueva.
Disponible para apps de Google Chat y complementos de 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);
Volver
Column: Es una columna vacía.
newColumns()
Crea un nuevo conjunto de Columns.
Disponible para apps de Google Chat y complementos de 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);
Volver
Columns: Es un conjunto vacío de columnas.
newCommonWidgetAction()
newComposeActionResponseBuilder()
Crea una ComposeActionResponseBuilder nueva.
Volver
ComposeActionResponseBuilder: Un compilador de ComposeActionResponse vacío.
newCondition()
newDataSourceConfig()
Crea un objeto DataSourceConfig nuevo y vacío.
Volver
DataSourceConfig: Es un DataSourceConfig vacío.
newDatePicker()
newDateTimePicker()
newDecoratedText()
newDialog()
Crea una Dialog nueva.
Solo está disponible para las apps de Google Chat. No está disponible para los complementos de 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);
Volver
newDialogAction()
Crea una DialogAction nueva.
Solo está disponible para las apps de Google Chat. No está disponible para los complementos de 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);
Volver
DialogAction: Es un DialogAction vacío.
newDivider()
Crea una Divider nueva. En el siguiente ejemplo, se compila una tarjeta simple con 2 párrafos separados por un 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; }
Volver
Divider: Es un divisor.
newDriveDataSourceSpec()
newDriveItemsSelectedActionResponseBuilder()
Crea una DriveItemsSelectedActionResponseBuilder nueva.
Volver
DriveItemsSelectedActionResponseBuilder: Es un DriveItemsSelectedActionResponseBuilder vacío.
newEditorFileScopeActionResponseBuilder()
Crea una EditorFileScopeActionResponseBuilder nueva.
Volver
EditorFileScopeActionResponseBuilder: Es un EditorFileScopeActionResponseBuilder vacío.
newEventAction()
Crea un nuevo EventAction que se usa para la validación del cliente.
Volver
EventAction: Es un EventAction vacío.
newExpressionData()
Crea un nuevo ExpressionData que se usa para la validación del cliente.
Volver
ExpressionData: Es un ExpressionData vacío.
newExpressionDataAction()
Crea un nuevo ExpressionDataAction que se usa para la validación del cliente.
Volver
ExpressionDataAction: Es un ExpressionDataAction vacío.
newExpressionDataCondition()
Crea un nuevo ExpressionDataCondition que se usa para la validación del cliente.
Volver
ExpressionDataCondition: Es un ExpressionDataCondition vacío.
newHostAppDataSource()
newImageButton()
newImageComponent()
newImageCropStyle()
newLinkPreview()
Crea una LinkPreview nueva.
const decoratedText = CardService.newDecoratedText().setTopLabel('Hello').setText('Hi!'); const cardSection = CardService.newCardSection().addWidget(decoratedText); const card = CardService.newCardBuilder().addSection(cardSection).build(); return CardService.newLinkPreview().setPreviewCard(card).setTitle( 'Smart chip title');
Volver
LinkPreview: Es un objeto LinkPreview vacío.
newMaterialIcon()
Crea una MaterialIcon nueva.
Disponible para apps de Google Chat y complementos de 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();
Volver
MaterialIcon: Un MaterialIcon vacío.
newNotification()
newOverflowMenu()
Crea una OverflowMenu nueva.
Disponible para las apps de Google Chat. En la versión preliminar para desarrolladores de los complementos de Google Workspace
const overflowMenuItem = CardService.newOverflowMenuItem(); // Finish building the overflow menu item... const overflowMenu = CardService.newOverflowMenu().addMenuItem(overflowMenuItem);
Volver
OverflowMenu: Es un OverflowMenu vacío.
newOverflowMenuItem()
Crea una OverflowMenuItem nueva.
Disponible para las apps de Google Chat. En la versión preliminar para desarrolladores de los complementos de 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'));
Volver
OverflowMenuItem: Es un OverflowMenuItem vacío.
newPlatformDataSource()
newSelectionInput()
newSuggestions()
newSuggestionsResponseBuilder()
Crea una SuggestionsResponseBuilder nueva.
Volver
SuggestionsResponseBuilder: Es un compilador de SuggestionsResponse vacío.
newTextButton()
newTextParagraph()
newTimePicker()
newTrigger()
newUniversalActionResponseBuilder()
Crea una UniversalActionResponseBuilder nueva.
Volver
UniversalActionResponseBuilder: Un compilador de UniversalActionResponse vacío.
newUpdateDraftActionResponseBuilder()
Crea una UpdateDraftActionResponseBuilder nueva.
Volver
UpdateDraftActionResponseBuilder: Es un UpdateDraftActionResponseBuilder vacío.
newUpdateDraftBccRecipientsAction()
Crea un UpdateDraftBccRecipientsAction nuevo.
Volver
UpdateDraftBccRecipientsAction: Es un objeto UpdateDraftBccRecipientsAction vacío.
newUpdateDraftBodyAction()
Crea una UpdateDraftBodyAction nueva.
Volver
UpdateDraftBodyAction: Es un UpdateDraftBodyAction vacío.
newUpdateDraftCcRecipientsAction()
Crea una UpdateDraftCcRecipientsAction nueva.
Volver
UpdateDraftCcRecipientsAction: Es un Empty UpdateDraftCcRecipientsAction.
newUpdateDraftSubjectAction()
Crea una UpdateDraftSubjectAction nueva.
Volver
UpdateDraftSubjectAction: Es un UpdateDraftSubjectAction vacío.
newUpdateDraftToRecipientsAction()
Crea una UpdateDraftToRecipientsAction nueva.
Volver
UpdateDraftToRecipientsAction: Es un UpdateDraftToRecipientsAction vacío.
newUpdateVisibilityAction()
Crea una UpdateVisibilityAction nueva.
Volver
UpdateVisibilityAction: Es un UpdateVisibilityAction vacío.
newValidation()
Crea una Validation nueva.
Disponible para apps de Google Chat y complementos de Google Workspace
const validation = CardService.newValidation().setCharacterLimit(5).setInputType( CardService.InputType.EMAIL);
Volver
Validation: Es una validación vacía.