Microsoft 365 Community Community Demos, 12 Jan 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Adaptive Cards design samples for Viva Connections

Description

In this 14-minute developer-focused demo, Alex Clark shares a brief overview of Viva Connections Dashboard and Cards along with the Adaptive Card samples repo. Add an Adaptive Card template to a Dashboard page. Populate template with JSON from Adaptive Card Designer. Learn about Card JSON (the design) and Data JSON file (static data). Not shown is building out more robust “custom” cards – full SPFx ACE extensions that connect various end points, LOB systems, etc. Develop basic cards in Adaptive Card Designer or in VS Code.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 12, 2023.

Demo Presenter
📺 Alex Clark (Microsoft) | @sharepointalex

Supporting materials
• Templates - Adaptive Card templates - design examples | https://github.com/pnp/AdaptiveCards-Templates
• Documentation - Build your first SharePoint Adaptive Card Extension | https://learn.microsoft.com/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension
• Learn - Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections | https://learn.microsoft.com/training/modules/sharepoint-spfx-adaptive-card-extension-card-types
• Documentation - Adaptive Cards Template Language | https://learn.microsoft.com/adaptive-cards/templating/language
• Tool – Adaptive Cards Designer | https://www.adaptivecards.io/designer/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls

A

Foreign, so I'm going to take you through a repository that we've got on GitHub uh relatively new when it's been there for a while, but we kind of wanted to to raise awareness of it a little bit, and these are samples for Viva collections. I've got some slides just to give a little bit of context. I won't spend too much time on on slides and then we'll dive into the into the.

B

A

Repo and just a little bit about me for those that don't know me so my name's Alex Clark, there's my Twitter handle. If you do follow me, you'll see lots of stuff that either is related to two or four wheels or photography, uh occasionally a little bit of running um so I'm A Cloud solution, architect at Microsoft, been working with SharePoint for a very very long time now. So that is me and here's. What we're going to cover so I'll do a really quick overview of either connections.

A

Just conscious, there's a lot of you on the call I'm, not sure um you know everyone's sort of level of experience, so I'll give a really quick overview of what Viva connections is and obviously for a lot of you. You might already know um I'll talk a little bit around the dashboard and then we'll dive into what these kind of samples are, what they do and then I'll do a quick demo of the samples in action.

A

So leave a connections for those of you that don't know what it is I'm assuming by being on this call. You've probably got a good idea, but in essence, fever connections is part of our Viva Suite.

A

um It's powered by modern SharePoint, so typically a SharePoint home site, which is normally going to be your intranet embedded in teams. So we've got a dedicated teams app, which is now there and teams admin Center that you can go and allow Brands put your own company logo Etc, build your intranet site and then deliver that into teams. So we've got the pin that in teams, so employees can access it and get access to the internet straight through teams.

A

So a little bit of an overview, I'll be the connections in general and then I forgot. This next slide was animated, I'm, not really sure what it does, so it just disappeared off the top of the screen, and so with that comes uh the mobile app in teams. So the team's mobile app includes either connections. As you can see in there um we've got different things.

A

We've got the dashboard, which is why I'm going to talk around we've got the feed where we're bringing in news uh from SharePoint and also content from Yammer as well, and the resources tab. Where we've got our nav, where we can navigate uh around our FairPoint intranet, okay and the dashboard samples I'm talking about will render in Mobile there we go perfect, okay, cool all right, so the dashboard, so part of Viva connections is the dashboard, probably one of the the main parts, that's uh different from sort of uh standard SharePoint uh web parts.

A

So this can be kind of considered the the company home for the employee. So if an employee opens the team's uh mobile app um open, Super connections, they'll see the dashboard with all types of cards on it that you can design, and these are great for things like first-line workers who need access to different systems. If you want quick access, then maybe you know book holiday.

A

um Do a payslip things like that. Dashboard is a great place for it. Okay and with the dashboard, you can kind of build this out-of-the-box cards that you can use, but also you can build your own cards and that's kind of what we're going to talk around here. Okay and you can Target these cards um at different employees, so you can Target them at different ad groups. If you want to so, you can have customized dashboards for for each um set of users, so get digging into the dashboard a little bit more.

A

