Compartilhar via

Guia de Introdução

  • Artigo

Um Cartão Adaptável é um modelo de objeto de cartão serializado em JSON.

Estrutura do Cartão Adaptável

A estrutura básica de um cartão é a seguinte:

  • AdaptiveCard – o objeto raiz descreve o AdaptiveCard propriamente dito, incluindo sua composição de elementos, suas ações, como ele deve ser falado e a versão do esquema necessária para renderizá-lo.
  • body – o corpo do cartão é composto por blocos de construção conhecidos como elements. Os elementos podem ser compostos em disposições quase infinitas para criar muitos tipos de cartões.
  • actions – muitos cartões têm um conjunto de ações que um usuário pode executar nele. Essa propriedade descreve as ações que normalmente são renderizadas em uma "barra de ações" na parte inferior.

Cartão de exemplo

Este cartão de exemplo, que inclui uma única linha de texto seguido por uma imagem.

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "Here is a ninja cat"
        },
        {
            "type": "Image",
            "url": "http://adaptivecards.io/content/cats/1.png"
        }
    ]
}

Propriedade Type

Cada elemento tem uma propriedade type que identifica o tipo de objeto. Observando o cartão acima, você poderá ver que temos dois elementos: um TextBlock e uma Image.

Todos os elementos do Cartão Adaptável são empilhados verticalmente e se expandem até a largura de seu pai (considere display: block em HTML). No entanto, você pode usar um ColumnSet para criar colunas lado a lado dos contêineres.

Elementos adaptáveis

Os elementos mais importantes são:

  • TextBlock – adiciona um bloco de texto com propriedades para controlar a aparência do texto
  • Image – adiciona uma imagem com propriedades para controlar a aparência da imagem

Elementos de contêiner

Os cartões também podem ter contêineres, que organizam uma coleção de elementos filho.

  • Container – define uma coleção de elementos
  • ColumnSet/Column – define uma coleção de colunas; cada coluna é um contêiner
  • FactSet – contêiner de fatos
  • ImageSet – contêiner de imagens, de modo que a interface do usuário possa mostrar uma experiência apropriada de galeria de fotos para uma coleção de imagens.

Elementos de entrada

Os elementos de entrada permitem que você solicite à interface do usuário nativa a criação de formulários simples:

  • Input.Text – obtém o conteúdo de texto do usuário
  • Input.Date – obtém uma Data do usuário
  • Input.Time – obtém uma Hora do usuário
  • Input.Number – obtém um Número do usuário
  • Input.ChoiceSet – fornece ao usuário um conjunto de opções e solicita uma escolha
  • Input.Toggle – fornece ao usuário uma única opção entre dois itens e solicita uma escolha

Ações

As ações adicionam botões ao cartão. Elas podem executar uma variedade de ações, como abrir uma URL ou enviar alguns dados.

  • Action.OpenUrl – o botão abre uma URL externa para exibição
  • Action.ShowCard – solicita um subcartão a ser mostrado ao usuário.
  • Action.Submit – solicita que todos os elementos de entrada sejam reunidos em um objeto que é então enviado para você por meio de um método definido pelo aplicativo host.

Action.Submit de exemplo: Com o Skype, um Action.Submit enviará uma atividade de bot do Bot Framework novamente para o bot com a propriedade Value que contém um objeto com todos os dados de entrada.

Saiba mais