Criar cards para apps do Google Chat

Nesta página, descrevemos como criar os componentes e a estrutura de um card. Os cards são interfaces do usuário que os apps do Google Chat podem usar para apresentar e coletar informações dos usuários do Chat. Os apps do Chat podem criar e exibir cards nas seguintes interfaces:

  • Mensagens que contêm um ou mais cards.
  • Páginas iniciais, que são cards que aparecem na guia Início em mensagens diretas com o app do Chat.
  • Caixas de diálogo, que são cards abertos em uma nova janela de mensagens e páginas iniciais.

Nesta página, você vai conhecer os seguintes componentes de um card:

  • Cabeçalhos, que normalmente contêm o título de um card ou de uma seção de card.
  • Seções, que formam o corpo principal do card, incluindo widgets e outros elementos interativos. Em uma seção de card, é possível adicionar mais estrutura ao card, incluindo colunas e grades.
  • Rodapés fixos, que aparecem na parte de baixo das caixas de diálogo para mostrar elementos da interface persistentes, como botões.

Pré-requisitos

Um app do Google Chat configurado para receber e responder a interações do usuário. Para criar um app do Google Chat interativo, conclua um dos seguintes guias de início rápido com base na arquitetura do app que você quer usar:

Use o Card Builder para criar e visualizar mensagens e interfaces do usuário para apps do Chat:

Abra o Criador de Cards

Adicionar um cabeçalho

O widget CardHeader representa o cabeçalho de um card. Os cabeçalhos podem incluir um título, um subtítulo e uma imagem de avatar para o card.

Confira abaixo um exemplo de CardHeader:

Adicionar uma ou mais seções de card

O widget CardSection é um contêiner de alto nível em um card. Use seções de card para agrupar widgets em um card. Para cada seção do card, é possível incluir um cabeçalho e um ou mais widgets.

Confira abaixo um exemplo de CardSection que contém dois widgets textParagraph:

Adicionar um divisor horizontal entre os widgets

O widget divider mostra uma linha horizontal que abrange a largura de um card entre widgets empilhados verticalmente. A linha é um divisor visual que ajuda os usuários a distinguir entre um widget e outro, facilitando a leitura e a compreensão dos cards.

Veja a seguir um card que consiste em um widget divider entre outros tipos de widgets:

Adicionar colunas

O widget columns mostra até duas colunas em um card. É possível adicionar widgets a cada coluna. Eles aparecem na ordem em que são especificados. Para incluir mais de duas colunas ou usar linhas, use o widget grid.

A altura de cada coluna é determinada pela coluna mais alta. Por exemplo, se a primeira coluna for mais alta que a segunda, as duas colunas terão a altura da primeira. Como cada coluna pode conter um número diferente de widgets, não é possível definir linhas ou alinhar widgets entre as colunas.

O exemplo a seguir mostra um card com um widget columns que apresenta duas colunas de texto. Para visualizar apenas o layout das colunas e recolher o exemplo de código, clique em Recolher. Quando o espaço é limitado, como no exemplo a seguir, a segunda coluna é colocada abaixo da primeira.

Definir a largura da coluna

As colunas são exibidas lado a lado. É possível personalizar a largura de cada coluna usando o campo horizontalSizeStyle. Se a largura da tela do usuário for muito estreita, a segunda coluna será movida para baixo da primeira:

  • Na Web, a segunda coluna é ajustada se a largura da tela for menor ou igual a 480 pixels.
  • Em dispositivos iOS, a segunda coluna será ajustada se a largura da tela for menor ou igual a 300 pt.
  • Em dispositivos Android, a segunda coluna será ajustada se a largura da tela for menor ou igual a 320 dp.

O exemplo a seguir mostra um card com um widget columns que apresenta duas colunas de texto com quatro itens. Cada item nas colunas tem horizontalSizeStyle aplicado para manipular quanto espaço o texto preenche em cada coluna:

  • O primeiro parágrafo de texto usa FILL_MINIMUM_SPACE para preencher no máximo 30% da largura do card.
  • O segundo parágrafo de texto usa FILL_AVAILABLE_SPACE para preencher o espaço disponível na largura do card. Neste exemplo, ele preenche 70% da largura do card.
  • O terceiro parágrafo de texto não define horizontalSizeStyle, então o padrão é preencher o espaço disponível do card.
  • O quarto parágrafo de texto usa FILL_MINIMUM_SPACE para preencher no máximo 30% da largura do card.

