adaptivecards-fabric

Adaptive Cards Fabric

This package "lights-up" the Adaptive Card renderer with Office Fabric UI input controls.

Extended Controls

AdaptiveCard Element	Office Fabric UI Control
Input.Date	DatePicker
Input.Number, Input.Text, Input.Time	TextField
Input.Toggle	Toggle
Input.ChoiceSet (style:compact)	Dropdown
Input.ChoiceSet (style:expanded, isMultiSelect:false)	ChoiceGroup
Input.ChoiceSet (style:expanded, isMultiSelect:true)	Checkbox
Actions	Button

Install

npm install adaptivecards-fabric

NOTE: you must also install the necessary peer dependencies:

• adaptivecards
• @fluentui/react
• react
• react-dom

Usage

Import the module

// Import modules:
import * as AdaptiveCards from "adaptivecards";
import * as ACFabric from "adaptivecards-fabric";

Render a card

// Author a card
// In practice you'll probably get this from a service
// see http://adaptivecards.io/samples/ for inspiration
let card = {
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "Image",
            "url": "https://adaptivecards.io/content/adaptive-card-50.png"
        },
        {
            "type": "TextBlock",
            "text": "Hello **Adaptive Cards!**"
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "Learn more",
            "url": "https://adaptivecards.io"
        },
        {
            "type": "Action.OpenUrl",
            "title": "GitHub",
            "url": "https://github.com/Microsoft/AdaptiveCards"
        }
    ]
};

// Create an AdaptiveCard instance
let adaptiveCard = new AdaptiveCards.AdaptiveCard();

// Use Fabric controls when rendering Adaptive Cards
ACFabric.useFabricComponents();

// 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!"); }

// Parse the card payload
adaptiveCard.parse(card);

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

// And finally insert it somewhere in your page:
document.body.appendChild(renderedCard);