How to use adaptivecards - 10 common examples

this.createAdaptiveCard = memoize(content => {
      const card = new AdaptiveCard();
      const errors = [];

      // TODO: [P3] Move from "onParseError" to "card.parse(json, errors)"
      AdaptiveCard.onParseError = error => errors.push(error);

      card.parse({
        version: '1.0',
        ...content
      });

      AdaptiveCard.onParseError = null;

      return {
        card,
        errors
      };

data.payload.forEach((activity) => {
                // Create an AdaptiveCard instance
                const adaptiveCard = new AdaptiveCards.AdaptiveCard();

                // Host Config defines the style and behavior of a card
                adaptiveCard.hostConfig = new AdaptiveCards.HostConfig({
                    containerStyles: {
                        default: {
                            backgroundColor: "#FF37474F",
                            foregroundColors: {
                                default: {
                                    default: "#FFEEEEEE",
                                    subtle: "#FFEEEEEE"
                                }
                            }
                        }
                    },
                    fontFamily: "Segoe UI, Helvetica Neue, sans-serif"
                });

render() {
        if (!this.props.open || !this.props.template) {
            return null;
        }
        let card: HTMLElement | null = null

        try {
            const template = getProcessedTemplate(this.props.template, this.props.actionArguments, this.props.hideUndefined)
            
            AdaptiveCards.AdaptiveCard.onProcessMarkdown = ((text, result) => {
                result.outputHtml = this.md.render(text)
                result.didProcess = true
            })

            const adaptiveCard = new AdaptiveCards.AdaptiveCard()
            adaptiveCard.hostConfig = this.getAdaptiveCardHostConfig()
            adaptiveCard.parse(template)
            card = adaptiveCard.render()
        }
        catch (e) {
            // Ignore error, show error message below
        }
        return (
            
                <div>
                    <div></div></div>

addTextBlock(text: string, template: Partial, container: Container = this.container) {
    if (typeof text !== 'undefined') {
      const textblock = new TextBlock();

      // tslint:disable-next-line:forin
      for (const prop in template) {
        textblock[prop] = template[prop];
      }

      textblock.text = text;

      container.addItem(textblock);
    }
  }

public getHostConfig(): HostConfig {
        return new HostConfig({
            spacing: {
                small: 3,
                default: 8,
                medium: 20,
                large: 30,
                extraLarge: 40,
                padding: 10
            },
            separator: {
                lineThickness: 1,
                lineColor: "#EEEEEE"
            },
            supportsInteractivity: false,
            fontFamily: "Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;",
            fontSizes: {
                small: 12,

export const adaptiveCards: Reducer = (
    state: AdaptiveCardsState = {
        hostConfig: null
    },
    action: AdaptiveCardsAction
) => {
    switch (action.type) {
        case 'Set_AdaptiveCardsHostConfig':
            return {
                ...state,
                hostConfig: action.payload && (action.payload instanceof HostConfig ? action.payload : new HostConfig(action.payload))
            };

        default:
            return state;
    }
};

public getHostConfig(): HostConfig {
        return new HostConfig({
            spacing: {
                small: 3,
                default: 8,
                medium: 20,
                large: 30,
                extraLarge: 40,
                padding: 10
            },
            separator: {
                lineThickness: 1,
                lineColor: "#EEEEEE"
            },
            supportsInteractivity: false,
            fontFamily: "Lato, Segoe UI, sans-serif",
            fontSizes: {
                small: 12,

public getHostConfig(): HostConfig {
        return new HostConfig(windowsNotificationConfiguration);
    }
}

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const react_dom_1 = require("react-dom");
const react_redux_1 = require("react-redux");
const adaptivecards_1 = require("adaptivecards");
const Chat_1 = require("./Chat");
const adaptivecardsHostConfig = require("../adaptivecards-hostconfig.json");
const defaultHostConfig = new adaptivecards_1.HostConfig(adaptivecardsHostConfig);
function cardWithoutHttpActions(card) {
    if (!card.actions)
        return card;
    const actions = [];
    card.actions.forEach((action) => {
        //filter out http action buttons
        if (action.type === 'Action.Http')
            return;
        if (action.type === 'Action.ShowCard') {
            const showCardAction = action;
            showCardAction.card = cardWithoutHttpActions(showCardAction.card);
        }
        actions.push(action);
    });
    return Object.assign({}, card, { actions });
}

public getHostConfig(): HostConfig {
        return new HostConfig({
            spacing: {
                small: 3,
                default: 8,
                medium: 20,
                large: 30,
                extraLarge: 40,
                padding: 10
            },
            separator: {
                lineThickness: 1,
                lineColor: "#EEEEEE"
            },
            supportsInteractivity: false,
            fontFamily: "Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;",
            fontSizes: {
                small: 12,