microsoft-adaptivecards
Version:
Adaptive Card typescript/javascript library for Html Clients
134 lines (120 loc) • 5.64 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Adaptive Cards - Basic Example</title>
<script src="dist/adaptive-cards.js"></script>
</head>
<body>
<h1>Adaptive Cards - Basic Example</h1>
<div id="exampleDiv"></div>
<script>
var json = {
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "0.5",
"speak": "<s>The forecast for Seattle January 20 is mostly clear with a High of 51 degrees and Low of 40 degrees</s>",
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Seattle, Washington - January 20, 7:30 AM",
"isSubtle": true
}
]
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"size": "auto",
"items": [
{
"type": "Image",
"url": "http://messagecardplayground.azurewebsites.net/assets/Mostly Cloudy-Square.png",
"size": "small",
"horizontalAlignment": "center"
}
]
},
{
"type": "Column",
"size": "auto",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"size": "auto",
"items": [
{
"type": "TextBlock",
"text": "42",
"size": "extraLarge"
}
]
},
{
"type": "Column",
"size": "auto",
"items": [
{
"type": "TextBlock",
"text": "°F",
"weight": "bolder"
}
]
}
]
},
{
"type": "TextBlock",
"text": "Mostly Clear",
"isSubtle": true
}
]
},
{
"type": "Column",
"size": "auto",
"items": [
{
"type": "TextBlock",
"text": "Hi 51"
},
{
"type": "TextBlock",
"text": "Lo 40"
}
]
}
]
}
]
}
]
};
</script>
<script>
var adaptiveCard = new AdaptiveCards.AdaptiveCard();
adaptiveCard.parse(json);
var renderedCard = adaptiveCard.render();
var exampleDiv = document.getElementById('exampleDiv');
exampleDiv.appendChild(renderedCard);
AdaptiveCards.AdaptiveCard.onExecuteAction = function (action) {
alert(JSON.stringify(action));
};
</script>
<p>
This example requires a build of the Adaptive Cards library. From the command line, enter "npm run build" which will put
the built files in the /dist folder. Then refresh this page.
</p>
</body>
</html>