Added 'AdaptiveCardHost' Control

[fabiofranzini]

Added 'AdaptiveCardHost' Control and Documentation

Q	A
Bug fix?	[no]
New feature?	[yes]
New sample?	[no]
Related issues?	mentioned in #1096

What's in this Pull Request?

I added the new 'AdaptiveCardHost' Control used for rendering Adaptive Cards in React using integrated features likes SP and Teams Themes, using Fluent UI React Controls for Elements and Actions and Templating.

[joelfmrodrigues]

Clicking the 'Show Card' button on the test control gives an error, but works if clicked again. The same for closing the card using the button: clicking the first time gives an error, the second time works.

[joelfmrodrigues]

@fabiofranzini I added some comments for some minor things 🙂

[fabiofranzini]

Thanks @joelfmrodrigues I'll check this ASAP 🙂

[AJIXuMuK]

@fabiofranzini - please check out some additional comments I left.
Thanks for the great work!

[fabiofranzini]

Clicking the 'Show Card' button on the test control gives an error, but works if clicked again. The same for closing the card using the button: clicking the first time gives an error, the second time works.

I'm not able to reproduce this bug (whether I use the test webpart with all controls or leaving only the AdaptiveCardHost control.) ... very strange...

I'm trying to remove the useless code from 'updateCssClasses' function and implement like this:

protected updateCssClasses() {
        if (this.renderedElement) {
            this.renderedElement.setAttribute(
                "aria-expanded",
                (this.state === ActionButtonState.Expanded).toString()
            );
        }
    }

[joelfmrodrigues]

Clicking the 'Show Card' button on the test control gives an error, but works if clicked again. The same for closing the card using the button: clicking the first time gives an error, the second time works.

I'm not able to reproduce this bug (whether I use the test webpart with all controls or leaving only the AdaptiveCardHost control.) ... very strange...

I'm trying to remove the useless code from 'updateCssClasses' function and implement like this:

protected updateCssClasses() {
        if (this.renderedElement) {
            this.renderedElement.setAttribute(
                "aria-expanded",
                (this.state === ActionButtonState.Expanded).toString()
            );
        }
    }

@fabiofranzini think I have found the glitch with the error on button click 🙂 seems to happen when running using npm run serve, but not with gulp serve. Are you using gulp serve?

[fabiofranzini]

Clicking the 'Show Card' button on the test control gives an error, but works if clicked again. The same for closing the card using the button: clicking the first time gives an error, the second time works.

I'm not able to reproduce this bug (whether I use the test webpart with all controls or leaving only the AdaptiveCardHost control.) ... very strange...

I'm trying to remove the useless code from 'updateCssClasses' function and implement like this:

protected updateCssClasses() {
        if (this.renderedElement) {
            this.renderedElement.setAttribute(
                "aria-expanded",
                (this.state === ActionButtonState.Expanded).toString()
            );
        }
    }

@fabiofranzini think I have found the glitch with the error on button click 🙂 seems to happen when running using npm run serve, but not with gulp serve. Are you using gulp serve?

@joelfmrodrigues I'm using gulp serve... It's ok?

[joelfmrodrigues]

Clicking the 'Show Card' button on the test control gives an error, but works if clicked again. The same for closing the card using the button: clicking the first time gives an error, the second time works.

I'm not able to reproduce this bug (whether I use the test webpart with all controls or leaving only the AdaptiveCardHost control.) ... very strange...

I'm trying to remove the useless code from 'updateCssClasses' function and implement like this:

protected updateCssClasses() {
        if (this.renderedElement) {
            this.renderedElement.setAttribute(
                "aria-expanded",
                (this.state === ActionButtonState.Expanded).toString()
            );
        }
    }

@fabiofranzini think I have found the glitch with the error on button click 🙂 seems to happen when running using npm run serve, but not with gulp serve. Are you using gulp serve?

@joelfmrodrigues I'm using gulp serve... It's ok?

Sure, maybe a bug with spfx-fast-serve then. If it works with gulp serve then it's all good I think. As a side note, if you don't generally use fast serve I strongly advise you to give it a try as it's insanely fast

[fabiofranzini]

@joelfmrodrigues and @AJIXuMuK I just committed the changes... Please check now and of course many thanks for your feedback 🙂

[fabiofranzini]

@joelfmrodrigues @AJIXuMuK let me know if I must Squash this three commits or not.
I added a small fix, in the last commit, the return value for 'get value()' prop for the FluentUIDateInput to the correct format. 🙂

[AJIXuMuK]

Thanks again @fabiofranzini for the great contribution!

[fabiofranzini]

Thanks again @fabiofranzini for the great contribution!

It's a pleasure! I'll do more contributions in the next months 🙂