Adaptivecards: React

[jonathanmachado]

I am working with the react library and the new concept of adaptativecards presented by microsoft and I have the following doubt when I make the render this returns me [object HTMLDivElement] I tried to make a parser of the html and I managed to place it, the problem is that when performing This parser is not doing the binding of the cards example click, someone could help me with this problem.

[danmarshall]

Hi @jonathanmachado , stay tuned, we will add a sample.

[danmarshall]

You are correct in that you cannot use the HTML of the card, because there are event handlers attached to nodes. Instead, append the card node to your React element when the component mounts. Here is an example in TypeScript:

import * as React from 'react';
import * as AdaptiveCards from "microsoft-adaptivecards";

export interface Props {
    content: any
}

export class AdaptiveCardContainer extends React.Component<Props, {}> {
    private div: HTMLDivElement;

    constructor(props: Props) {
        super(props);
    }

    componentDidMount() {
        var adaptiveCard = new AdaptiveCards.AdaptiveCard();
        adaptiveCard.parse(this.props.content);
        const renderedCard = adaptiveCard.render();

        this.div.appendChild(renderedCard);
    }

    render() {
        return (
            <div ref={div => this.div = div} />
        )
    }
}

[dclaux]

@jonathanmachado , in addition to what @danmarshall pasted above, you'll probably want to handle some events to support actions. You will need to add the following code:

AdaptiveCards.AdaptiveCard.onExecuteAction = <your onExecuteAction event handler>;
AdaptiveCards.AdaptiveCard.onShowPopupCard = <your onShowPopupCard event handler>;

[jonathanmachado]

Thanks @dclaux and @danmarshall my problem it's resolved, nice working in this project.

I am very happy to be able to solve it.