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:;;
Render a card
// Author a card// In practice you'll probably get this from a service// see http://adaptivecards.io/samples/ for inspirationlet 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 instancelet adaptiveCard = ; // Use Fabric controls when rendering Adaptive CardsACFabric; // Set its hostConfig property unless you want to use the default Host Config// Host Config defines the style and behavior of a cardadaptiveCardhostConfig = 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 cardadaptiveCard { ; } // Parse the card payloadadaptiveCard; // Render the card to an HTML element:let renderedCard = adaptiveCard; // And finally insert it somewhere in your page:documentbody;