Vorlagen für adaptive Karten

Die Vorlagen-SDKs für adaptive Karten erleichtern das Auffüllen einer Kartenvorlage mit echten Daten auf jeder unterstützten Plattform.

Bitte lesen Sie dies für eine Übersicht über die Vorlagen für adaptive Karten

Ä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. Bitte unten finden Sie ausführliche Informationen.

JavaScript

Die Bibliothek für adaptivecards-templating ist auf npm und über CDN verfügbar. Die vollständige Dokumentation finden Sie im Paketlink.

npm

npm install adaptivecards-templating

CDN

<script src="https://unpkg.com/adaptivecards-templating/dist/adaptivecards-templating.min.js"></script>

Verwendung

Im folgenden Beispiel wird davon ausgegangen, dass Sie auch die Adaptivecards-Bibliothek installiert haben, um die Karte zu rendern.

Wenn Sie nicht planen, die Karte zu rendern, können Sie den parse- und render-Code entfernen.

import * as ACData from "adaptivecards-templating";
import * as AdaptiveCards from "adaptivecards";
 
// Define a template payload
var templatePayload = {
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "Hello ${name}!"
        }
    ]
};
 
// Create a Template instance from the template payload
var template = new ACData.Template(templatePayload);
 
// Expand the template with your `$root` data object.
// This binds it to the data and produces the final Adaptive Card payload
var cardPayload = template.expand({
   $root: {
      name: "Matt Hidinger"
   }
});
 
// OPTIONAL: Render the card (requires that the adaptivecards library be loaded)
var adaptiveCard = new AdaptiveCards.AdaptiveCard();
adaptiveCard.parse(cardPayload);
document.getElementById('exampleDiv').appendChild(adaptiveCard.render());

.NET

dotnet add package AdaptiveCards.Templating

Verwendung

// Import the library 
using AdaptiveCards.Templating;

var templateJson = @"
{
    ""type"": ""AdaptiveCard"",
    ""version"": ""1.2"",
    ""body"": [
        {
            ""type"": ""TextBlock"",
            ""text"": ""Hello ${name}!""
        }
    ]
}";

// Create a Template instance from the template payload
AdaptiveCardTemplate template = new AdaptiveCardTemplate(templateJson);

// You can use any serializable object as your data
var myData = new
{
    Name = "Matt Hidinger"
};

// "Expand" the template - this generates the final Adaptive Card payload
string cardJson = template.Expand(myData);

Benutzerdefinierte Funktionen

Benutzerdefinierte Funktionen können zusätzlich zu den vordefinierten Funktionen der adaptiven Ausdrucksbibliothek hinzugefügt werden.

Im folgenden Beispiel wird die benutzerdefinierte Funktion stringFormat hinzugefügt, und die Funktion wird verwendet, um eine Zeichenfolge zu formatieren.

string jsonTemplate = @"{
    ""type"": ""AdaptiveCard"",
    ""version"": ""1.0"",
    ""body"": [{
        ""type"": ""TextBlock"",
        ""text"": ""${stringFormat(strings.myName, person.firstName, person.lastName)}""
    }]
}";

string jsonData = @"{
    ""strings"": {
        ""myName"": ""My name is {0} {1}""
    },
    ""person"": {
        ""firstName"": ""Andrew"",
        ""lastName"": ""Leader""
    }
}";

AdaptiveCardTemplate template = new AdaptiveCardTemplate(jsonTemplate);

var context = new EvaluationContext
{
    Root = jsonData
};

// a custom function is added
AdaptiveExpressions.Expression.Functions.Add("stringFormat", (args) =>
{
    string formattedString = "";

    // argument is packed in sequential order as defined in the template
    // For example, suppose we have "${stringFormat(strings.myName, person.firstName, person.lastName)}"
    // args will have following entries
    // args[0]: strings.myName
    // args[1]: person.firstName
    // args[2]: strings.lastName
    if (args[0] != null && args[1] != null && args[2] != null) 
    {
        string formatString = args[0];
        string[] stringArguments = {args[1], args[2] };
        formattedString = string.Format(formatString, stringArguments);
    }
    return formattedString;
});

string cardJson = template.Expand(context);

Problembehandlung

F. Warum stoße ich auf eine AdaptiveTemplateException beim Aufruf von expand()?
Ein. Wenn Ihre Fehlermeldung wie "<fehlerhaftes Element>" in der Zeile aussieht, ist "<Zeilennummer>" fehlerhaft formatiert für das '$data : ' Paar.
Stellen Sie sicher, dass der für "$data" bereitgestellte Wert gültiges JSON ist, wie zum Beispiel eine Zahl, ein Boolean-Wert, ein Objekt oder ein Array, oder der richtigen Syntax der Sprache für Adaptive Templates folgt und dass der Eintrag im Datenkontext an der entsprechenden Zeilennummer vorhanden ist.

F. Warum erhalte ich eine ArgumentNullException beim Aufruf von expand()?
Ein. Wenn Ihre Fehlermeldung wie folgt aussieht: "Überprüfen Sie, ob der Kontext der übergeordneten Daten festgelegt ist, oder geben Sie einen Wert ungleich NULL für '<fehlerhaftes Element>' in Zeile '<Zeilennummer>' ein."
Es weist darauf hin, dass für die angeforderte Datenbindung kein Datenkontext vorhanden ist. Stellen Sie sicher, dass der Stammdatenkontext festgelegt ist, falls er existiert, und prüfen Sie, ob jeder Datenkontext für die aktuelle Bindung verfügbar ist, wie durch die Zeilennummer angegeben.

F. Warum funktioniert das Datum/Zeit im RFC 3389-Format, z. B. "2017-02-14T06:08:00Z", bei Verwendung mit der Vorlage nicht mit den TIME/DATE-Funktionen?
Ein. .NET sdk nuget Version 1.0.0-rc.0 zeigt dieses Verhalten. Dieses Verhalten wird in den nachfolgenden Versionen korrigiert. json.Net Deserializers Standardverhalten ändert die Formatierung von Datums/Uhrzeit-Strings, und sie wird in den nachfolgenden Versionen deaktiviert. Verwenden Sie die FormatDateTime()-Funktion, um die Datums-/Uhrzeitzeichenfolge in RFC 3389 zu formatieren, wie in diesem Beispiel dargestellt, oder Sie können TIME/DATE-Funktionen umgehen und einfach formatDateTime() verwenden. Weitere Informationen zu formatDateTime() finden Sie hier.