Microsoft 365 Community Microsoft Teams, 23 Apr 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Adaptive Cards Host SharePoint Framework web part

Description

In this 13-minute developer focused demo, Hugo Bernier delivers both a SPFx web part (Adaptive Cards Host) that you can use to display Adaptive Cards in your SharePoint applications and the core AdaptiveCards control responsible for rendering the card. The Host web part works with any/all Adaptive Card schemas (available at https://adaptivecards.io) and it will render them as if they were native to SharePoint. The web part allows you to configure template JSON and – optionally – data JSON to render, specifically for this demo, the “Activity update sample” from the adaptivecards.io site. In time, the AdaptiveCard control will be made available in the PnP reusable controls library. This demo is extracted from the bi-weekly PnP community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded April 23, 2020.

Presenter: Hugo Bernier (Tahoe Ninjas) | @bernierh

Supporting materials:
• Adaptive Cards Host | https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-adaptivecards
• Adaptive Cards web site | https://adaptivecards.io/

All Microsoft 365 & SharePoint Community - PnP demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o

Learn more about the SharePoint developer community at: http://aka.ms/m365pnp

A

My name is Hugo Bernier. You can find me on Twitter or on my blog and today, I'll be talking to you about the adaptive card web part sample that I created. So adaptive cards is an initiative by Microsoft that allows you to create user interfaces. That are, you know, trying to really make the the host of where your your content is presented.

A

So you can actually, as you can see on this on the screen now. This is from the Microsoft website called adaptive cards that IO and what they have here is they have different the same adaptive card, that's presenting in different different hosts, so in Skype or in different things like that I recommend you go take a look at this, but that's the web part that I'll be showing you today. The adaptive cards website has tons of samples, so you can see here it what what it does. It uses a JSON structure.

A

In some cases it uses the data structure as well the cool thing about the data structure. It's pretty much any data that you get from any yeah. You can just plug it in to the the adaptive card and then using your your template, JSON, you can decide how to find the path to your your data, and you can present that data so I'm going through here.

A

All the samples there are some that are really useful, some that are not so useful, but it really goes a long way to illustrate that there, the richness and the breadth of experience, experiences they can deliver with the rich cards. The a debit card site also has a designer that allows you to create your adaptive cards. So this is me just I'm I'll just update here, one of the adaptive cards.

A

You know my flight is delayed forever because of this whole pandemic, but if I take this card now and I actually show it through different user interfaces, you might notice that these experiences are very familiar because you're already using adaptive cards.

A

So this is the web part I like to create web parts that walk users through the the process. So when you drop the web part, it says, configure your adaptive card and then you have a choice here to pick JSON or submit a URL to the template. This functionality is actually something that was added minutes after I did my pull request to the samples repo by polishe Flynn. He actually added this functionality. It's it's a great example of again community people getting together and just doing some you know contributing together to make things happen.

A

So what I'll do here? I'll go to the adaptive cards website and I'll put I'll pick one of the samples from the adaptive cards website. It's the first sample that shows up for those of you who want to follow along at home. It's the first sample that shows up on the adaptive cards website and as soon as I do this. You see that it creates this web part here.

A

That's you know pretty simple, but the one thing that I did here is I made these adaptive cards work, they're, responsive, they'll, work on whatever sizes you have, but they also work they're designed to actually work. On the background now there is a little issue that I found with the strong backgrounds where the the buttons are the same color as a strong background, and that's actually something that I'd love to to figure out.

A

If anybody is an expert in semantic coloring help me figure out how to do a good difference here between the background, color and the buttons. But it's also theme aware so: I'll I'll spare you the process of going through the themes here. But if I change this to a different theme, you would actually see that it's actually working on the you know the black background, for example. Now the other thing that I can do is I can take a different sample that uses data instead.

A

So because what I've done in this JSON here, if I show you the template oops, if I show you the template here, it should.

B

A

A

What what I'm doing here is I'm actually creating a template that doesn't have any data and when I'm doing when I detect it you're using a template that doesn't have data built in it's using the adaptive card. Templating features, I kind of give you a little tip here. I say: go and configure this for you, so I'm actually gonna turn on adaptive templating and then it's saying hey. You need some data I'm trying not to insult people here, but I'm always trying to help people figure out.

A

What's going on so in this case, I'll just use some JSON that I extracted from I can't remember where I got this from, but as soon as it plugged, it's in the data is actually coming in now. What I've also done is I've actually used.

A

So if I actually change here the data just for fun to prove you that I'm not lying. So if I change this, this is actually Paul who helped me with this web part. But I can also take some data from a SharePoint list or from a URL. So if I change the template here,.

A

B

A

Boring template when I'm just getting the ID filename the editor and then, if the demo gods are with me, I. Actually, you know what I need to do this on this one. So give me one second here.

A

Don't pick a list so I'm using the documents list and I'm using a view called the top five and if everything goes well, it should actually be pulling the data from a SharePoint list. Now, honestly, I wouldn't recommend you use the adaptive cards to create a list like this, because we already have an awesome list, rendering engine that does that. But if you wanted to do some, you know crazy user interfaces that are not possible to do using the the list and plating style.

A

You can actually use the adaptive cards to do that and adaptive cards also support things like event. So I can I can have click. Events, I can have submit events, and things like that.

A

The web part supports that and when I built this web part and I'll show you the code in one minute when I built this web part I actually designed it, so that the adaptive card control is actually a separate control that maybe, if, if there's enough interest, I'll be submitting it to the react, reusable PNP controls, but I also added this new property gain control, which is a view picker, which I've also submitted to the the react property pane, shared component library.

A

B

A

There's no questions I'll and I I'm, hoping that Patrick Rivera. If there's any questions that are pressing you'll, let me know, there's no question what I'll do is I'll go back to the code.

A

All right, so the first thing to look at here is kind of the structure and I like to take screenshots of my code just to help soom in and do things like that. I hope you don't mind. This is real code, I promise. So the first thing is the adaptive card host web part itself, and really all it does, is it's responsible for forgetting the theme and then calling the data if it needs to and then calling the adaptive card control that I've created.

A

The first thing that we do if we want a webpart to actually be Demonware, is to just connect to the the service scope to consume the theme provider service and then the next thing we do is we extract the theme variant from the theme provider and it it's not guaranteed a little always work. So it's important to to do a try, get theme and in your code should always handle it.

A

What happens if the theme is not provided, and then the, if you want the web part to redraw when your theme gets changed, it's important to have a handler for the theme changed event. In my case, when the theme changes I just redraw the web part, but you could do any logic you want and then, when I called the adaptive card host, you know control a component. I passed the theme variant and it will be responsible for picking the colors.

A

It needs from the theme if there is a theme available and on one last little trick here for the web. Part is one of the things you may have noticed is I'm using a code, editor control which is available from the PNP, reusable property, pane controls. But you know it's actually loading a whole code, editor behind the scene and in reality, I don't need that code editor any other time than when I'm showing the property pane. So, instead of loading it every single time when the web cart loads.

A

What I'm doing here is I'm using a method called load property pane resource. If you add this to your web pervert code, it gives you the opportunity to load to load components and then it'll only get called when the property pane is called, which is great as it's one way to reduce the load on your web part.

A

That's what I do here, I kind of do an import, asynchronous import and then I'll just create a control just before it's displayed now, in this case, what I do is I actually create a private variable, I store that so that I can display it when I'm ready to show the web part. So on the component side, it's what I'm doing is not very exciting. I'm, actually saying: look if there's. If there's no template scream at people, if I need data, you know be helpful and tell people hey.

A

You need data, otherwise, just called the adaptive card control that I've created and what I do here is I have a a action handler if you want to handle again a submit or click or something like that. I also pass things like the theme variant and things like that and I'm sorry I'm, going through really quickly through the code here.

A

I hope you don't mind yeah, so the adaptive card control itself is the one that does the magic and I'm actually using a library from the DEP gift card team and I've, just added kind of flavors to make it work in within SharePoint.

A

The first thing that I do is I just initialize a new adaptive card and then I tell it to use the fabric components. This is not something I. Did the adaptive card team actually built in this logic to handle using fabric UI or is it UI? 5 I always get confused and then what I do is I just say: parse the card and the card gets the the template and the data.

A

One extra thing that I do is because adaptive cards are actually very marked down friendly and it does not handle a markdown in your adaptive card itself, but the adaptive card library does give you a functionality. If you want to handle markdown handling, you can add that so in this case, I use a library called marked NIT, which grabs the the markdown and renders HTML from it.

A

And then this is very cheesy, but what I do is I grab the theme colors from the variant and I go in and I plug all the the host configuration for the adaptive card so that I get all the fancy semantic colors and background colors. There was one the success text that I found was not exposed. You know normally I should be able to type semantic colors dot success text, it's actually not exposed, like the other ones, I suspect it so either oversight on the on the symmetric, colors side or on my side it happens.

A

So finally, there's this one. You know this is the bonus feature, but the property field view picker, it's it's that that thing that allows you to select a library and once you've selected library, it lists the views that are available to you. What I did here and I'm, not ashamed to say it I, copied and pasted the property field list picker from the react.

A

Reusable property, pane controls and I just added logic here to list the views instead of the libraries. That's it for me. If there's any questions, I'll be checking the chat window back to you. Folks,.

B

Fantastic, so another awesome demo. Thank you so much for that very cool to see the adaptive cards and how they're being used.