So what we can see in here is at the top. You've obviously got the company name, your navigation bar and then the way that these kind of dashboard works is it's split into ultimately adaptive cards right, so each each dashboard card ultimately is an Adaptive card. Okay and there's different sizes, as you can see, you've got medium cards, you've got large cards um and then obviously the the normal teams interface at the bottom.

A

Okay, and what we're going to talk around is the more custom element um of the card design, as opposed to some of the out-of-the-box cards so onto the samples and shortly we will go into a demo. So what we've essentially got on GitHub is some pre-built samples of cards. Now this is not to be confused with another repo. There is another repo with spfx samples that have been built where you can actually download, deploy those cards obviously into your tenant.

A

We've got actual functionality in there, which is you know, connecting to various endpoints and dynamically pulling from SharePoint Etc. What we've done with this particular repository is. These are almost static samples Okay, so we've crafted um some Json, which we call the card Json, so the actual design for the card with a separate, mostly samples, have it a separate data, Json file where we're storing the data. So this ultimately is static, data and static cards, but they're, very visual, okay, and they are designed to give you inspiration and ideas for building cards further.

A

Okay and these type of cards you're not typically going to use in production, because updating the content of these cards would be very manual. Typically you'll, be building spfx adapted card extensions to actually build full cards with full functionality where we're, maybe connecting to line of Business Systems calling rests endpoints. Those kind of things: okay, I'm not going to demo the SPF exercise- it's been a long long time since so spfx code, so I, don't think I'd. Quite do it justice but I'm going to talk through these samples and how they work.

A

Okay, so to get the full value uh build an fpfx card, but these samples are great for ideation and what we have actually found.

A

um We run a Microsoft Workshop, which I'll talk around right near the end, and we have actually found that a couple of these samples we've got customers using in production with the static data and they're actually just going into the dashboard and updating the the Json believe it or not, and we've got a Commons team that we're like you know, happy to do that and that that particular customer lacks any devs. So they were kind of happy doing it. That way.

A

So you might find you know in some instances, they're actually usable but typically you're, going to build a full samples.

A

So just a screenshot on here before I go into the demo of just some of the samples that we have so typically this this screenshot's updated whenever we get new samples added to the repository and obviously would be very keen for for people to add in examples that they've got into there, but there's various different things from requesting holiday and looking at like a Canteen menu, onboarding company events. So this screenshots just gives you an idea of what is kind of in there at the moment.

A

Okay and then we'll go into an actual demo of these. So give me a minute want to Tab out there. Hopefully, that's changed to uh contoso's fictional intranet now fingers crossed so what I'm going to do is I'm just going to go over to the GitHub repository really quickly, I'll just go to the home of it. Actually. So this is this. Is the GitHub repository adaptive cards templates and when you go here, you will see in the readme uh the screenshot of all of the samples.

A

Okay, there are some additional resources that you can go ahead and read in there as well, and then what you can do is you can dive into the samples so they're all contained within this up. This samples, folder, okay- and these are all of the ones that are available.

A

Okay to you to use and, like I say, be great to get more uh contributions to these, and they do adhere to a sort of standard as well I'm going to drop into this Live Events, one which is one I've built, and what we'll do is we'll actually put it over into the dashboard really quickly. So I can show you how to do that, uh but each sample will have a summary, an image telling you what that sample does kind of what is it what it's compatible with?

A

You can even open it straight in the Adaptive card designer just by clicking it so that will load up the Adaptive card designer with it all pre-populated and ready to go, so you can test it or customize it further. If you want to um and again you know, we've got the the process of how you actually set this up.

A

So if you, if you want to add samples um yeah, if you adhere to um kind of the way we've structured it and that's a good place to start so what we'll do is I'm just going to dip over to the Viva connections dashboard. So here is my dashboard and obviously I've accessed this through the Cog and I've gone into, manage Viva connections gone into view dashboard, and here I am in the dashboard page. Now you can see.

A

My dashboard is huge, mainly because this is where I'm testing all kinds of different things, and but what we'll do is we'll edit, this page really quickly and what I'm gonna do on this loads come on. Come on, oh brilliant! That's always good right! Let me edit the page anyway, so who.

B

A

