Class CardService

CardService

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 mostrar 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 puedes 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

PropiedadTipoDescripción
BorderTypeBorderTypeLa enumeración BorderType
ChipListLayoutChipListLayoutLa enumeración ChipListLayout
ComposedEmailTypeComposedEmailTypeLa enumeración ComposedEmailType
ContentTypeContentTypeLa enumeración ContentType
GridItemLayoutGridItemLayoutLa enumeración GridItemLayout
HorizontalAlignmentHorizontalAlignmentLa enumeración HorizontalAlignment
IconIconLa enumeración Icon
ImageButtonStyleImageButtonStyleLa enumeración ImageButtonStyle
ImageCropTypeImageCropTypeLa enumeración ImageCropType
ImageStyleImageStyleLa enumeración ImageStyle
InputTypeInputTypeLa enumeración InputType
LoadIndicatorLoadIndicatorLa enumeración LoadIndicator
OnCloseOnCloseLa enumeración OnClose
OpenAsOpenAsLa enumeración OpenAs
SelectionInputTypeSelectionInputTypeLa enumeración SelectionInputType
TextButtonStyleTextButtonStyleLa enumeración TextButtonStyle
UpdateDraftBodyTypeUpdateDraftBodyTypeLa enumeración UpdateDraftBodyType

Métodos

MétodoTipo de datos que se muestraDescripción breve
newAction()ActionCree una Action nueva
newActionResponseBuilder()ActionResponseBuilderCree una ActionResponseBuilder nueva
newActionStatus()ActionStatusCree una ActionStatus nueva
newAttachment()AttachmentCree una Attachment nueva
newAuthorizationAction()AuthorizationActionCree una AuthorizationAction nueva
newAuthorizationException()AuthorizationExceptionCree una AuthorizationException nueva
newBorderStyle()BorderStyleCree una BorderStyle nueva
newButtonSet()ButtonSetCree una ButtonSet nueva
newCalendarEventActionResponseBuilder()CalendarEventActionResponseBuilderCree una CalendarEventActionResponseBuilder nueva
newCardAction()CardActionCree una CardAction nueva
newCardBuilder()CardBuilderCrea un nuevo compilador de tarjetas.
newCardHeader()CardHeaderCree una CardHeader nueva
newCardSection()CardSectionCree una CardSection nueva
newCardWithId()CardWithIdCree una CardWithId nueva
newChatActionResponse()ChatActionResponseCree una ChatActionResponse nueva
newChatResponseBuilder()ChatResponseBuilderCree una ChatResponseBuilder nueva
newChip()ChipCree una Chip nueva
newChipList()ChipListCree una ChipList nueva
newCollapseControl()CollapseControlCree una CollapseControl nueva
newColumn()ColumnCree una Column nueva
newColumns()ColumnsCrea un nuevo conjunto de Columns.
newComposeActionResponseBuilder()ComposeActionResponseBuilderCree una ComposeActionResponseBuilder nueva
newDatePicker()DatePickerCree una DatePicker nueva
newDateTimePicker()DateTimePickerCree una DateTimePicker nueva
newDecoratedText()DecoratedTextCree una DecoratedText nueva
newDialog()DialogCree una Dialog nueva
newDialogAction()DialogActionCree una DialogAction nueva
newDivider()DividerCree una Divider nueva
newDriveItemsSelectedActionResponseBuilder()DriveItemsSelectedActionResponseBuilderCree una DriveItemsSelectedActionResponseBuilder nueva
newEditorFileScopeActionResponseBuilder()EditorFileScopeActionResponseBuilderCree una EditorFileScopeActionResponseBuilder nueva
newFixedFooter()FixedFooterCree una FixedFooter nueva
newGrid()GridCree una Grid nueva
newGridItem()GridItemCree una GridItem nueva
newIconImage()IconImageCree una IconImage nueva
newImage()ImageCree una Image nueva
newImageButton()ImageButtonCree una ImageButton nueva
newImageComponent()ImageComponentCree una ImageComponent nueva
newImageCropStyle()ImageCropStyleCree una ImageCropStyle nueva
newKeyValue()KeyValueCree una KeyValue nueva
newLinkPreview()LinkPreviewCree una LinkPreview nueva
newMaterialIcon()MaterialIconCree una MaterialIcon nueva
newNavigation()NavigationCree una Navigation nueva
newNotification()NotificationCree una Notification nueva
newOpenLink()OpenLinkCree una OpenLink nueva
newOverflowMenu()OverflowMenuCree una OverflowMenu nueva
newOverflowMenuItem()OverflowMenuItemCree una OverflowMenuItem nueva
newSelectionInput()SelectionInputCree una SelectionInput nueva
newSuggestions()SuggestionsCree una Suggestions nueva
newSuggestionsResponseBuilder()SuggestionsResponseBuilderCree una SuggestionsResponseBuilder nueva
newSwitch()SwitchCree una Switch nueva
newTextButton()TextButtonCree una TextButton nueva
newTextInput()TextInputCree una TextInput nueva
newTextParagraph()TextParagraphCree una TextParagraph nueva
newTimePicker()TimePickerCree una TimePicker nueva
newUniversalActionResponseBuilder()UniversalActionResponseBuilderCree una UniversalActionResponseBuilder nueva
newUpdateDraftActionResponseBuilder()UpdateDraftActionResponseBuilderCree una UpdateDraftActionResponseBuilder nueva
newUpdateDraftBccRecipientsAction()UpdateDraftBccRecipientsActionCrea un UpdateDraftBccRecipientsAction nuevo.
newUpdateDraftBodyAction()UpdateDraftBodyActionCree una UpdateDraftBodyAction nueva
newUpdateDraftCcRecipientsAction()UpdateDraftCcRecipientsActionCree una UpdateDraftCcRecipientsAction nueva
newUpdateDraftSubjectAction()UpdateDraftSubjectActionCree una UpdateDraftSubjectAction nueva
newUpdateDraftToRecipientsAction()UpdateDraftToRecipientsActionCree una UpdateDraftToRecipientsAction nueva
newValidation()ValidationCree una Validation nueva

