Modélisation de cartes adaptatives

Nous sommes heureux de partager un aperçu des nouveaux outils qui vous aideront à créer, réutiliser et partager des cartes adaptatives.

Important

Changements cassants dans la version candidate de mai 2020

Le candidat à la publication de la fonctionnalité de création de modèles inclut des modifications mineures susceptibles de provoquer des incompatibilités dont vous devez être conscient si vous avez utilisé les anciennes versions des packages. Voir les détails ci-dessous.

Changements majeurs depuis mai 2020

1. La syntaxe de liaison est passée de {...} à ${...}.
   • Par exemple : "text": "Hello {name}" devient "text": "Hello ${name}"
2. L’API JavaScript ne contient plus d’objet EvaluationContext . Transmettez simplement vos données à la expand fonction. Pour plus d’informations, consultez la page du Kit de développement logiciel (SDK ).
3. L’API .NET a été repensée pour correspondre plus étroitement à l’API JavaScript. Pour plus d’informations, consultez la page du Kit de développement logiciel (SDK ).

Comment la modélisation peut-elle vous aider?

La création de modèles permet de séparer les données de la disposition dans une carte adaptative.

Il permet de concevoir une carte une seule fois, puis de la remplir avec des données réelles

Aujourd’hui, il est impossible de créer une carte à l’aide du Concepteur de cartes adaptatives et d’utiliser ce JSON pour remplir la charge utile avec du contenu dynamique. Pour ce faire, vous devez écrire du code personnalisé pour générer une chaîne JSON ou utiliser les kits SDK du modèle objet pour générer un modèle objet représentant votre carte et le sérialiser dans JSON. Dans les deux cas, le Générateur est une opération unidirectionnelle unique et ne facilite pas l’ajustement de la conception de carte ultérieurement une fois convertie en code.

Il rend les transmissions sur le câble plus petites

Imaginez un monde où un modèle et des données peuvent être combinés directement sur le client. Cela signifie que si vous utilisez le même modèle plusieurs fois ou que vous souhaitez le mettre à jour avec de nouvelles données, vous devez simplement envoyer de nouvelles données à l’appareil et qu’il peut réutiliser le même modèle.

Il vous aide à créer une carte très esthétique à partir des données que vous fournissez

Nous pensons que les cartes adaptatives sont excellentes, mais que se passe-t-il si vous n’avez pas besoin d’écrire une carte adaptative pour tout ce que vous voulez afficher à un utilisateur ? Avec un service de modèle (décrit ci-dessous), nous pouvons créer un monde où tout le monde peut contribuer, découvrir et partager des modèles sur n’importe quel type de données.

Partagez vos propres projets, votre organisation ou avec l’ensemble d’Internet.

L’IA et d’autres services pourraient améliorer les expériences utilisateur

En séparant les données du contenu, cela ouvre une porte pour que l'IA et d'autres services raisonnent sur les données des cartes que nous voyons et améliorent la productivité des utilisateurs ou nous aident à relever des éléments.

Qu'est-ce que la modélisation de cartes adaptatives ?

Il comprend 3 composants majeurs :

1. Le langage de modèle est la syntaxe utilisée pour la création d’un modèle. Le Concepteur vous permet même d’afficher un aperçu de vos modèles au moment du design en incluant des « exemples de données ».
2. Le Kit de développement logiciel (SDK) de modélisation existe sur toutes les plateformes prises en charge de cartes adaptatives. Ces kits SDK vous permettent de remplir un modèle avec des données réelles, sur le back-end ou directement sur le client.
3. Le Template Service est un service de preuve de concept qui permet à toute personne de trouver, de contribuer et de partager un ensemble de modèles bien connus.

Langage du modèle

Le langage de modèle est la syntaxe utilisée pour créer un modèle de carte adaptative.

Remarque

Suivez l’exemple ci-dessous en ouvrant un nouvel onglet à

https://adaptivecards.io/designer

Cliquez sur le bouton Mode Aperçu pour basculer entre le mode conception et le mode aperçu.

Le concepteur nouvellement mis à jour ajoute la prise en charge de la création de modèles et fournit des exemples de données pour afficher un aperçu de la carte au moment du design.

Collez l’exemple ci-dessous dans le volet Éditeur de charge utile de carte :

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}"
                }
            ]
        }
    ]
}

Collez ensuite les données JSON ci-dessous dans l’exemple d’éditeur de données.

Données d'exemple vous aident à voir exactement comment la carte s’affiche au moment de l’exécution avec des données réelles.

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"
        }
    ]
}

Cliquez sur le bouton Mode aperçu . Vous devez voir le rendu de la carte en fonction des exemples de données fournis ci-dessus. N'hésitez pas à apporter des ajustements aux données de l'échantillon et à observer la carte se mettre à jour en temps réel.

Félicitations, vous venez de créer votre premier modèle de carte adaptative ! Nous allons ensuite apprendre à remplir le modèle avec des données réelles.

En savoir plus sur le langage du modèle

Prise en charge des Kits de développement logiciel (SDK)

Les sdk de création de modèles permettent de remplir un modèle avec des données réelles.

Remarque

À ce stade, les kits sdk de création de modèles sont disponibles pour .NET et NodeJS. Au fil du temps, nous allons publier des kits sdk de création de modèles pour toutes les plateformes de cartes adaptatives restantes, comme iOS, Android, UWP, etc.

Plate-forme	Paquet	Installez	Documentation
JavaScript		npm install adaptivecards-templating	Documentation
.NET		dotnet add package AdaptiveCards.Templating	Documentation

Exemple JavaScript

Le code JavaScript ci-dessous montre le modèle général qui sera utilisé pour remplir un modèle avec des données.

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

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

// Now you have an AdaptiveCard ready to render!

Exemple C#

Le code C# ci-dessous montre le modèle général qui sera utilisé pour remplir un modèle avec des données.

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

// Now you have an AdaptiveCard ready to render!

En savoir plus sur les kits SDK de création de modèles

Service de modèle

Le service de modèle cartes adaptatives est un service de preuve de concept qui permet à toute personne de trouver, de contribuer et de partager un ensemble de modèles connus.

Il est utile si vous souhaitez afficher certaines données, mais ne souhaitez pas écrire une carte adaptative personnalisée pour celle-ci.

L’API permettant d’obtenir un modèle est suffisamment simple, mais le service offre beaucoup plus d’informations, notamment la possibilité d’analyser vos données et de trouver un modèle qui peut fonctionner pour vous.

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

Tous les modèles sont des fichiers JSON plats stockés dans un dépôt GitHub afin que tout le monde puisse y contribuer comme n’importe quel autre code open source.

En savoir plus sur le service de modèle de carte

Nouveautés suivantes et envoi de commentaires

La création de modèles et la séparation de la présentation des données nous rapproche beaucoup plus de notre mission : « un échange de contenu standardisé par écosystème entre les applications et les services ». Nous avons beaucoup à livrer dans ce domaine, donc restez à l’écoute et laissez-nous savoir comment il fonctionne pour vous sur GitHub !