Création de modèles de cartes adaptativesAdaptive Cards Templating

Nous sommes heureux de partager une préversion de nouveaux outils qui vous aideront à créer, réutiliser et partager des cartes adaptatives.We're excited to share a preview of new tools that will help you create, reuse, and share Adaptive Cards.

Important

Changements cassants dans la version RC (Release Candidate) de mai 2020Breaking changes in the May 2020 Release Candidate

La version Release Candidate de la création de modèles contient des changements cassants mineurs que vous devez connaître si vous utilisez les anciens packages.The templating release candidate includes some minor breaking changes that you should be aware of if you've been using the older packages. Voir ci-dessous pour plus de détails.See below for details.

Changements cassants de mai 2020Breaking changes as of May 2020

  1. La syntaxe de liaison a changé et passe de {...} à ${...}.The binding syntax changed from {...} to ${...}.
    • Par exemple : "text": "Hello {name}" devient "text": "Hello ${name}"For Example: "text": "Hello {name}" becomes "text": "Hello ${name}"
  2. L’API JavaScript ne contient plus d’objet EvaluationContext.The JavaScript API no longer contains an EvaluationContext object. Passez simplement vos données à la fonction expand.Simply pass your data to the expand function. Consultez la page du SDK pour obtenir les détails complets.Please see the SDK page for full details.
  3. L’API .NET a été reconçue pour correspondre davantage à l’API JavaScript.The .NET API was redesigned to more closely match the JavaScript API. Consultez la page du SDK pour obtenir les détails complets.Please see the SDK page for full details.

Comment la création de modèles peut vous aiderHow can templating help you

La création de modèles permet de séparer des données d’une disposition dans une carte adaptative.Templating enables the separation of data from the layout in an Adaptive Card.

Elle permet de concevoir une carte une seule fois, puis de peupler celles-ci de données réellesIt helps design a card once, and then populate it with real data

Aujourd’hui, il est impossible de créer une carte à l’aide du concepteur de carte adaptative et d’utiliser ce JSON pour alimenter la charge utile avec du contenu dynamique.Today it's impossible to create a card using the Adaptive Card Designer and use that JSON to populate the payload with dynamic content. Pour ce faire, vous devez écrire du code personnalisé pour générer une chaîne JSON, ou utiliser les kits de développement logiciel (SDK) Modèle objet pour créer un modèle objet représentant votre carte et le sérialiser dans JSON.In order to achieve this you must write custom code to build a JSON string, or use the Object Model SDKs to build an OM representing your card and serialize it to JSON. Dans les deux cas, le concepteur effectue une opération unidirectionnelle ponctuelle et facilite l’ajustement du modèle de carte une fois celle-ci convertie en code.In either case the Designer is a one-time one-way operation and doesn't make it easy to tweak the card design later once you've converted it to code.

Il réduit le volume des transmissions par câbleIt makes transmissions over the wire smaller

Imaginez un monde où un modèle et des données peuvent être combinés directement sur le client.Imagine a world where a template and data can be combined directly on the client. Cela signifie que, si vous utilisez le même modèle plusieurs fois, ou souhaitez le mettre à jour avec de nouvelles données, vous devez simplement envoyer de nouvelles données à l’appareil qui réutilise le même modèle indéfiniment.This means if you use the same template multiple times, or want to update it with new data, you just need to send new data to the device and it can re-use the same template over and over.

Il vous aide à créer une carte de bel aspect simplement à partir des données que vous fournissezIt helps you create a great looking card from just the data you provide

Nous pensons que les cartes adaptatives sont remarquables, mais que se passerait-il si vous n’aviez pas à écrire de carte adaptative pour tout ce que vous voulez afficher à un utilisateur ?We think Adaptive Cards are great, but what if you didn't have to write an Adaptive Card for everything you want to display to a user? Un service de modèles (décrit ci-dessous) nous permet de créer un monde où chacun peut contribuer, découvrir et partager des modèles sur tout type de données.With a template service (described below) we can create a world where everyone can contribute, discover, and share templates over any type of data.

Partagez au sein de vos propres projets, de votre organisation ou avec l’Internet entier.Share within your own projects, your organization, or with the entire internet.

L’intelligence artificielle et d’autres services peuvent améliorer l’expérience utilisateurAI and other services could improve user experiences

En séparant les données du contenu, la solution ouvre la porte à l’intelligence artificielle et à d’autres services pour analyser les données des cartes que nous voyons et améliorer la productivité des utilisateurs ou nous aider à trouver des informations.By separating data from content it opens a door for AI and other services to "reason" over the data in the cards we see and enhance user productivity or help us find things.

Qu’est-ce que la création de modèles de cartes adaptatives ?What is Adaptive Cards Templating?

Il est composé de 3 composants principaux :It's comprised of 3 major components:

  1. Le langage de gabarit est la syntaxe utilisée pour le créer un modèle.The Template Language is the syntax used for authoring a template. Le concepteur vous permet même d’afficher un aperçu de vos modèles au moment de la conception en incluant des « exemples de données ».The Designer even lets you preview your templates at design time by including "sample data".
  2. Des kits de développement (SDK) de modèles existent sur toutes les plateformes de carte adaptative prises en charge.The Templating SDK's will exist on all supported Adaptive Card platforms. Ces kits de développement logiciel (SDK) permettent de peupler un modèle de données réelles, sur le serveur principal ou directement sur le client.These SDKs allow you to populate a template with real data, on the back-end or directly on the client.
  3. Le service de modèles est un service de preuve de concept qui permet à quiconque de trouver, modifier et partager un ensemble de modèles bien connus.The Template Service is a proof-of-concept service that allows anyone to find, contribute to, and share a set of well-known templates.

