Vorlagen für adaptive Karten

Wir freuen uns, eine Vorschau neuer Tools zu teilen, die Ihnen beim Erstellen, Wiederverwenden und Freigeben adaptiver Karten helfen.

Änderungen bis Mai 2020 unterbrechen

1. Die Bindungssyntax wurde von {...} zu ${...}.
   • Beispiel: "text": "Hello {name}" wird zu "text": "Hello ${name}"
2. Die JavaScript-API enthält kein EvaluationContext-Objekt mehr. Übergeben Sie einfach Ihre Daten an die expand Funktion. Ausführliche Informationen finden Sie auf der SDK-Seite .
3. Die .NET-API wurde überarbeitet, um sie stärker an die JavaScript-API anzugleichen. Ausführliche Informationen finden Sie auf der SDK-Seite .

Wie können Vorlagen Ihnen helfen

Vorlagen ermöglichen die Trennung von Daten aus dem Layout in einer adaptiven Karte.

Es hilft, eine Karte einmal zu entwerfen und dann mit echten Daten aufzufüllen.

Heute ist es unmöglich, eine Karte mit dem Designer für adaptive Karten zu erstellen und diese JSON zum Auffüllen der Nutzlast mit dynamischem Inhalt zu verwenden. Um dies zu erreichen, müssen Sie benutzerdefinierten Code schreiben, um eine JSON-Zeichenfolge zu erstellen, oder verwenden Sie die Objektmodell-SDKs, um ein OM zu erstellen, das Ihre Karte darstellt und in JSON serialisiert. In beiden Fällen ist der Designer eine einmalige Einbahnstraße und macht es nicht einfach, das Kartendesign später zu optimieren, nachdem Sie es in Code konvertiert haben.

Es macht Übertragungen über den Draht kleiner

Stellen Sie sich eine Welt vor, in der eine Vorlage und Daten direkt auf dem Client kombiniert werden können. Dies bedeutet, dass Sie, wenn Sie dieselbe Vorlage mehrmals verwenden oder sie mit neuen Daten aktualisieren möchten, nur neue Daten an das Gerät senden und dieselbe Vorlage immer wieder verwenden können.

Es hilft Ihnen, eine ansprechende Karte aus nur den von Ihnen bereitgestellten Daten zu erstellen.

Wir denken, dass adaptive Karten großartig sind, aber was ist, wenn Sie keine adaptive Karte für alles schreiben müssen, was Sie einem Benutzer anzeigen möchten? Mit einem Vorlagendienst (wie unten beschrieben) können wir eine Welt schaffen, in der jeder Vorlagen zu jeder Art von Daten beitragen, entdecken und freigeben kann.

Teilen Sie innerhalb Ihrer eigenen Projekte, Ihrer Organisation oder mit dem ganzen Internet.

KI und andere Dienste könnten die Benutzererfahrung verbessern

Durch die Trennung von Daten und Inhalten wird eine Tür für KI und andere Dienste geöffnet, um über die Daten in den Karten, die wir sehen, zu analysieren und die Benutzerproduktivität zu steigern oder uns dabei zu helfen, Dinge zu finden.

Was ist Adaptive Cards-Vorlage?

Es besteht aus drei Hauptkomponenten:

1. Die Vorlagensprache ist die Syntax, die zum Erstellen einer Vorlage verwendet wird. Mit dem Designer können Sie sogar Ihre Vorlagen während der Designzeit in einer Vorschau anzeigen, indem Sie "Beispieldaten" einfügen.
2. Die Vorlagen-SDK sind auf allen unterstützten Plattformen für adaptive Karten vorhanden. Mit diesen SDKs können Sie eine Vorlage mit echten Daten, auf dem Back-End oder direkt auf dem Client auffüllen.
3. Der Vorlagendienst ist ein Proof-of-Concept-Dienst, mit dem jeder eine Reihe bekannter Vorlagen finden, beitragen und freigeben kann.

Vorlagensprache

Die Vorlagensprache ist die Syntax, die zum Erstellen einer Vorlage für adaptive Karten verwendet wird.

Der neu aktualisierte Designer fügt Unterstützung für die Erstellung von Vorlagen hinzu und stellt Beispieldaten bereit, um eine Vorschau der Karte zur Entwurfszeit anzuzeigen.

Fügen Sie das folgende Beispiel in den Bereich Card Payload Editor ein:

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

Fügen Sie dann die folgenden JSON-Daten in den Beispieldaten-Editor ein.

Beispieldaten helfen Ihnen, genau zu sehen, wie Ihre Karte während der Laufzeit angezeigt wird, bei Übergabe tatsächlicher Daten.

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

Klicken Sie auf die Schaltfläche "Vorschaumodus ". Sie sollten sehen, wie die Karte entsprechend der oben angegebenen Beispieldaten gerendert wird. Sie können änderungen an den Beispieldaten vornehmen und die Kartenaktualisierung in Echtzeit beobachten.

Herzlichen Glückwunsch, Sie haben gerade Ihre erste Vorlage für adaptive Karten erstellt! Als Nächstes erfahren wir, wie Sie die Vorlage mit echten Daten auffüllen.

Weitere Informationen zur Vorlagensprache

SDK-Unterstützung

Die Vorlagen-SDKs ermöglichen das Auffüllen einer Vorlage mit realen Daten.

Plattform	Paket	Installieren	Dokumentation
JavaScript		npm install adaptivecards-templating	Dokumentation
.NET		dotnet add package AdaptiveCards.Templating	Dokumentation

JavaScript-Beispiel

Das folgende JavaScript zeigt das allgemeine Muster, das zum Auffüllen einer Vorlage mit Daten verwendet wird.

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

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

// Now you have an AdaptiveCard ready to render!

C#-Beispiel

Das folgende C# zeigt das allgemeine Muster, das zum Auffüllen einer Vorlage mit Daten verwendet wird.

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

// Now you have an AdaptiveCard ready to render!

Weitere Informationen zu den Vorlagen-SDKs

Vorlagendienst

Der Vorlagendienst für adaptive Karten ist ein Proof-of-Concept-Dienst, mit dem jeder eine Reihe bekannter Vorlagen finden, beitragen und freigeben kann.

Es ist nützlich, wenn Sie einige Daten anzeigen möchten, aber keine benutzerdefinierte adaptive Karte dafür schreiben möchten.

Die API zum Abrufen einer Vorlage ist direkt genug, aber der Dienst bietet tatsächlich viel mehr, einschließlich der Möglichkeit, Ihre Daten zu analysieren und eine Vorlage zu finden, die für Sie möglicherweise funktioniert.

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

Alle Vorlagen sind flache JSON-Dateien, die in einem GitHub-Repository gespeichert sind, damit jeder wie jeder andere Open-Source-Code zu ihnen beitragen kann.

Weitere Informationen zum Kartenvorlagendienst

Nächste Schritte und Senden von Feedback

Templating-Systeme und die Trennung von Darstellung und Daten bringen uns viel näher an unsere Mission: "einen standardisierten Inhaltstausch im Ökosystem zwischen Apps und Diensten". Wir haben viel zu liefern in diesem Bereich, also bleiben Sie auf dem Laufenden und teilen Sie uns mit, wie es für Sie auf GitHub funktioniert!