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 de chat podem criar e mostrar cards nas seguintes interfaces:

  • Mensagens que contêm um ou mais cards.
  • Páginas iniciais, que é um card que aparece na guia Início em mensagens diretas com o app 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 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 cards, você pode 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 com recursos interativos ativados. Para criar um app de chat interativo, conclua um dos guias de início rápido a seguir com base na arquitetura do app que você quer usar:

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

Abrir 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 as seções de cards para agrupar widgets em um card. Para cada seção de 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 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 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 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, ambas 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 tem duas colunas de texto. Para conferir apenas o layout de colunas e recolher o exemplo de código, clique em Recolher. Quando o espaço é limitado, como no exemplo abaixo, a segunda coluna é agrupada 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 campo horizontalSizeStyle. Se a largura da tela do usuário for muito estreita, a segunda coluna será exibida abaixo da primeira:

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

O exemplo a seguir mostra um card com um widget columns que tem duas colunas de texto com quatro itens. Cada item nas colunas tem horizontalSizeStyle aplicado para manipular a quantidade de 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 é 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 os widgets horizontalmente à esquerda, à direita ou ao centro de uma coluna definindo o campo horizontalAligment. Se o campo horizontalAlignment estiver indefinido, 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, 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 à parte de cima.

O exemplo a seguir alinha verticalmente o texto em uma coluna para a 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 widget grid 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 pelos 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 e são executadas quando ocorre uma mudança no campo de entrada de texto, como um usuário que adiciona ou remove 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.

O exemplo a seguir é uma grade de três colunas com texto e uma imagem em cada uma. A primeira grade define o texto que aparece acima da imagem, a segunda define o texto que aparece 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 de IU definindo um campo borderType e um campo borderStyle. Se nenhum campo borderStyle for definido, o padrão será mostrar nenhuma borda. É possível definir um borderType para aplicar a todos os itens de 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 uma, 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 uma 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.

O widget CardFixedFooter representa o rodapé de uma mensagem de caixa de diálogo enviada por um app de chat. Os rodapés podem incluir um botão principal e um 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 do Google Chat ou um card retorna um erro, a interface do Chat mostra uma mensagem informando que "Ocorreu um erro". 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 o card do Chat 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 a corrigir erros quando o registro de erros para apps de chat estiver ativado. Para saber como visualizar, depurar e corrigir erros, consulte Resolver e corrigir erros do Google Chat.