Documentación detallada

newAction()

Cree una Action nueva

Volver

Action: Es una acción vacía.

newActionResponseBuilder()

Cree una ActionResponseBuilder nueva

Volver

ActionResponseBuilder: Es un compilador de ActionResponse vacío.

newActionStatus()

Cree una ActionStatus nueva

Solo está disponible para las apps de Google Chat. No está disponible para complementos de Google Workspace. 

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

Volver

ActionStatus: Un ActionStatus vacío.

newAttachment()

Cree una Attachment nueva

Volver

Attachment: Es un archivo adjunto vacío.

newAuthorizationAction()

Cree una AuthorizationAction nueva

Volver

AuthorizationAction: Es un objeto AuthorizationAction vacío.

newAuthorizationException()

Cree una AuthorizationException nueva

Volver

AuthorizationException: Es una AuthorizationException vacía.

newBorderStyle()

Cree una BorderStyle nueva

Volver

BorderStyle: Es un BorderStyle vacío.

newButtonSet()

Cree una ButtonSet nueva

Volver

ButtonSet: Es un ButtonSet vacío.

newCalendarEventActionResponseBuilder()

newCardAction()

Cree una CardAction nueva

Volver

CardAction: Es un CardAction vacío.

newCardBuilder()

Crea un nuevo compilador de tarjetas.

Volver

CardBuilder: Es un compilador de tarjetas vacío.

newCardHeader()

Cree una CardHeader nueva

Volver

CardHeader: Un CardHeader vacío.

newCardSection()

Cree una CardSection nueva

Volver

CardSection: Es un CardSection vacío.

newCardWithId()

Cree una CardWithId nueva Se usa para enviar una tarjeta en un mensaje de Google Chat. El ID de tarjeta es un identificador único para una tarjeta en un mensaje cuando se envían varias tarjetas.

Solo está disponible para las apps de Google Chat. No está disponible para 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: Un CardWithId vacío.

newChatActionResponse()

Cree una ChatActionResponse nueva

Solo está disponible para las apps de Google Chat. No está disponible para 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: Un ChatActionResponse vacío.

newChatResponseBuilder()

Cree una ChatResponseBuilder nueva

Solo está disponible para las apps de Google Chat. No está disponible para 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: Un ChatResponseBuilder vacío.

newChip()

Cree una Chip nueva

Solo está disponible para las apps de Google Chat. No está disponible para 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()

Cree una ChipList nueva

Solo está disponible para las apps de Google Chat. No está disponible para 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()

Cree una CollapseControl nueva

Solo está disponible para las apps de Google Chat. No está disponible para complementos de Google Workspace. 

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

Volver

CollapseControl: Un CollapseControl vacío.

newColumn()

Cree una Column nueva

Disponible para las apps de Google Chat y los 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 las apps de Google Chat y los 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.

newComposeActionResponseBuilder()

Cree una ComposeActionResponseBuilder nueva

Volver

ComposeActionResponseBuilder: Es un compilador ComposeActionResponse vacío.

newDatePicker()

Cree una DatePicker nueva

Volver

DatePicker: Un DatePicker vacío.

newDateTimePicker()

Cree una DateTimePicker nueva

Volver

DateTimePicker: Un DateTimePicker vacío.

newDecoratedText()

Cree una DecoratedText nueva

Volver

DecoratedText: Es un DecoratedText vacío.

newDialog()

Cree una Dialog nueva

Solo está disponible para las apps de Google Chat. No está disponible para 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