So we're going to add a card in here and we're going to add a card designer card so when we're building these custom cars, the ones that we drive from the samples we're going to use the card designer. So if I click edit card- let's just put something in here: let's call it uh upcoming Live Events.

B

Alex, could we just increase the size, the uh all the scores.

A

B

Little hard to read the text, that's cool.

A

Thank you. No problem, yeah cool, okay! uh Let me just drop some kind of icon in here there we go. So what I'm going to do in this card designer card here, um I'll, give it a title we'll make it a medium card, doesn't really matter so much for, for what we're doing I'll put an icon in here. I'll, give it a heading, Live, Events, I, don't know something that might see how upcoming Yama Live Events.

B

A

This was actually um kind of inspired by a real life customer uh kind of one that we did when we helped the m88. um So in the actions I'm going to do, show the quick view. Okay and that's what's going to pop up this adaptive card, I'm going to leave the button on actually as well, um even though we could obviously click the card itself to show the quick view, I'll leave the button on there.

A

I always think that looks pretty nice I'm going to show you the quick view as well and then down here in our template.

A

Json all you really need to do and if you come over to the uh the repo, if you take the the main Json file, which is the template, so the schema for the card, we can just take all of this Json we'll go and put that in the template, Json and then in the data Json I'm going to go and take the data Json file, which is here- and this is all of our data right. So this is our actual data.

A

That's going to go in the card happens to be, as you can see, this is just in an array Within within a Json object, so I'm just going to grab that and I'm going to go and put that in the data Json. Hopefully that's going to work and then I am going to save that. Hopefully, it's saving anyway looks like it is there we go.

A

That's been saved, so I'm going to I'll just hit, save draft actually and we'll reload it, and hopefully I can show you that working there we go so I hit that View events and there they are okay.

A

So that's Now using that data now, because this, because we've kind of separated the template from the data, you can actually update the data in this card without having to update the schema. Okay so and I'll do this really quickly in the card designer, rather than do it in the dashboard. All you can actually see is we've got our payload editor on the left. You will actually see references if I scroll down here and to the objects within the uh within the sample data right.

A

So here we're pulling root, dot events, so we're actually pulling from the events array and then we're selecting you know the event title the day. The description Etc, so all I really need to update here is you know, I can just come and update some of the sample data and that's going to then reflect in the card itself if I pop it in preview mode, okay, and so that kind of abstraction is really helpful because you don't need to change the schema.

A

All the time and we'd say that if you were building you know, ideating these cards for for your customers or for yourselves and separating those out is, is really going to help okay, and so that's where the samples are that's what they, what they kind of do and then really quickly. I just want to finish with real, quick couple of slides, and then everyone should finish on time.

A

So what I would say with the samples is use them for demos, inspiration if you're running workshops, um we've got some links and and obviously they'll be posted around how to use the uh the card Json and the data Json. Obviously, we want you to build spfx samples for the full value, um but you know if a Commons team is comfortable. They could even just edit that data Json like I, say we've even got customers doing just that.

A

So if there's a lack of developers, then that can also work and we've linked to the uh the repository there and I just wanted to mention this on the end. uh Microsoft do have a workshop for this. uh It's a two-day workshop. So if there are any anywhere on the call who's who's um works in the Microsoft Account Manager and might be eligible for that, then then contact your account manager, and that could be something that you could take advantage of.

A

um It's kind of like a hackathon style, Workshop idea again is just to ideate, uh Viva connections, cars and and get started quicker, and other thing just to mention is that design that we've, obviously crafted in the sample, can be used when you're building your spfx cards. So you can actually reuse that design and just write your code, so you're speeding it up anyway, before you're, even developing it um and then obviously contributions. If you've got these samples stuff you've already done, please please contribute them in there.

A

That'd be brilliant, and just yeah you'll see the format of the existing samples. So you can just follow those, and that would be great and from me that is actually yeah. That's it fantastic.

B

Great work there Alex uh show those samples of the uh definitely being looked at uh shortly um tons of uh tons of resources in there. You can see a lot of activity in the chat about wow, there's so much to learn. Well, it's all out there, folks, you can. You can basically find it when you need it, uh it's already in and there for you to use uh fantastic. Thank you very much.

A