Criação de modelos de cartões adaptáveis

Temos o prazer de compartilhar uma prévia de novas ferramentas que ajudarão você a criar, reutilizar e compartilhar Cartões Adaptáveis.

Mudanças significativas a partir de maio de 2020

1. A sintaxe de ligaçã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 os seus dados para a expand função. Consulte a página SDK para obter detalhes completos.
3. A API .NET foi redesenhada para corresponder mais à API JavaScript. Consulte a página SDK para obter detalhes completos.

Como a utilização de modelos pode ajudá-lo

A criação de modelos permite a separação de dados e layout num Adaptive Card.

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

Hoje é impossível criar um cartão usando o Adaptive Card Designer e usar esse JSON para preencher a carga com conteúdo dinâmico. Para conseguir isso, você deve escrever código personalizado para criar uma cadeia de caracteres JSON ou usar os SDKs de modelo de objeto para criar um OM representando seu cartão e serializá-lo para 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.

Torna as transmissões pela rede menores.

Imagine um mundo onde 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á reutilizar o mesmo modelo repetidamente.

Ele ajuda você a criar um cartão de ótima aparência a partir apenas dos dados que você fornece

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

Partilhe dentro dos seus próprios projetos, da sua organização ou com toda a internet.

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

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

O que é Adaptive Cards Templating?

É composto por 3 componentes principais:

1. A Linguagem do Modelo é a sintaxe usada para criar um modelo. O Designer até lhe permite visualizar os seus modelos na fase de design, incluindo "dados de exemplo".
2. Os SDKs de modelos existirão em todas as plataformas Adaptive Card suportadas. 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.

Idioma do modelo

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

O Designer recém-atualizado adiciona suporte para criação de modelos e fornecimento de dados de amostra para visualizar o cartão em tempo de design.

Cole o exemplo abaixo no painel Editor de carga útil do cartão :

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.

Dados dos Funcionários

{
    "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. Sinta-se à vontade para fazer ajustes nos dados de amostra 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 como preencher o modelo com dados reais.

Saiba mais sobre o idioma do modelo

Suporte SDK

Os SDKs de Templating tornam possível preencher um modelo com dados reais.

Plataforma	Embalagem	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 em 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 Adaptive Cards Template Service é 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 eles.

A API para obter um modelo é simples 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 aberto.

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

O que vem por aí e o envio de comentários

A criação de modelos e a separação entre apresentação e dados nos aproximam muito mais de nossa missão: "um ecossistema padronizado de troca de conteúdo entre aplicativos e serviços". Temos muito para oferecer nesta área, então fique atento e conte-nos como está funcionando para você no GitHub!