SharePoint Control to Render Adaptive Cards

Key Takeaways

[Music] hi everyone my name is Chieko Bernier my company is Tahoe ninjas and this is a picture of me when I used to have a lot of hair I can be reached at twitter at Bernie Bernie age and my blog style ninjas that blog I am Microsoft MVP as we mentioned before but I'm also a proud member of the patterns and practices a virtual team and so if you've if you haven't had a chance to visit the patterns and practices site there's all sorts of resources around you know tools SDKs and things like that that you can use in your own solutions around Microsoft 365 development I put the QR code there in the corner in case you're interested but the other thing that I'm part of is something called D it started as a Toronto citizen developer user group but we've just renamed it the this is in developer user group our focus was to create you know a group that is not about selling products to people and it's not really intended for the for the geeks it's intended for the the citizen developers the people that want to make a difference in their organization and they're not necessarily coders or developers but it's also around having conversations with the IT decision makers and the developers around how do we empower citizen developers and organizations without creating shadow IDs so we meet the first Wednesday of every month and the URL is at the bottom here TC Doug comm and while the primary focus has been around the power platform we consider and I hope everyone to call agrees that we consider adaptive cards absolutely a citizen development resource and that's where the idea for this website came came about so the web part that you're going to see today is actually a sample that's already published and the repository put the QR code there the URL is way too long for me to even say it if you are looking for that we're part and you can't remember the URL just remember to go to aka.ms/offweb parts again the QR code is there and so this is actually a site that we built that allows you to find all sorts of samples for SharePoint web parts using the SharePoint framework and there's as you can see there's also two samples angular react everything and the the web part that's highlighted in green there is the web part that we're talking about and as you can see it was changed very recently as early as well today and that's what I'll be showing you today so before I start I want to say I want to thank a couple people that the sent me messages as or opened issues as early as twenty one hours ago to tell me that the sample web part that I had created and polyphen also created a version of this web part they were broken or more specifically the adaptive card template component was broken because of the May 20 2008 so I I fixed it at the last minute last night I must admit that it's a total hack my fix but I do plan on updating as soon as there's an updated NPM package I will update the the adaptive card templating functionality but you can you can use the new adaptive card templates it mostly works right now but you can also use the the old adaptive card template schema all right let's show you the web part to get started so this is a SharePoint framework web part and it was totally built as an example on how to use adaptive cards in SharePoint this is not really intended for for de to be used in production although if you if you choose to do that you're more than welcome to do so what we did do though behind the scene is that I created a adaptive card component a react component that you'll be able to use in your own web parts and the component what it does behind the scene is it make sure that it looks the the if cards are rendered in a way that looks and feels like it belongs to SharePoint it uses the fabric or fluid styles now but it's also absolutely a monster and reacts to it is confusing with fluid and fluent the uses the fluid design right okay but it's a it's also designed to do with changing themes and section colors of the web part so when you drop the web part in and this is actually the web part that's really running right now from from my computer right here and as you can see it's running when you drop the web part it'll say hey let's get this configured you need a template and what we did here is we made it possible for you to pick from enter JSON here or enter a URL for this sample I'm going to use some JSON I've prepared some JSON and you know trying to do some shameless plugs here of you know here's where to go get the the schema here's to get more information we really wanted to make this as easy as possible for for people to use so let's get my first sample I believe that's the red one and we've made it easy here for you to edit with some syntax highlighting and if I paste that and the demo gods are with me this should be working yes it does work okay great and while we're there let's just show you how we can actually use if I edit the section here and I change the background well it's probably not a very exciting demo here but the background is designed to react to to changing themes you'll notice there's a little I have a little issue here with the highest contrast the strong contrast backgrounds with the the buttons are actually the same color as the background this is something I'd love to talk to someone in the adaptive card game to to align the themes so that we can do something that's a high contrast and good for accessibility and that web private also works if you go in high contrast mode and if the web part wants to work you'll notice dear adaptive card host and if I take the same JSON that I pasted it before you should see that we have now a high contrast web part that also responds to the changing themes okay let's continue the other thing that I can do again I've got some other samples here so let's use a sample with data because we do support adaptive card templating and what we do here is we detect if you're using adaptive card complaining we just kind of tried to help you so if you if you're using this we say turn on adaptive card templating and then from this what we've done is we've actually given you the option to pick data from JSON pick data from a list on your SharePoint site or pick data from a URL we are planning on adding things like dynamic data sources you know so that we can have dynamic data from other webparts but let's just start with getting some data and let me know if I'm going too fast I hope that everyone can see my screen I do like my resolution to be really high it's like four thousand by three thousand so I had to zoom in a lot to prepare for this to home so after everything goes well and you know Matt you're like the the adaptive card equivalent of hello world right sometimes I have to take selfies with people cuz they're like wait I didn't know you were a real person you all have my like a bird badge of a time I all right that's right so if I if I just prove that I'm not lying here I just changed the data and I think I copied it this is a picture Paul I think Paul's in the call I want to shout out to Paul because Paul actually took this sample web part that I've created and he really quickly created a react hook version of the exact same web part and so if you're interested in learning about react hooks and understanding what's the difference between react and react hooks great thing to do is just go look at my web part and look at Paul's web part and you can you'll be able to see the differences thanks to Paul for his help of this and he's also added some of the cool features like loading from URLs alright let's go look another example here so if I change my template here ooh something really boring I was not I didn't have a lot of inspiration when I created this sample template here you can actually go pick from a list and you can get a data and that's kind of hard to show here at this resolution but it's actually giving me a list of all that I'm gonna zoom in a little bit so I can I can show you this so I can get the list of documents here and this data is actually coming from SharePoint now to be perfectly honest I would never recommend to use adaptive cards for some doing something dis boring you know there's in SharePoint you have the ability to use list formatting and view formatting to do pretty much the exact same thing but if you were inspired and you wanted to create a crazy template you know that at some point you'll reach the limitations of what list and view formatting is capable and SharePoint but you can absolutely do it using adaptive card templating so hopefully you have a better imagination than I do when it comes to creating templates alright anybody want to see some code so I actually took screenshots of the code because demoing code and Visual Studio code is always painful I'm gonna try to go as quickly as possible again if you have any questions about this feel free to reach out to me let's get started first thing is in the project itself I've created the web part call adaptive card Post web part if you and we'll talk about this later but you absolutely have the ability to take the component that I've created and you can drop that in your own web part if you want to but this is the web part I just mo this is how it works so the first thing that we do in this web part is we actually make the web part theme aware by giving it a theme provider and by getting the theme variant from the header and then we subscribe to an event so that when people change the themes or the change of background colors the web part is automatically notified and it just makes the web part redraw and then we just when we call the adaptive card host component we just pass it the theme variant and the component will take care of of applying the themes another thing that we do in this web part is that anything that's intensive in terms of resources like for example we have the code editor property pane that shows up you probably don't want to load that every single time someone is looking at a web part especially if they're just looking at it in View mode not edit mode so there's this feature in a SharePoint framework whipper that allows you to defer loading the resources your property pain needs to only when you need to display the property pain it's a kind of crazy idea but it works perfectly so that's what we do here is we just kind of do import the code editor in this case and we only do that when you display the web part and then we just set that in the property pane now the component itself is really what's responsible for rendering the body of the web part so the adaptive card host and tsx is where the logic for rendering the what you saw and you know what we do is we actually if we need a template we use the the PNP reusable control placeholder component that will tell you hey you need to give us a template if we need the data we do the same thing we say hey you selected you want to use adaptive card templating with you didn't give us data yet so please give us that and then this is really where all the hard work gets done this is the component that that we built that is is really wrapper around the adaptive card NPM packages but it's it it is designed to work with in SharePoint so it takes the template JSON it takes the data it takes a flag whether we use templating or not and it takes a theme variant but the other thing that does is it actually will bubble up any action element in the adaptive card so if someone clicks on a button or a link or something like that your the web part that is calling the critical component will actually get notified and you can do whatever you'd like with that so in the adaptive card control and misses again to control that we've designed for you to embed it it in your own web parts if you want to or you can use the web part that I'm demoing we do a few things so the first thing is we use the adaptive card and now this is this is really stressful because I get Matt on the call and he's probably camped my code saying what were you thinking and so we create the adaptive card we tell it to use the fabric controls which is a great there's an NPM package from the adaptive cares team that that allows you to load fabric controls or fluent or fluid whatever it's called now and then we just parse the card in wet part because we want to do to support pretty much all the this every schema or every element of the adaptive card we also use markdown support because you know adaptive cards support markdown so we actually just after we've parsed the adaptive card we go back in and if we find any HTML that has marked down in it we render HTML and we give you some nice HTML rendering and this is the part here where we did all the work around capturing all the themes and what we've tried to do is and this is honestly I just manually went theme by theme and I try to set up the host configuration you say these are the colors that we need and so there's a there's a few sections for example as you can see here right here it's not letting me highlight so we'll just we'll just skip that for now this part here for some reason it was unable to grab to success text from from the SharePoint context but you know in general the theme works again we do some have some issues with the the button color being the same colors the background color in high contrast environments but I'm sure it's it's probably a matter of something I didn't know how to fix and then the other thing that we had in this in this component is we had done property field view picker that was responsible for picking the view from your list for me to document library we've since then actually taken this out of the code sample and we've actually moved it as a PMP reusable control so the PMP reusable controls if you haven't used that yet you can go to this long URL here or you can again go to the aka that ms /m 365 PMP where all the PMP initiatives are listed but this is a library this is a package story that you can add in your SharePoint projects to use all sorts of controls and you know but wait if you order now you'll also get in the in the future in the near future I'm planning on publishing the adaptive card control core SharePoint that you just saw inside a web part I'm planning on posting it as a PMP reusable control so for you to to use adaptive cards in your SharePoint projects you won't have to copy the code you'll just use the PMP library using the package command here I'm totally planning on updating this web part well of course as soon as I can do a permanent fix for adaptive card templating I will do that but in in the plans are is to add access to the service also our intention was to add the card editor right into the web part and I totally dig the creating a card from an image so I might have to borrow that and put that in the web part I'm always looking for ideas and inspirations though the goal here is to create something that will be useful for the community so if you have any feedback please don't hesitate to reach out to me that's pretty much it for me Matt if you ask question that's awesome yeah I'm glad you covered the end about just yeah making a reusable control I think that's a that's cool I particularly loved the thorough attention to detail you put to walk people through it for example detecting when it looks like a template the configuration options were great including the additions Paul made to load from URL I mean that was a it looks like a pretty solid thorough user experience thank you [Music]