Adaptive Cards Fluent UI controls

This package "lights-up" the Adaptive Card renderer with Microsoft's Fluent UI controls.

Extended Controls

| AdaptiveCard Element | Fluent 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-fluentui

IMPORTANT: 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 ACFluentUI from "adaptivecards-fluentui";

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.3",
	"body": [
		{
			"type": "Image",
			"url": "https://adaptivecards.io/content/adaptive-card-50.png"
		},
		{
			"type": "TextBlock",
			"text": "Hello **Adaptive Cards!**"
		},
		{
			"type": "Input.Text",
			"placeholder": "Enter your name",
			"label": "Name",
			"isRequired": false,
			"style": "text",
			"id": "Name"
		}
	],
	"actions": [
		{
			"type": "Action.OpenUrl",
			"title": "Learn more",
			"url": "https://adaptivecards.io"
		},
		{
			"type": "Action.Submit",
			"title": "Submit"
		}
	]
};

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

// Use Fluent UI controls when rendering Adaptive Cards
ACFluentUI.useFluentUI();

// 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) {
	var message = "Action executed\n";
	message += "    Title: " + action.title + "\n";

	if (action instanceof AdaptiveCards.OpenUrlAction) {
		message += "    Type: OpenUrl\n";
		message += "    Url: " + action.url + "\n";
	}
	else if (action instanceof AdaptiveCards.SubmitAction) {
		message += "    Type: Submit\n";
		message += "    Data: " + JSON.stringify(action.data);
	}
	else {
		message += "    Type: <unknown>";
	}

	alert(message);
}

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