Delen via

Adaptieve kaarten templeren

We delen graag een preview van nieuwe hulpprogramma's waarmee u adaptieve kaarten kunt maken, hergebruiken en delen .

Belangrijk

Belangrijke wijzigingen in de releasekandidaat van mei 2020

De template releasekandidaat bevat enkele kleine brekende wijzigingen waar u zich bewust van moet zijn als u de oudere pakketten hebt gebruikt. Kijk hieronder voor de details.

Belangrijke wijzigingen vanaf mei 2020

  1. De syntaxis van de binding is gewijzigd van {...} in ${...}.
    • Bijvoorbeeld: "text": "Hello {name}" wordt "text": "Hello ${name}"
  2. De JavaScript-API bevat geen EvaluationContext object meer. Geef uw gegevens gewoon door aan de expand functie. Zie de SDK-pagina voor volledige details.
  3. De .NET-API is opnieuw ontworpen om nauwer overeen te komen met de JavaScript-API. Zie de SDK-pagina voor volledige details.

Hoe kunnen sjablonen u helpen

Met templating kunt u gegevens scheiden van de indeling in een adaptieve kaart.

Hiermee kunt u een kaart eenmaal ontwerpen en deze vervolgens vullen met echte gegevens

Tegenwoordig is het onmogelijk om een kaart te maken met de Adaptive Card Designer en die JSON te gebruiken om de nettolading te vullen met dynamische inhoud. Als u dit wilt bereiken, moet u aangepaste code schrijven om een JSON-tekenreeks te maken of de SDK's van het objectmodel gebruiken om een OM te bouwen die uw kaart vertegenwoordigt en deze serialiseren naar JSON. In beide gevallen is de Designer een eenmalige, niet-omkeerbare bewerking en is het niet eenvoudig om het kaartontwerp later aan te passen nadat u het naar code hebt geconverteerd.

Het maakt transmissies over de draad kleiner

Stelt u zich een wereld voor waarin een sjabloon en gegevens rechtstreeks op de client kunnen worden gecombineerd. Dit betekent dat als u dezelfde sjabloon meerdere keren gebruikt of wilt bijwerken met nieuwe gegevens, u alleen nieuwe gegevens naar het apparaat moet verzenden en dezelfde sjabloon telkens opnieuw kan gebruiken.

Hiermee kunt u een uitstekend uitziende kaart maken op basis van alleen de gegevens die u opgeeft

We denken dat adaptieve kaarten geweldig zijn, maar wat als u geen adaptieve kaart hoeft te schrijven voor alles wat u wilt weergeven aan een gebruiker? Met een sjabloonservice (zoals hieronder beschreven) kunnen we een wereld creëren waarin iedereen sjablonen kan bijdragen, ontdekken en delen via elk type gegevens.

Deel binnen uw eigen projecten, uw organisatie of met het hele internet.

AI en andere services kunnen gebruikerservaringen verbeteren

Door gegevens van inhoud te scheiden, wordt er een deur geopend voor AI en andere services om de gegevens in de kaarten te analyseren, waardoor we de productiviteit van gebruikers verhogen of helpen dingen te vinden.

Wat is adaptieve kaarten templeren?

Het bestaat uit drie belangrijke onderdelen:

  1. De sjabloontaal is de syntaxis die wordt gebruikt voor het ontwerpen van een sjabloon. Met designer kunt u zelfs een voorbeeld van uw sjablonen bekijken tijdens het ontwerp door 'voorbeeldgegevens' op te nemen.
  2. De Templating SDK's bestaan op alle ondersteunde Adaptive Card-platformen. Met deze SDK's kunt u een sjabloon vullen met echte gegevens, op de back-end of rechtstreeks op de client.
  3. De Sjabloonservice is een proof-of-concept-service waarmee iedereen een set bekende sjablonen kan vinden, eraan kan bijdragen en deze kan delen.

Sjabloontaal

De sjabloontaal is de syntaxis die wordt gebruikt om een adaptieve kaartsjabloon te maken.

Opmerking

Volg het onderstaande voorbeeld door een nieuw tabblad te openen om

https://adaptivecards.io/designer

Klik op de knop Preview-modus om tussen de ontwerpmodus en de preview-modus te schakelen.

Designer-screenshot

De zojuist bijgewerkte ontwerper voegt ondersteuning toe voor het ontwerpen van sjablonen en biedt voorbeeldgegevens om een voorbeeld van de kaart te bekijken tijdens het ontwerp.

Plak het onderstaande voorbeeld in het deelvenster 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}"
                }
            ]
        }
    ]
}

Plak vervolgens de onderstaande JSON-gegevens in de voorbeeldgegevenseditor.

Voorbeeldgegevens helpen u precies te zien hoe uw kaart tijdens runtime wordt weergegeven wanneer werkelijke gegevens worden doorgegeven.

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

Klik op de knop Voorbeeldmodus . U ziet dat de kaart wordt weergegeven op basis van de bovenstaande voorbeeldgegevens. U kunt gerust aanpassingen aanbrengen in de voorbeeldgegevens en de kaartupdate in realtime bekijken.

Gefeliciteerd, u hebt zojuist uw eerste adaptieve kaartsjabloon gemaakt. Laten we nu leren hoe u de sjabloon kunt vullen met echte gegevens.

Meer informatie over de sjabloontaal

SDK-ondersteuning

Met de Templating SDK's kunt u een sjabloon vullen met echte gegevens.

Opmerking

Op dit moment zijn sjablonering-SDK's beschikbaar voor .NET en NodeJS. Na verloop van tijd brengen we sjablonen voor alle resterende Adaptive Cards-platformen, zoals iOS, Android, UWP, enzovoort, vrij.

Platvorm Pakket Installeren Documentatie
Javascript npm installeren npm install adaptivecards-templating Documentatie
.NET Nuget installeren dotnet add package AdaptiveCards.Templating Documentatie

Voorbeeld van JavaScript

In het onderstaande JavaScript ziet u het algemene patroon dat wordt gebruikt voor het vullen van een sjabloon met gegevens.

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

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

// Now you have an AdaptiveCard ready to render!

C#-voorbeeld

In de onderstaande C# ziet u het algemene patroon dat wordt gebruikt voor het vullen van een sjabloon met gegevens.

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

// Now you have an AdaptiveCard ready to render!

Meer informatie over de templating-SDK's

Sjabloonservice

De Adaptieve Kaarten Sjabloonservice is een proof-of-concept-service waarmee iedereen een set goed bekende sjablonen kan vinden, eraan kan bijdragen en deze kan delen.

Het is handig als u bepaalde gegevens wilt weergeven, maar geen moeite wilt hebben met het schrijven van een aangepaste adaptieve kaart.

De API voor het ophalen van een sjabloon is eenvoudig genoeg, maar de service biedt eigenlijk veel meer, waaronder de mogelijkheid om uw gegevens te analyseren en een sjabloon te vinden die voor u kan werken.

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

Alle sjablonen zijn platte JSON-bestanden die zijn opgeslagen in een GitHub-opslagplaats, zodat iedereen hieraan kan bijdragen, net als elke andere opensource-code.

Meer informatie over de kaartsjabloonservice

Wat is de volgende stap en feedback verzenden

Sjabloneren en de scheiding van presentatie en gegevens brengt ons een stuk dichter bij onze missie: "een gestandaardiseerde inhoudsuitwisseling tussen apps en services binnen een ecosysteem". We hebben genoeg te leveren op dit gebied, dus blijf op de hoogte en laat ons weten hoe het voor u werkt op GitHub!

  • Last updated on