Adaptive Card Templating SDKs

The Adaptive Card Templating SDKs make it easy to populate a card template with real data on any supported platform.

Please read this for an overview of Adaptive Card Templating

Important

These features are in preview and subject to change. Your feedback is not only welcome, but critical to ensure we deliver the features you need.

During the initial preview only the JavaScript SDK is available, but a .NET SDK should arrive shortly.

JavaScript

The adaptivecards-templating library is available on npm and via CDN. See the package link for full documentation.

npm

npm install adaptivecards-templating

CDN

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

Usage

The sample below assumes you've also installed the adaptivecards library in order to render the card.

If you don't plan on rendering the card then you can remove the parse and render code.

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 instamce from the template payload
var template = new ACData.Template(templatePayload);
 
// Create a data binding context, and set its $root property to the
// data object to bind the template to
var context = new ACData.EvaluationContext();
context.$root = {
    "name": "Mickey Mouse"
};
 
// "Expand" the template - this generates the final Adaptive Card,
// ready to render
var card = template.expand(context);
 
// Render the card
var adaptiveCard = new AdaptiveCards.AdaptiveCard();
adaptiveCard.parse(card);
 
var htmlElement = adaptiveCard.render();

.NET

dotnet add package AdaptiveCards.Templating --version 0.1.0-alpha1

Note

Consider changing the version above to the latest published version

Import the library

using AdaptiveCards.Templating

Use the templating engine by passing in your template JSON and data JSON.

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

var dataJson = @"
{
    ""name"": ""Mickey Mouse""
}";

var transformer = new AdaptiveTransformer();
var cardJson = transformer.Transform(templateJson, dataJson);