Modelagem de cartões adaptáveis

Estamos entusiasmados em compartilhar uma visualização das novas ferramentas que ajudarão você a criar, reutilizar e compartilhar Cartões Adaptáveis.

Alterações significativas a partir de maio de 2020

1. A sintaxe de associação foi alterada de {...} para ${...}.
   • Por exemplo: "text": "Hello {name}" torna-se "text": "Hello ${name}"
2. A API JavaScript não contém mais um EvaluationContext objeto. Basta passar seus dados para a expand função. Consulte a página do SDK para obter detalhes completos.
3. A API do .NET foi reprojetada para corresponder mais de perto à API JavaScript. Consulte a página do SDK para obter detalhes completos.

Como o uso de templates pode ajudá-lo

O uso de templates permite a separação de dados do layout em um Adaptive Card.

Ele ajuda a criar um cartão uma vez e, em seguida, preenchê-lo com dados reais

Hoje é impossível criar um cartão usando o Designer de Cartão Adaptável e usar esse JSON para preencher a carga com conteúdo dinâmico. Para conseguir isso, você deve escrever um código personalizado para criar uma cadeia de caracteres JSON ou usar os SDKs do Modelo de Objeto para criar um OM representando seu cartão e serializá-lo em JSON. Em ambos os casos, o Designer é uma operação unidirecional única e não facilita o ajuste do design do cartão mais tarde, depois de convertê-lo em código.

Ele torna as transmissões pelo fio menores

Imagine um mundo em que um modelo e dados podem ser combinados diretamente no cliente. Isso significa que, se você usar o mesmo modelo várias vezes ou quiser atualizá-lo com novos dados, basta enviar novos dados para o dispositivo e ele poderá reutilizá-lo várias vezes.

Ajuda você a criar um cartão visualmente atraente apenas com os dados que você fornece.

Achamos que os Cartões Adaptáveis são ótimos, mas e se você não tiver que escrever um Cartão Adaptável para tudo o que deseja exibir para um usuário? Com um serviço de modelo (descrito abaixo), podemos criar um mundo em que todos possam contribuir, descobrir e compartilhar modelos em qualquer tipo de dados.

Compartilhe dentro de seus próprios projetos, sua organização ou com toda a Internet.

A IA e outros serviços podem melhorar as experiências do usuário

Ao separar dados do conteúdo, ele abre uma porta para a IA e outros serviços "raciocinar" sobre os dados nos cartões que vemos e melhorar a produtividade do usuário ou nos ajudar a encontrar coisas.

O que é a Modelagem de Cartões Adaptáveis?

Ele é composto por três componentes principais:

1. A Linguagem de Modelo é a sintaxe usada para criar um modelo. O Designer até permite visualizar seus modelos durante o design, incluindo "dados de exemplo".
2. Os SDKs de Modelagem existirão em todas as plataformas de Cartão Adaptável com suporte. Esses SDKs permitem que você preencha um modelo com dados reais, no back-end ou diretamente no cliente.
3. O Serviço de Modelo é um serviço de prova de conceito que permite que qualquer pessoa encontre, contribua e compartilhe um conjunto de modelos conhecidos.

Linguagem de modelo

A linguagem de modelo é a sintaxe usada para criar um modelo de Cartão Adaptável.

O Designer recém-atualizado adiciona suporte para criar modelos e fornecer dados de exemplo para visualizar o cartão em tempo de design.

Cole o exemplo abaixo no painel Card Payload Editor :

EmployeeCardTemplate.json

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "ColumnSet",
            "style": "accent",
            "bleed": true,
            "columns": [
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${photo}",
                            "altText": "Profile picture",
                            "size": "Small",
                            "style": "Person"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Hi ${name}!",
                            "size": "Medium"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Here's a bit about your org...",
                            "spacing": "None"
                        }
                    ]
                }
            ]
        },
        {
            "type": "TextBlock",
            "text": "Your manager is: **${manager.name}**"
        },
        {
            "type": "TextBlock",
            "text": "Your peers are:"
        },
        {
            "type": "FactSet",
            "facts": [
                {
                    "$data": "${peers}",
                    "title": "${name}",
                    "value": "${title}"
                }
            ]
        }
    ]
}

Em seguida, cole os dados JSON abaixo no Editor de Dados de Exemplo.

Dados de Exemplo ajudam você a ver exatamente como seu cartão aparecerá em tempo de execução quando os dados reais forem passados.

EmployeeData

{
    "name": "Matt",
    "photo": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
    "manager": {
        "name": "Thomas",
        "title": "PM Lead"
    },
    "peers": [
        {
            "name": "Lei",
            "title": "Sr Program Manager"
        },
        {
            "name": "Andrew",
            "title": "Program Manager II"
        },
        {
            "name": "Mary Anne",
            "title": "Program Manager"
        }
    ]
}

Clique no botão Modo de Visualização . Você deve ver a renderização do cartão de acordo com os dados de exemplo fornecidos acima. Fique à vontade para fazer ajustes nos dados de exemplo e assistir à atualização do cartão em tempo real.

Parabéns, você acabou de criar seu primeiro Modelo de Cartão Adaptável! Em seguida, vamos aprender a preencher o modelo com dados reais.

Saiba mais sobre o idioma do modelo

Suporte do SDK

Os SDKs de Modelagem possibilitam o preenchimento de um modelo com dados reais.

Plataforma	Pacote	Instalar	Documentação
JavaScript		npm install adaptivecards-templating	Documentação
.NET		dotnet add package AdaptiveCards.Templating	Documentação

Exemplo de JavaScript

O JavaScript abaixo mostra o padrão geral que será usado para preencher um modelo com dados.

var template = new ACData.Template({ 
    // Card Template JSON
});

var card = template.expand({
    $root: {
        // Data Fields
    }
});

// Now you have an AdaptiveCard ready to render!

Exemplo de C#

O C# abaixo mostra o padrão geral que será usado para preencher um modelo com dados.

var template = new AdaptiveCards.Templating.AdaptiveCardTemplate(cardJson);
   
var card = template.Expand(new {Key="Value"});

// Now you have an AdaptiveCard ready to render!

Saiba mais sobre os SDKs de modelagem

Serviço de Modelo

O Serviço de Modelo de Cartões Adaptáveis é um serviço de prova de conceito que permite que qualquer pessoa encontre, contribua e compartilhe um conjunto de modelos conhecidos.

É útil se você quiser exibir alguns dados, mas não quiser se preocupar em escrever um Cartão Adaptável personalizado para ele.

A API para obter um modelo é direta o suficiente, mas o serviço realmente oferece muito mais, incluindo a capacidade de analisar seus dados e encontrar um modelo que possa funcionar para você.

HTTP GET https://templates.adaptivecards.io/graph.microsoft.com/Profile.json

Todos os modelos são arquivos JSON simples armazenados em um repositório GitHub para que qualquer pessoa possa contribuir com eles como qualquer outro código de software livre.

Saiba mais sobre o serviço de modelo de cartão

O que vem a seguir e enviar comentários

A modelagem e a separação da apresentação de dados nos levam muito mais perto de nossa missão: "uma troca de conteúdo padronizada pelo ecossistema entre aplicativos e serviços". Temos muito o que entregar nesta área, então fique atento e informe-nos como está funcionando para você no GitHub!