Microsoft 365 Community Microsoft Teams, 12 Apr 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building a wellbeing solution with Teams and Viva Connections

Description

In this 17-minute developer focused demo – Waldek Mastykarz and Anoop Tatti share the latest fully documented and available sample highlighting an end-to-end Microsoft 365 solution. Includes 2 ACEs, Viva Connections Dashboard, a list, an SPFx web part - Teams personal app using Microsoft Graph and MGT for data. See the app in action – initiate wellbeing request in ACE Card View with Quick View, then see details, approve, or reject in Teams Personal App. Step through code and view supporting resources. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on April 12, 2022.

Demo Presenters
• Waldek Mastykarz (Microsoft) | @waldekm
• Anoop Tatti (Content+Cloud) | @anooptells

Supporting materials
• Sample - Wellbeing days requests and reminder - Adaptive Cards Extensions and Teams personal app | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-wellbeing
• Demo - Getting started on building Microsoft Viva Connection adaptive card components using SPFx | https://www.youtube.com/watch?v=KQGsY5fvLaY&AB_channel=Microsoft365Community
• Ignite session - Get started with Microsoft Viva Connections Extensibility | https://aka.ms/CONLL112

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/m365pnp

A

I have the honor and pleasure to share with you a new sample that you will be able to share now with your colleagues and customers to show them basically the power of what applications can they build with viva connections, microsoft, graph, microsoft, graph toolkit and teams?

A

So last ignite, we thought with group of folks you see on the screen about what scenario could we show? How could we illustrate what people could use, viva connections for and microsoft, graph, the power of teams and everything that we have available our toolings and sdks to build an app that's relevant, but also makes a perfect use, excellent use of the abilities that we have available at microsoft 365..

A

So with that, we thought you know what let's build, something that will show the power of viva connections across devices, so both desktop and mobile. They would then also tap into the insights that we have available in microsoft graph and also use some of the ui features that we have exposed to us through microsoft, graph toolkit.

A

Now, as that happens in demos oftentimes, you know that we want to show things we want to to illustrate things but oftentimes. We cut a corner because reasons because time, because, because we're not going to show everything anyway right, so we want to have something that works and that kind of illustrate the message, but that not might not be in the best shape for us to be able to share that, and for you to be able to show it to everyone else too.

A

And it's a shame really, because we thought that that's a great scenario and if there's one thing that we hear from all of you time and again is that you want us and you need more samples to. Basically whenever you talk to customers and colleagues that you can inspire them too right that you can also show them what's possible on microsoft, 365, what apps you can build, how you can extend it to your specific needs to make it your own.

A

So with that we kind of regrouped and said you know what we need to um update this sample polish, it make it so so that there's guidance there is dogs.

A

There are step by steps uh guidance to for you to be able to run on your own tenant, your own environment, for you to be able to pull the code, adapt it to your needs and use it in your own engagement, show it to customers basically to be able to kind of mimic some of that experience that you've seen us do at ignite last year, but then do it within your own environment within your own engagements.

A

So with that, over the past few weeks, we worked together with anup, who is one of our mvps and partners to actually finish what we would start and bring it really to the state where it's something that we can be proud of and that it's something that will also work for you. So with that I'll give it on to anub who will walk you through the whole app how it's built, how it works, we'll show it in action, and I also hope he will also show some code.

B

Julia thanks lord worldwide for that right. So this part of the presentation I have divided into three parts. um In the first part, we will see the the solution in action, uh so we will log into the uh to the weaver connections, dashboard as two users requester and a manager, and see how how the solution works and then, in the second part, we'll have a look at the code, the important bits and then in the final part, which is a small part, we'll just have a recap and look at the resources right.

B

So what I'll do is I'll, just open a couple of windows so on the screen, uh what you are seeing is uh towards the left.

B

I have opened the dashboard as a user called rachel and the window is in red and rachel is a requester, so our red rachel's requester and on the right side, I have opened the same dashboard page as megan, so you we are seeing some extra content in the dashboard, because you know we have added an adapter card uh which is shared with uh with certain users only so on the right side.