Definir o alinhamento horizontal de uma coluna

É possível alinhar os widgets horizontalmente à esquerda, à direita ou no centro de uma coluna definindo o campo horizontalAlignment. Se o campo horizontalAlignment for indefinido, os widgets serão alinhados à esquerda em uma coluna.

O exemplo a seguir alinha o texto horizontalmente à esquerda em uma coluna:

O exemplo a seguir alinha o texto horizontalmente no centro de uma coluna:

O exemplo a seguir alinha o texto horizontalmente à direita em uma coluna:

Definir o alinhamento vertical de uma coluna

É possível alinhar widgets verticalmente na parte de cima, de baixo ou no centro de uma coluna definindo o campo verticalAlignment. Se o campo verticalAlignment for indefinido, os widgets em uma coluna serão alinhados à parte de cima.

O exemplo a seguir alinha verticalmente o texto em uma coluna à parte de cima:

O exemplo a seguir alinha o texto verticalmente no centro de uma coluna:

O exemplo a seguir alinha verticalmente o texto em uma coluna na parte de baixo:

Adicionar uma grade para mostrar uma coleção de itens

O widget grid mostra uma grade com uma coleção de itens. Uma grade aceita qualquer número de colunas e itens. O número de linhas é determinado pelos itens divididos pelas colunas. Uma grade com 10 itens e 2 colunas tem 5 linhas. Uma grade com 11 itens e 2 colunas tem 6 linhas.

O widget aceita sugestões, que ajudam os usuários a inserir dados uniformes, e ações de mudança, que são Actions executadas quando ocorre uma mudança no campo de entrada de texto, como um usuário adicionando ou excluindo texto.

O exemplo a seguir é uma grade de duas colunas com um único item:

Para definir onde o texto aparece com uma imagem em uma grade, especifique o campo gridItemLayout. Esse campo permite definir se o texto aparece acima ou abaixo do item na grade. Se gridItemLayout não estiver definido, o texto vai aparecer abaixo do item na grade por padrão.

O exemplo a seguir é uma grade de três colunas com texto e uma imagem em cada grade. A primeira grade define o texto que vai aparecer acima da imagem, a segunda define o texto que vai aparecer abaixo da imagem e a terceira não define a posição do texto.

Adicionar uma borda a uma grade ou coluna

Para itens que aparecem em um widget column ou grid, é possível adicionar uma borda a esses elementos da interface definindo um campo borderType e um campo borderStyle. Se nenhum campo borderStyle for definido, o padrão será não mostrar bordas. É possível definir um borderType para aplicar a todos os itens em um widget ou aplicar o estilo a cada item individual em um widget.

O exemplo a seguir é uma grade de duas colunas com uma imagem em cada grade, em que o tipo, o estilo e a cor da borda foram definidos para serem aplicados a todos os itens da grade.

O exemplo a seguir é uma grade de três colunas com uma imagem em cada grade e o estilo e o tipo de borda definidos individualmente. A primeira imagem tem uma borda definida como STROKE. A segunda imagem tem uma borda definida como NO_BORDER. A terceira imagem não tem uma borda definida.

Adicionar um carrossel

O widget Carousel mostra uma coleção de objetos CarouselCard que podem ser rolados para dentro e para fora da tela. É possível adicionar vários widgets a cada CarouselCard.

O widget CardFixedFooter representa o rodapé de uma mensagem de caixa de diálogo enviada por um app do Chat. Os rodapés podem incluir um botão principal e um secundário.

O widget CardFixedFooter está disponível apenas para caixas de diálogo.

Confira a seguir um exemplo de widget CardFixedFooter com dois botões:

Resolver problemas

Quando um app do Google Chat ou card retorna um erro, a interface do Chat mostra a mensagem "Algo deu errado". ou "Não foi possível processar sua solicitação". Às vezes, a interface do Chat não mostra nenhuma mensagem de erro, mas o app do Chat ou card produz um resultado inesperado. Por exemplo, uma mensagem de card pode não aparecer.

Embora uma mensagem de erro possa não aparecer na interface do Chat, mensagens de erro descritivas e dados de registro estão disponíveis para ajudar você a corrigir erros quando o registro de erros para apps do Chat está ativado. Para receber ajuda para visualizar, depurar e corrigir erros, consulte Resolver problemas e corrigir erros do Google Chat.