Criar cards para apps do Google Chat

Esta página descreve como criar os componentes e a estrutura de um card. Os cards são interfaces de 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 mostrar 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 que são abertos em uma nova janela de mensagens e páginas iniciais.

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

  • Cabeçalhos, que geralmente contêm o título de um card ou 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 de interface persistentes, como botões.

Pré-requisitos

Um app do Google Chat configurado para receber e responder a eventos de interação. Para criar um app do 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 interfaces de mensagens e de usuário para apps do Chat:

Abrir o Card Builder

Adicionar um cabeçalho

O CardHeader widget 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 a seguir um exemplo de CardHeader:

Adicionar uma ou mais seções de card

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

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

Adicionar um divisor horizontal entre widgets

O divider widget 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 um widget de outro, facilitando a leitura e a compreensão dos cards.

Confira a seguir um card que consiste no widget divider entre outros tipos de widgets:

Adicionar colunas

O columns widget 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 ver 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 é quebrada abaixo da primeira.

Definir a largura da coluna

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

  • Na Web, a segunda coluna é quebrada se a largura da tela for menor ou igual a 480 pixels.
  • Em dispositivos iOS, a segunda coluna é quebrada se a largura da tela for menor ou igual a 300 pt.
  • Em dispositivos Android, a segunda coluna é quebrada 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 nas colunas. Cada item nas colunas tem horizontalSizeStyle aplicado para manipular o espaço que 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 ele é definido como padrão para 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 widgets horizontalmente à esquerda, à direita ou ao centro de uma coluna definindo o campo horizontalAligment. Se o campo horizontalAlignment não estiver definido, os widgets serão alinhados à esquerda em uma coluna.

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

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

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

Definir o alinhamento vertical de uma coluna

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

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

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

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 grid widget mostra uma grade com uma coleção de itens. Uma grade oferece suporte a qualquer número de colunas e itens. O número de linhas é determinado por itens divididos por 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 oferece suporte a 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, é possível especificar o gridItemLayout campo. Esse campo permite definir se o texto aparece acima ou abaixo do item na grade. Se gridItemLayout não estiver definido, o texto será mostrado abaixo do item na grade.

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

Adicionar uma borda a uma grade ou coluna

Para itens que aparecem em um column ou um grid widget, é possível adicionar uma borda a esses elementos da interface definindo um borderType campo e um borderStyle campo. Se nenhum campo borderStyle for definido, ele será definido como padrão para não mostrar nenhuma borda. É 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 na 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 borda definida.

Adicionar um carrossel

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

O CardFixedFooter widget 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 botão secundário.

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

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

Resolver problemas

Quando um app ou card do Google Chat retorna um erro, a interface do Chat mostra uma mensagem dizendo "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 ou card do Chat produz um resultado inesperado. Por exemplo, uma mensagem de card pode não aparecer.

Embora uma mensagem de erro não seja mostrada na interface do Chat, mensagens de erro descritivas e dados de registro estão disponíveis para ajudar a corrigir erros quando o registro de erros para apps do Chat está ativado. Para receber ajuda na visualização, depuração e correção de erros, consulte Resolver e corrigir erros do Google Chat.