96 lines
No EOL
2.5 KiB
HTML
96 lines
No EOL
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Adaptive Cards Example</title>
|
|
|
|
<script src="https://unpkg.com/markdown-it@8.4.0/dist/markdown-it.js"></script>
|
|
|
|
<style type="text/css">
|
|
#exampleDiv {
|
|
width: 250px;
|
|
border: solid 1px black;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
function renderCard() {
|
|
|
|
// author a card
|
|
// in practice you'll probably get this from a service
|
|
// see http://adaptivecards.io/samples/ for inspiration
|
|
var card = {
|
|
"type": "AdaptiveCard",
|
|
"version": "1.0",
|
|
"body": [{
|
|
"type": "Image",
|
|
"url": "http://adaptivecards.io/content/adaptive-card-50.png"
|
|
},
|
|
{
|
|
"type": "TextBlock",
|
|
"text": "Hello **Adaptive Cards!**"
|
|
}
|
|
],
|
|
"actions": [{
|
|
"type": "Action.OpenUrl",
|
|
"title": "Learn more",
|
|
"url": "http://adaptivecards.io"
|
|
},
|
|
{
|
|
"type": "Action.OpenUrl",
|
|
"title": "GitHub",
|
|
"url": "http://github.com/Microsoft/AdaptiveCards"
|
|
}
|
|
]
|
|
};
|
|
|
|
// Create an AdaptiveCard instance
|
|
var adaptiveCard = new AdaptiveCards.AdaptiveCard();
|
|
|
|
// Set its hostConfig property unless you want to use the default Host Config
|
|
// Host Config defines the style and behavior of a card
|
|
adaptiveCard.hostConfig = new AdaptiveCards.HostConfig({
|
|
fontFamily: "Segoe UI, Helvetica Neue, sans-serif"
|
|
// More host config options
|
|
// You can find example configs here: https://github.com/microsoft/AdaptiveCards/tree/master/samples/HostConfig
|
|
});
|
|
|
|
// Set the adaptive card's event handlers. onExecuteAction is invoked
|
|
// whenever an action is clicked in the card
|
|
adaptiveCard.onExecuteAction = function (action) {
|
|
alert("Ow!");
|
|
}
|
|
|
|
// Parse the card payload
|
|
adaptiveCard.parse(card);
|
|
|
|
// Render the card to an HTML element:
|
|
var renderedCard = adaptiveCard.render();
|
|
|
|
// And finally insert it in the page:
|
|
document.getElementById('exampleDiv').appendChild(renderedCard);
|
|
}
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body onload="renderCard()">
|
|
<h1>Adaptive Cards Example</h1>
|
|
|
|
<p>This example requires a build of the Adaptive Cards library.</p>
|
|
|
|
<h3>To run:</h3>
|
|
<code>
|
|
<pre>$ npm install</pre>
|
|
<pre>$ npm run build</pre>
|
|
<pre>Refresh this page</pre>
|
|
</code>
|
|
|
|
<h3>A card will render below</h3>
|
|
|
|
<div id="exampleDiv"></div>
|
|
|
|
<script type="text/javascript" src="adaptivecards.min.js"></script></body>
|
|
|
|
</html> |