Dialog: Es un Dialog vacío.

newDialogAction()

Cree una DialogAction nueva

Solo está disponible para las apps de Google Chat. No está disponible para 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: Un DialogAction vacío.

newDivider()

Cree 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.

newDriveItemsSelectedActionResponseBuilder()

newEditorFileScopeActionResponseBuilder()

newFixedFooter()

Cree una FixedFooter nueva

Volver

FixedFooter: Es un FixedFooter vacío.

newGrid()

Cree una Grid nueva

Volver

Grid: Es una cuadrícula vacía.

newGridItem()

Cree una GridItem nueva

Volver

GridItem: Es un elemento GridItem vacío.

newIconImage()

Cree una IconImage nueva

Volver

IconImage: Es una imagen de ícono vacía.

newImage()

Cree una Image nueva

Volver

Image: Es una imagen vacía.

newImageButton()

Cree una ImageButton nueva

Volver

ImageButton: Es un ImageButton vacío.

newImageComponent()

Cree una ImageComponent nueva

Volver

ImageComponent: Un ImageComponent vacío.

newImageCropStyle()

Cree una ImageCropStyle nueva

Volver

ImageCropStyle: Un ImageCropStyle vacío.

newKeyValue()

Cree una KeyValue nueva

Volver

KeyValue: Es un KeyValue vacío.

newLinkPreview()

Cree una LinkPreview nueva 

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

Volver

LinkPreview: Es un LinkPreview vacío.

newMaterialIcon()

Cree una MaterialIcon nueva

Disponible para las apps de Google Chat y los 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.

newNavigation()

Cree una Navigation nueva

Volver

Navigation: Es un objeto Navigation vacío.

newNotification()

Cree una Notification nueva

Volver

Notification: Es una notificación vacía.

Cree una OpenLink nueva

Volver

OpenLink: Es un OpenLink vacío.

newOverflowMenu()

Cree una OverflowMenu nueva

Solo está disponible para las apps de Google Chat. No está disponible para complementos de Google Workspace. 

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

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

Volver

OverflowMenu: Un OverflowMenu vacío.

newOverflowMenuItem()

Cree una OverflowMenuItem nueva

Solo está disponible para las apps de Google Chat. No está disponible para 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.

newSelectionInput()

Cree una SelectionInput nueva

Volver

SelectionInput: Es un SelectionInput vacío.

newSuggestions()

Cree una Suggestions nueva

Volver

Suggestions: Es un objeto Suggestions vacío.

newSuggestionsResponseBuilder()

Cree una SuggestionsResponseBuilder nueva

Volver

SuggestionsResponseBuilder: Es un compilador SuggestionsResponse vacío.

newSwitch()

Cree una Switch nueva

Volver

Switch: Es un interruptor vacío.

newTextButton()

Cree una TextButton nueva

Volver

TextButton: Es un TextButton vacío.

newTextInput()

Cree una TextInput nueva

Volver

TextInput: Es un TextInput vacío.

newTextParagraph()

Cree una TextParagraph nueva

Volver

TextParagraph: Es un TextParagraph vacío.

newTimePicker()

Cree una TimePicker nueva

Volver

TimePicker: Un TimePicker vacío.

newUniversalActionResponseBuilder()

Cree una UniversalActionResponseBuilder nueva

Volver

UniversalActionResponseBuilder: Es un compilador UniversalActionResponse vacío.

newUpdateDraftActionResponseBuilder()

Cree una UpdateDraftActionResponseBuilder nueva

Volver

UpdateDraftActionResponseBuilder: Un UpdateDraftActionResponseBuilder vacío.

newUpdateDraftBccRecipientsAction()

Crea un UpdateDraftBccRecipientsAction nuevo.

Volver

UpdateDraftBccRecipientsAction: Un UpdateDraftBccRecipientsAction vacío.

newUpdateDraftBodyAction()

Cree una UpdateDraftBodyAction nueva

Volver

UpdateDraftBodyAction: Es un UpdateDraftBodyAction vacío.

newUpdateDraftCcRecipientsAction()

Cree una UpdateDraftCcRecipientsAction nueva

Volver

UpdateDraftCcRecipientsAction: Un UpdateDraftCcRecipientsAction vacío.

newUpdateDraftSubjectAction()

Cree una UpdateDraftSubjectAction nueva

Volver

UpdateDraftSubjectAction: Es un UpdateDraftSubjectAction vacío.

newUpdateDraftToRecipientsAction()

Cree una UpdateDraftToRecipientsAction nueva

Volver

UpdateDraftToRecipientsAction: Es un UpdateDraftToRecipientsAction vacío.

newValidation()

Cree una Validation nueva

Disponible para las apps de Google Chat y los complementos de Google Workspace. 

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

Volver

Validation: Es una validación vacía.