Rendre une carte-JavaScriptRender a card - JavaScript

Voici comment afficher une carte à l’aide du kit de développement logiciel (SDK) JavaScript.Here's how to render a card using the JavaScript SDK.


Importation du moduleImport the module

// import the module
import * as AdaptiveCards from "adaptivecards";

// or require it
var AdaptiveCards = require("adaptivecards");

// or use the global variable if loaded from CDN

Effectuer le rendu d’une carteRender a card

// Author a card
// In practice you'll probably get this from a service
// see for inspiration
var card = {
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
            "type": "Image",
            "url": ""
            "type": "TextBlock",
            "text": "Hello **Adaptive Cards!**"
    "actions": [
            "type": "Action.OpenUrl",
            "title": "Learn more",
            "url": ""
            "type": "Action.OpenUrl",
            "title": "GitHub",
            "url": ""

// 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

// Set the adaptive card's event handlers. onExecuteAction is invoked
// whenever an action is clicked in the card
adaptiveCard.onExecuteAction = function(action) { alert("Ow!"); }

// For markdown support you need a third-party library
// E.g., to use markdown-it, include in your HTML page:
//     <script type="text/javascript" src=""></script>
// And add this code to replace the default markdown handler:
//     AdaptiveCards.AdaptiveCard.onProcessMarkdown = function (text, result) {
//         result.outputHtml = markdownit().render(text);
//         result.didProcess = true;
//     };

// Parse the card payload

// Render the card to an HTML element:
var renderedCard = adaptiveCard.render();

// And finally insert it somewhere in your page: