Compartilhar via

Introdução

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

Estrutura de Cartão Adaptável

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

  • AdaptiveCard - O objeto raiz descreve o AdaptiveCard em si, incluindo sua estrutura de elementos, suas ações, como ele deve ser pronunciado 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 arranjos quase infinitos para criar muitos tipos de cartões.
  • actions - Muitos cartões têm um conjunto de ações que um usuário pode executar sobre ele. 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 seguida 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 type propriedade que identifica que tipo de objeto ele é. Olhando para o cartão acima, você pode ver que temos dois elementos, um TextBlock e um Image.

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

Elementos adaptáveis

Os elementos mais fundamentais são:

  • TextBlock – adiciona um bloco de texto com propriedades para controlar a aparência do texto
  • Imagem – 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.

  • Contêiner – 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 para que a interface do usuário possa mostrar a experiência apropriada da galeria de fotos para uma coleção de imagens.

Elementos de entrada

Os elementos de entrada permitem solicitar que a interface do usuário nativa crie formulários simples:

  • Input.Text – obter conteúdo de texto do usuário
  • Input.Date – obter uma data do usuário
  • Input.Time – obter um Tempo do usuário
  • Input.Number – obter um número do usuário
  • Input.ChoiceSet – Dê ao usuário um conjunto de opções e faça com que ele escolha
  • Input.Toggle – Dê ao usuário uma única opção entre dois itens e escolha-os

Ações

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 que um sub-cartão seja mostrado ao usuário.
  • Action.Submit - Peça que todos os elementos de entrada sejam reunidos em um objeto que, em seguida, é enviado a você por meio de algum método definido pelo aplicativo host.

Exemplo Action.Submit: Com o Skype, um Action.Submit enviará de volta ao bot uma atividade de bot do Bot Framework, com a propriedade Value contendo um objeto com todos os dados de entrada.

Saiba Mais

  • Last updated on