B

I've opened this same dashboard page as megan, who is rachel's manager and the window color is in mango, yellow, so so m megan mango, yellow manager right so with that context set up uh the the idea is rachel will raise a well-being request because she wants to uh take a well-being day and then that request uh will be actioned as in approved or rejected by by megan okay. So, let's start with that, so rachel opens the dashboard and she sees the well-being card clicks on schedule and then it says she has five more well-being days.

B

So that's good for her, so she decides to take one well-being day. So let's say she decides to take that on 15th and then she 15th of april and then she adds a comment saying I need uh off.

B

And then schedules that and then now the number of well-being days for her are reduced from five to 4..

B

Now on the right side, if I just go ahead and refresh this as megan, so megan is not interested in this card, which is uh you know she doesn't want to share you, the well-being request she wants to view the well-being requests that were that were made by by members in her team. So she she opens up this card wherein it says she has three uh pending well-being requests. So she clicks on that and she sees that. uh You know some members in her team have made uh well-being requests.

B

One of them is this team member from random team member, and then we've got the the well-being request that uh rachel had just submitted, and now with that uh now megan wants to approve this request um or rather view this request first and then then decide what to do with it. So she goes ahead and clicks on the view button and that takes her to a team's personal app.

B

Now I won't open this in the teams app, but I'll just use the web version instead, and it opens that same request in the personal app with more details. So, uh let's, let's have a quick look as to what uh details these are so, firstly, on the on the right side. Over here you can see who has raised the request, uh for when was the request needed and what are the comments uh and then on the right side over here? Sorry, not that one, uh I think yeah that one on right side over here.

B

um She can see the calendar of the team. So basically, uh what is happening here is uh she can see uh the well-being day is requested on the 15th, and there are uh you know, uh two other events before the 15th and then uh some other events after the 15th. So basically, as you can see, that rachel has requested a well-being day on 15th and there are events happening before uh the well-being day and after the well-being day, but nothing on the day that rachel has requested.

B

So with that, uh you know, with that in mind, megan is happy uh to approve this request. So what she does is. uh She comes in the left corner over here, just answer coming comment, saying uh all okay and then, while doing that, she can also uh select a file to attach. So maybe there are some guidelines with the well-being now, so she selects the well-being document guidelines document and then approves the request.

B

So now the well-being request is approved. uh Rachel can go ahead and take that day off. So if I just go back uh in the teams app and just refresh this, we can see that the request has been approved and if needed now, megan can action. uh The the other well-being request that was submitted by her team members.

B

So that's the that's the demo. Now, let's have a look at the at the code.

B

Okay, so let's have a look at the basic elements involved uh as a recap, before we jump into the code now I'll try to go through this a bit quickly because you're considering the time so, firstly, we have got the home side, which is the weaver connections home site in that we've got a dashboard and we've got a sharepoint list which is called as the well-being list, which is the source for all the requests that that that get created and then the second element we've got is the is the teams in in which we have well-being, personal app and uh that's what we saw a few minutes back so the dashboard uh it gets data from well-being list and uh adds uh data into the well-being list and same is the case with uh with teams.

B

uh So it gets the data from wellbeing list in order to show the well-being request and also when a request is approved or rejected. It updates uh that particular item in the well-being list uh and then the final thing is. uh We saw some events uh that appeared uh in the teams app. For that uh you know uh the way it works is uh over. Here I've created a team called as marketing team uh in the background that went and created a group now that group has a calendar.

B

uh I've added some events in that calendar and those were the events that we were seeing in the games app right. So now, let's look at the first card. First adapter card, which is uh the adapter card that was adapter card extension that was used by rachel in order to create a request.

B

So uh rachel opens the dashboard uh and then she sees that card and then that card, what it does is on in it on when the card loads. uh It goes ahead and queries the well-being request, uh well-being list in order to get the requests that were created by rachel, um and then it receives some data and says that uh rachel has. uh You know how many hour well-being days uh remaining and then once with that racial uh clicks on schedule.

B