Langage de modèleTemplate Language

Le langage de modèle est la syntaxe utilisée pour créer un modèle de carte adaptative.The template language is the syntax used to author an Adaptive Card template.

Notes

Suivez avec l’exemple ci-dessous en ouvrant un nouvel onglet pourFollow along with the example below by opening up a new tab to

https://adaptivecards.io/designer

Cliquez sur le bouton Mode Aperçu pour basculer entre le mode création et le mode aperçu.Click the Preview Mode button to toggle between design-mode and preview-mode.

Capture d’écran du concepteur

Le concepteur vient d’être mis à jour et prend maintenant en charge la création de modèles et fournit des exemples de données pour voir un aperçu de la carte en cours de conception.The newly updated Designer adds support for authoring templates and providing Sample Data to preview the card at design-time.

Collez l’exemple ci-dessous dans le volet de l’éditeur de charge utile de carte :Paste the example below into the Card Payload Editor pane:

EmployeeCardTemplate.jsonEmployeeCardTemplate.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’éditeur d’exemple de données.Then paste the JSON data below into the Sample Data Editor.

L’exemple de données vous permet de voir exactement comment votre carte apparaîtra au moment de l’exécution, quand elle recevra des données réelles.Sample Data helps you see exactly how your card will appear at runtime when passed actual data.

EmployeeDataEmployeeData

{
    "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.Click the Preview Mode button. Le rendu de la carte doit être conforme à l’exemple de données fourni ci-dessus.You should see the card render according to the sample data provided above. N’hésitez pas à apporter des ajustements à l’exemple de données et observez en temps réel la mise à jour de la carte.Feel free to make tweaks to the sample data and watch the card update in realtime.

Félicitations, vous venez de créer votre premier modèle de carte adaptative.Congratulations, you just authored your first Adaptive Card Template! Voyons à présent comment peupler le modèle de données réelles.Next let's learn how to populate the template with real data.

En savoir plus sur le langage de modèleLearn more about the template language

Prise en charge du Kit de développement logiciel (SDK)SDK support

Les kits de développement logiciel (SDK) de création de modèles permettent de remplir un modèle de données réelles.The Templating SDKs make it possible to populate a template with real-data.

Notes

À ce jour, les kits SDK de création de modèles sont disponibles pour .NET et NodeJS.At this time templating SDKs are available for .NET and NodeJS. Nous publierons au fur et à mesure les kits SDK pour toutes les autres plateformes de cartes adaptatives comme iOS, Android, UWP, etc.Over time we will release templating SDKs for all remaining Adaptive Cards platform, like iOS, Android, UWP, etc.

Plate-formePlatform PackagePackage InstallerInstall DocumentationDocumentation
JavaScriptJavaScript Installation npmnpm install npm install adaptivecards-templating DocumentationDocumentation
.NET.NET Installation NuGetNuget install dotnet add package AdaptiveCards.Templating DocumentationDocumentation

Exemple JavaScriptJavaScript Example

Le code JavaScript ci-dessous montre le modèle général qui sera utilisé pour peupler un modèle de données.The JavaScript below shows the general pattern that will be used to populate a template with data.

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#C# Example

Le code C# ci-dessous montre le modèle général qui sera utilisé pour renseigner un modèle de données.The C# below shows the general pattern that will be used to populate a template with data.

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 de développement logiciel (SDK) de création de modèlesLearn more about the templating SDKs

Service de modèlesTemplate Service

Le service de modèles de cartes adaptatives est un service de preuve de concept qui permet à quiconque de trouver, modifier et partager un ensemble de modèles bien connus.The Adaptive Cards Template Service is a proof-of-concept service that allows anyone to find, contribute to, and share a set of well-known templates.

Il est utile si vous voulez afficher des données sans vous ennuyer à écrire une carte adaptative personnalisée pour celles-ci.It's useful if you want to display some data but don't want to bother writing a custom Adaptive Card for it.

L’API permettant d’obtenir un modèle est assez simple, mais le service offre en fait bien plus, notamment la possibilité d’analyser vos données et de trouver un modèle susceptible de vous convenir.The API to get a template is straight-forward enough, but the service actually offers much more, including the ability to analyze your data and find a template that might work for you.

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

Tous les modèles sont des fichiers JSON plats stockés dans un référentiel GitHub afin que tout le monde puisse y contribuer, comme à tout autre code open source.All templates are flat JSON files stored in a GitHub repo so anyone can contribute to them like any other open source code.

En savoir plus sur le service de modèles de carteLearn more about the card template Service

Étapes suivantes et envoi de commentairesWhat's next and sending feedback

La création de modèles et la séparation de la présentation et des données nous rapprochent de l’objectif de notre mission : « un écosystème pour un échange de contenu standardisé entre les applications et les services ».Templating and the separation of presentation from data takes us a whole lot closer toward our mission: "an ecosystem standardized content exchange between apps and services". Nous avons beaucoup à dire dans ce domaine, donc restez à l’écoute et partagez votre expérience sur GitHub !We've got plenty to deliver in this area, so stay tuned and let us know how it's working for you on GitHub!