Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including adaptivecards-fabric with all npm packages installed. Try it out:

require("adaptivecards/package.json"); // adaptivecards is a peer dependency. require("office-ui-fabric-react/package.json"); // office-ui-fabric-react is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var adaptivecardsFabric = require("adaptivecards-fabric")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

adaptivecards-fabric v1.0.4

Adaptive Cards Office Fabric based extension

Adaptive Cards Fabric

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

Adaptive cards fabric animation

Extended Controls

AdaptiveCard ElementOffice Fabric UI Control
Input.DateDatePicker
Input.Number, Input.Text, Input.TimeTextField
Input.ToggleToggle
Input.ChoiceSet (style:compact)Dropdown
Input.ChoiceSet (style:expanded, isMultiSelect:false)ChoiceGroup
Input.ChoiceSet (style:expanded, isMultiSelect:true)Checkbox
ActionsButton

Install

npm install adaptivecards-fabric

NOTE: you must also install the necessary peer dependencies:

  • adaptivecards
  • office-ui-fabric-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);
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free