That goes and and opens this quick view wherein rachel can select a day when she wants to raise a well-being, request and add some comments and clicks on schedule. When she clicks on schedule, we write the data back to the sharepoint list, so this is like pretty much straightforward operations read from the sharepoint list on init and then write to the sharepoint list on on scheduling request.

B

So let's take a look at the code, so all this code is available on github, so this sample contains uh two adapter cards and one sharepoint framework web part, which is um uh the team's personal app. So, firstly, we've got the reminder, ace uh and then uh uh we've got the rema wellbeing reminder adapter card extension, dot, ts file, so in the on init method. uh What we do is we call this method called as get current users. Well-Being request- uh and all we do here is from the well-being list.

B

Give me all those items where the status is requested for the current user. So we use sharepoint rest api in order to get all those requests of the current user where the status is requested.

B

Once we have that data, we need to show that data. uh We we do that using a card view. Now, if you want to see what those uh different types of views are, there are a lot of videos uh provided by the pnp community uh on on basics of adapter card extensions right. One of the views is the card view now in the card view. What we do is uh now that we've got uh the requests for the current user. We just show uh yeah.

B

We just do some computation and tell them that how many of our requests they have- and uh in this case you know, rachel- has four more being this right, then, on on click of schedule. What we do is uh we open this uh this?

B

You know the quick view uh which is which can be you know, created using a json and it'll have a typescript file uh which runs the code uh and then in the json, uh or we are doing, is just showing all these different controls, the date control the comment, control and the the schedule button, and then, when we click on the schedule button, what happens? Is uh we open? You know in the dot ts file, uh we have the on action method.

B

In that what we do is we just create an item in the sharepoint list. So basically um you know we. We call the post method on the wellbeing list and then add the employee id the date uh and the comments right, so uh that was uh rachel using the uh well being. uh uh You know, request card in order to make a request. The next one is actioning the request. Now this is done by megan.

B

uh I go through this uh quickly, so what we do here is uh we go ahead and get the number of uh well-being requests that are pending uh and then once megan clicks view, we show the pending request and then once once megan clicks the view button on the request. We go ahead and open the teams app and show the request itself again uh in the is. uh We've got the on init method uh in that method, and the first thing we do is using sharepoint rest api.

B

uh We go ahead and uh get all those items from the wellbeing list where the status is requested and we we are getting all the requests. We are not concerned about. uh The current user or anything uh so once we have all the requests. What we do is we just map all the requests into our a custom object, and one particular thing over here here is for each request. We compose a teams url now this is nothing but uh teams.microsoft.comttt, and then we paste the id of the teams app.

B

uh All this ide uh will be part of the configuration which is explained in detail in the uh you know in the readme file of the repository. uh So we compose a teams url for that particular request. In the end, we just put the id of the particular request, because that's uh that will be needed in the teams, app right uh and then yeah in the card view.

B

What we do is we just show to megan how many our requests are pending and then once megan clicks view, we go ahead and open the quick view, which again is json with all the different controls, so we've got the photo of the of the requester and the title of the request uh and the view button.

B

So when, when the view button is clicked, uh it is nothing, but uh we asked them to open the url, uh so the redirect make into a into the themes app and then in the themes, and she sees the request with respect to the themes app, it's nothing but an spf expert part. uh Firstly, we get the particular request based on the id that was passed, and then we have a component in which we go ahead and get the particular request and display the requests using different components.

B

In this case, we are using the mgt uh person control, and uh you know the of course, ui controls in order to display uh you know the requester's details, and then we have got a review form, a custom component that we have built, which shows these approve and reject buttons and a comment box. And finally, we've got the agenda uh ngt control, which shows all the you know, previous events and the and the future events. uh We just use graph api in order to get those events and then we we display them.

B

So in summary, two adaptive cards and one sharepoint framework web part. All the details are present in the repository, and these are all the links. Thank you very much uh visa back to you.

C

I know really really cool stuff and, and the key is of course getting interested and then spending time on having a look on the code and understanding how it works, but really really cool stuff and showing a lot of the cool technologies across microsoft, teams and craft and viva, and so on. So really really awesome stuff.