Microsoft 365 Community Platform, 12 Apr 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft 365 Platform Community Call – 12th of April, 2022

Description

Microsoft 365 platform community call delivered on April 12th. Two demos - Building in meeting document signing app for Microsoft Teams and Building wellbeing solution with Teams and Viva Connections. Announcing the new Microsoft 365 Unified Sample Solution Gallery (1040+ samples) from Microsoft and community. Join us for Microsoft Tech Days - Thursday, May 5, and for Microsoft Build, May 24-26. Learn from 3 Microsoft 365 Platform related articles and 3 Teams documents delivered by Microsoft. The host of this call was Vesa Juvonen (Microsoft) | @vesajuvonen. Q&A takes place in chat throughout and live at end of the call.

Learn more
• See the full blog post for this call at: https://aka.ms/m365pnp/community/blog
• Download invite for this weekly Microsoft 365 Platform community call: https://aka.ms/m365-dev-call
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/M365PnP/videos

A

Welcome everybody: this is microsoft, 365 platform community called it is april, 12 2022.. um My name is a product product manager. Now I'm learning the snap program manager, product manager in the microsoft 365 platform side of the house title was changed, doesn't actually change anything, but we do, but apparently product manager is more descriptive than program manager anyway.

A

So we'll start with the latest updates and news for microsoft, 365 platform, then we go to the crew picture mode into kira mode for those who are enabling their video and as you're, enabling the video.

A

Please note that that means that we will take a give animation out of the together mode picture and we'll release that part of the block post summary so as you're enabling the video you're giving us the permission to do so and in general, all of the goals are getting recorded as and you will see the warning in the microsoft teams what that means. We'll have the real stars of the day, uh starting after that roughly 10 past 15 past.

A

Depending on how fast I was speaking english, this time, uh we'll start with a building in a meeting document, signing app for microsoft, themes with shai, bayer ready and ian o'brien and then- and they will have a 20 minutes time for doing that demo and then we'll move the wildlife master guards on anub tati uh anub is from content and cloud building and well-being solution with microsoft, themes and viva connections. So a lot of teams extensibility and microsoft.

A

Interesting extensibility in general, in this call this time now a quick recap on the all of the assets. So we do have two different youtube channels. We have the official microsoft 365 youtube channel, where we have polished videos provided by the cloud advocates and microsoft, and then we have our microsoft 365 community video channel, where we have all of the community called recordings demo recordings a lot of other videos as well from the microsoft and community and do historical reasons but kind of ended up in two different channels. Don't worry about it!

A

You can subscribe to both of them. That's the easiest way to follow up on what's happening in youtube. We do have a lot of open source assets available are always the guidances, don't start from scratch, of course learn from a learning material, but then have a look on the examples, because the examples will show you how to approach things and how to make things happen.

A

So there's a lot of samples available within it in our github repos now, as the github repos might be a bit difficult to always scan into and what's available, where we have actually provided, assemble galleries, and since last week we actually even released our microsoft resistive unified sample gallery, which is the link on the top of there and if you're wondering that, hey too many links. I can't remember all of these.

A

Luckily there's only one link to remember which is akms m365 bmp, which is our microsoft 365 platform community, welcome page from where you can then find all of the different assets and youtube to links and channels and all of the things from one centralized location.

A

Now before we go to the further on. This call just wanted to remind everybody. We do have quite a lot of these community calls available. We have this weekly call happening every single tuesday, 8 a.m, pacific time with just a microsoft, 365 platform call, and we try to be quite let's say across the microsoft 365 in this course. So anything in microsoft, 365 demonstrated and uh shown by the microsoft people.

A

Then we have multiple other community courses available, so adaptive cards, microsoft, identity, platform, office, add-ins and powerapps, which are happening in a monthly basis, and then we have a community called driven calls. So microsoft, 365, community and viewer connection in spacex, which is happening on thursdays at 7, am pacific time bi-weekly. So every single thursday there's a goal on there. If you're wondering how to get invited on this course again go to akms entries like bnb, you can download recurrent invite, which is the easiest way to get that invite in your calendar.

A

We also provide you a easy, easy way and easy access to get a free, microsoft, resistive, developer internet- and this is by far the easiest way to get started on doing anything in microsoft, resistive file. It will automatically renew after 90 days as long as you use it for developer purposes, and that means that you're doing debugging deploying solutions and testing things there. It will basically detect that. Oh, you are actually using this for developer purposes. So therefore, I will renew this tenant for you, so you're not using it for any other purposes.

A

So please take advantage of this option. We also provide you a lot of a lot of training material uh for free. I think we are up to more than 70 or 75 training modules already under microsoft, learn related on microsoft, 365 platform capabilities, so these are great ways of understanding the art of possible within a matter of one hour or two hours and, of course, sure there's a lot of a lot of more longer and bigger training, materials and packages available in the internet with with uh cost.

A

But these are great ways of getting started on on the baseline understanding across the different capabilities what's available in the microsoft 365..

A

Now I already mentioned this one, which is a really really cool thing, and so last week we finally announced the new microsoft 365 unified sample gallery. We've been promoting this for a while already, but there has been some hiccups and things which we, we kind of considered, that to be a soft launch to rather than officially available now it's officially out and all of the samples provided by microsoft or by community in our different github repos are automatically getting surfaced in here.

A

So you have a one location where you're going to find all of the samples for microsoft, graph, microsoft themes, viva connection, sharepoint framework and so on. So you can easily filter all of the samples which are available now, if you're wondering that. Okay, I have this sample here in a key top and I would like to contribute on it or how would I use the sample? We actually got you covered and I will let david to explain what.

B

That means so yeah, as mentioned all those samples that were provided are from amazing individuals like you in the community over a thousand, in fact, and that is fantastic, but you may have something cool that you want to contribute you're, not quite sure how to do it. Can it be in that sample gallery that is adoption adoption.microsoft.com.

B

Absolutely, there are hurdles that may prevent you from doing that, such as how do I submit a pull request? I've never worked with github before sharing is caring. Is a program that's going to provide you hands-on guidance on how you can accomplish just that a variety of topics from maybe your first ever pr to maybe you'd like to present on a community call to setting up your spf x, workstation, submitting a power platform sample, as vesa mentioned, we got you covered.

B

These are live safe space opportunities for you to learn together and ask questions, and we will absolutely not record it. So you are safe to ask anything you'd like all free scheduled throughout the month. Aka.Ms4 sharing is caring and we just scheduled another power platform samples and a community docs session, and look for more of those dates to open up over the next couple of months, and we appreciate everyone's patience as we got. Those dates figured out again, please don't hesitate to join.

B

We would love to work together with you and see your amazing work in our sample galleries, because we're one big community family. That's back to you.

A

A

Thank you david on that one now moving on on on recapping all of the different assets which we have available, we do have two different podcasts or v-blocks, or one of them, and two of them there's two podcasts and one video blog, so, first one being the microsoft 365 developer podcast and this one, the latest version and the greatest episode of this one was released today and where paul and jeremy fake, from microsoft, uh shuffling from adding 365, had an interesting chat with andrew connells from voitanos related on his development training materials and his perspective on the microsoft resistive development.

A

That's quite nice, 45 to 15 minutes uh chat between the between the guys. Now the second uh podcast or v block show.

A

What we have is the microsoft 365 bmp weekly, where we always cover the latest news from the microsoft and from the community and articles and videos and so on, and then we typically have a visitor either mvp or microsoft employee in the show to talk about their career and their focus areas within the community latest episode on this one went live today and that actually was with david warner, who just was into it, was just explained in the previous slide.

A

We talked about david's career, move from being an mvp and then joining now microsoft pretty recently. Thank you. Congratulations, david one more time on that and then the focus on the community, open source community acknowledgement, our patching systems and all of that stuff. So why the community actually matters? It's a really interesting discussion as well. Now the latest news from microsoft uh site uh this week. We have three news from the microsoft 365 developer blog site.

A

First of all, we have the news, from david russell, uh from zero the hero connecting your web app to microsoft, teams using azure communication services. International communication services is a great way of integrating or in adding pcs and functionalities, which we are familiar with in the microsoft teams to a website or externally facing applications.

A

So it's rather than integrating the application to teams. No, no, let's actually get bits and pieces of the teams and expose them in the website and- and that is a great blog post uh with three different videos with the david goes through the different assets available on that. We also have the announcement for the microsoft 365 unified sample gallery, and there is more than one thousand samples available, which is really really really really really cool.

A

So there's a lot of samples across the different areas and then the last one from last week was learn from the community teams up dev challenge. Winner brings high quality training into microsoft teams, and this is a interesting discussion in video discussion between bob german and a partner, my serious game, which is actually providing an eight mil application, which is around learning, tooling and learning exercises and how that's getting embedded directly in the microsoft teams. So really really interesting.

A

Discussion on that now on the team's platform side of the house, the documentation is, I think, what cheats.

C

Thanks so so hello, everyone, I will walk you through the platform and the documentation updates. Let's start with the platform feature updates on the left side, so people picker control in adapter card is now in ga people. Pickle control is an input control in teams that allows users to search and select people.

C

This allows end user to search and select people in chat channel or across the organization. Dipping teams the people picker control is available across all the team's clients, such as web desktop and mobile. You can use microsoft teams, client sdk, which provides the select people api to integrate the people picker input control in your web app.

C

The second one is share. Two themes from personal app or a tab share to teams allows user to share the content from personal app or a tab to other users or group or channel within teams. Users can select share to themes to launch the native experience in a pop-up window. The pop-up window allows user to add other users or groups or channels to share their content.

C

Please note this is still in a development review. Now, let's move to the documentation part on the right side. We have been working on multiple, step-by-step guides. Step by step guide is the artifact that has a task oriented approach, linear topic and provides an end to end scenario.

C

So we'll be talking about the create themes, comment section bought the best clip guide teams. Conversation board allows user to interact with your web app service through text, interactive cards and task modules. Basic conversations are handled through the bot framework character, a single rest api. This api enables your bot to communicate with teams and other channels.

C

This step-by-step guide helps you create a basic conversation board in the teens application, so these were the platform updates. If you have any feedback or suggestion, please post it on ak dot. Ms slash teams, platform feedback, the link is available in the footer.

C

You could also follow us on twitter and configure the rss feed to get the regular updates on the platform. Thank you back to missile.

A

Thank you what you eat on this one, so really really cool one thing: what I want to call out is the step-by-step guidance in the microsoft teams platform docs. These are really really cool, focused guidance, so a lot of the organizations should be learning how to achieve, and the team is actually doing their guidance in the docs at microsoft.com. But please give us feedback how we can improve what works, what doesn't work and the team is always interested in improving these things now, quick recap also.

A

We will have two different events happening relatively soon, so we'll have a fifth of may we'll have a microsoft tech days. This is the uk based and so we're in european time zone bit. uh It is actually suitable for early us participation as well, but on the fifth of may, uh we'll have a special two hour event where we actually go through and building together, a relatively complex, complex and microsoft teams, a solution touching microsoft themes and bots, and power bis and viva connections, and and so on.

A

So there's an interesting design and implementation step-by-step guidance as we go through this implementation. That's two hour allocation in fifth of may and then later on, the may we'll have the microsoft builds coming so may 24 to 26 is happening, microsoft build the agenda is not yet public registration is coming soon at mybuild.microsoft.com, but this is the best location to come and join to uh to know the latest around the microsoft 365 platform windows and all of the cool things what the developers can do within the microsoft cloud.

A

Now before we go to the real stars of today. Let's do a group photo in together mode, so we don't actually miss that one and let me actually set up things. I will set up to get a mode and we have 50 seats in really soon. When I get the themes visible, let me set up the to get them out there and we'll move it in here, so 50 seats in the room who are the fastest. I will not enable my video for now I can say sharepoint monkey there as well.

A

Thank you rodrigo always present.

A

We are closing into the limit of 50 and I will start recording not yet wait. Wait, wait. I will start recording in a second and let's do some handwaving everybody. Thank you for joining once again, let's see if we can get a great gift animation there uh priorness is imitating sip on the middle. That's how you do that! Thank you. Everybody awesome to see again all of the faces in the community excellent. Thank you for that and we'll grab a gift animation out of that.

A

Thank you now then, it's time for the real stars of the day and we we are actually quite well on the schedule if we can keep things in 20 minutes and 20 minutes, so shy, buyer ready and eon brian will start with the microsoft themes. Application for document signing.

C

Hey that was a great start. Thank you. uh Thank you for organizing the call and hey everybody hope you are having a great time of the day- and here I am with my colleague abhin, and I am havia to share a recent work. It's a proof of concept, called document signing so without a delay. Let's get started for the next 20 minutes. We will talk about what is the stage and what? What are the different ways of sharing to a stage and uh followed by a quick demo and a brief code.

C

Walkthrough then we'll open the stage for uh are the floor for questions just to get the context right in the past one minute or in the couple of slides. I have been talking about stage sharing to stage to get the to set the context. uh This is about in meeting themes apps. So if you have an application that you have built for meeting meeting purposes, then the whole presentation for the next 20 minutes makes more sense to you.

C

So whenever we join a meeting, it's always you want to share something with audiences visually right, which is easier way of communicating. So the first option we do is just click on the share button and share your screen great. But that's one way: it's a one-way interaction. What, if you want your users to be more interactive? And you built an app? How do you get this more appealing experience?

C

So for an example, as you see on the slide, there is a contoso app and I'm about to do a sprint grooming, let's say and the app on the right side. It's called a side panel. The center part is called a stage. So this is the stage we are talking about for the next 20 minutes and when I load the app to this meeting and click on this little arrow that that's highlighted the app gets shared.

C

It means all the attendees of the meeting will be able to see the same thing at the same time also be able to interact with the app which is cool, so it serves the purpose of sharing the whole app in one go from a side panel to the center stage, and to achieve this, there is a little setting for the manifest which we highlighted here and for more details or more documentation.

C

The links are in the footnotes, so this scenario is called sharing the whole application to the stage. Okay, that's great. So in the previous application, all my teammates can see the whole side panel being presented to the stage that worked. But what, if I have a different scenario, sharing a lot of information if the app is actually heavily loaded can be more clumsy right, especially on the stage.

C

So um is there a way that I can pick and choose the panel documents or if I can choose a specific board to share so in this example that we have picked? There is a sealed sales team, that's trying to present the data and I have a bar chart which we really wanted to focus on, and uh if you take a closer look at each of these panels, there is a button called share in the meeting.

C

So I click on the first bar chat for sharing the meeting so that chart gets presented directly to the stage it means I can pick and choose what part of the app or which amount of information I want to share from this site panel to the stage.

C

So this is called programmatic sharing to stage which is a new feature from the platform, and our poc is built on top of uh showcasing this programmatic sharing to stage uh by using a document signing scenario, and uh here are the technical requirements that will let you use this and again in the footnotes. There is a detailed link for the mo for more documentation.

C

So right now we know what is the stage and we are talking about inmating apps, but at a let's, take a step back and then see a bigger picture.

C

So I briefly touched upon for programmatic sharing to stage a use case for a sales team where everybody was able to see a specific part of the app and interact with it. Can there be more use cases? Of course there are at a very high level. We brainstormed a few, and one of those we'll be demonstrating in a bit is about document signing.

C

Let's say you are uh running a mortgage application or you want to do a lease lease signing document wherein you and the other party have to review at the same time and then sign of it sign of a document. Also. Another example could be like a github request, so it can be interactive and without delays, the work can be done in the same meeting time and uh using this programmatic shared stage. Another interesting idea that we were brainstorming is about small and medium businesses.

C

If you are a small business- and you want to give a virtual personalized experience to the user, wherein you have to help somebody to pick a pick, an outfit and choose various options that are available from your store, then you can create a meeting. Add your app and use programmatic sharing to state so that you can share the card, so you as the seller and I as the buyer, can together work on the cart and close this deal. So these are a few use cases, and this could be. This could go on all right.

C

So before we dive into the demo, I would like to walk you through uh two different prerequisites or two different scenarios that we experimented using proof of concept. Also, a heads up vajid has pointed out about people picker. We do use it here. We experimented that part of people picker, as well as part of our poc, so rpos is called meeting signing and there are especially two different kinds of experiences for our poc.

C

First one is a pre-meeting experience or we call it as creating a document. So the idea is to have a document review together and sign of the document. So, first of all, we need a document to get started right and for this poc purposes we mocked up a document. We mocked up a few ahead of time. These are not the documents from sharepoint or not uploading from uh any other sources. We did a html mockup and the app runs on react in the front end and we do have a c-sharp back-end.

C

So first, let's talk about creating the document part. I am a teams user and I created a meeting because I wanted to go over a certain um document and then sign off with all the attendees or whoever I wanted to sign off. I added them as the attendees to the meeting, and then I installed this app to this meeting so once the installation is done. I have an option to add this app to a tab.

C

So, as soon as I add this app to a tab, so there will be a little pop-up which there will be a little tab where I can go ahead and create the document once that's done. um All the calls from here are handled by the backend service, and once I choose what kind of document I wanted to load um again, mentioning it's a mock-up, so the document gets created. So one part of the problem is solved. I now have a document and the second part is about sharing this in a meeting.

C

So here comes the time of the meeting and we all join the meeting and then I start the meeting and I open the site panel. The right part right hand, part of the previous slides. If you remember on the panel, because I created a document- I own one right. So I would see all the documents that I created as uh as an individual card each of them and if somebody doesn't own any documents, they will see a different message again.

C

We'll see this in the demo, I'm just giving you a heads up so from the given set of documents. I will choose which I would like to share and and click on that share to meeting button. Then everybody will be able to see the document, and I would like to take a step back here. Whenever I created a document I have, I said we are using people picker right. We use the people picker to assign signers and viewers of a document.

C

So if you are a signer, you can view and sign the document. If you are a viewer, you only get a read only access for the document. If you are neither of these, you will not see the document at all when I share so we covered all this as part of our demo recording, but here is how it works, and once you share the document to the meeting, everybody can review in real time and then sign off as you sign off.

C

It gets reflected in others views if they have the access to view the document, that's how this whole meeting signing poc works, and I would like to hand this off to my colleague arvind to take you through the demo and a code walkthrough. Thank you thanks. So much.

D

Thank you all very much for joining the community called. So yes, as bavio was talking about, we were creating a proof concept to showcase this new programmatic shared stage api. So, let's create a zip application. I have a kind of confidence bottle summarize it again and that allows you to share a document in a meeting have members that are meeting sign the document at the same time and it's a react application that calls it.net api.

D

So some of the features that we're using in this proof concept includes, as you might expect, the new programmatic sharing to stage api and we're using team single sign-on and with azure active directory.

D

We have adaptive cards for specific flows and we're using the authorized user to determine to create user-specific stage views so that the what users see change to paste, depending on their authentication styles and one thing to note as we go through this- and this is being done using mock documents and obvious, has said it's ready, but just be purely clear. We're not using sharepoint we're not using similar servers, great so to create a document flow but I'll run over this.

D

But so we before the meeting, we have a task module, that's popped up that allows you to create a simple mock document. It uses an adaptive card to create this flow and if you haven't used that data card before they're an extremely easy way to create a simple piece of ui and which that is styled to the client that it's operating on and but one of the things that we talked about, that I want to make sure we call out.

D

Is that we're also using the people picker here which allows you to easily select single or multiple users in a card and it allows for pre-population. So if you have certain users, you want to have selected in a list, that's possible, but best for this scenario is it allows you to pick your people from either the entire organization or from the current context. So in the in a meeting, the current context is the participants participants of the meeting.

D

So you there's an extremely easy way to take to select users from a current context for essentially zero costs using the people picker adaptive cards, if you make use of it all right. Let's go on to some past demos.

D

Unfortunately demoning a meeting app from inside a meeting is difficult and there are like multiple scenarios and views this app. So we've recorded pre-recorded all this, um but if you want to try it out, there is a manifest file available on a github repository that you can download videos you'll see on the slides. You see, there are two videos, the left hand. Side is the meeting participant. This is bavia's view and, on the right hand, side is meeting organizer. This is my view.

D

It might be a bit hectic, but hopefully I have enough pauses in included to keep things covered great.

D

So this is the signing of document flow where everybody in the meeting can both view and sign the document and on the right, you can see that the document creator has a list of documents that they've created previously, and this is listed in the site panel and if you look at bavia's side panel, she has no documents created, so she doesn't see this option.

D

The document creator can scroll. The list find a document that they want to share and then click on the share to meeting button. This share to meeting button is what actually caused a new programmatic share to stage api and it essentially tells teams to load a specific url to the stage.

D

Now, as you as you share the stage you see, the document is shared almost immediately to both participants to this participants and they both see a similar ui. However, small things like the text box of, if you are allowed to sign or not vary depending on who who is.

E

D

The document so, on the right hand, side own, has a blue text box. On the left hand, side bad view has a blue text box, but you're in different positions, because not everyone can sign in the same place. Now baby is about to sign the document so she's going to click on her text box. It's going to pop up and this pops up a little adaptive card again by using adaptive cards, to create small um ui elements that confirms that badger is who she said. She says she is in a real world implementation.

D

This might be something like a text box or some other form of input that allows for you to sign with your finger and we continue on you'll notice that, as bavia has signed it almost immediately.

D

I will see her signature show up on my side of the um my view of the meeting, so you can even create some sort of a two-way uh multi-way communication here, and I can now sign this document.

D

I pop up my adaptive card. I sign it and the document is assigned. Hopefully that makes some sort of sense. As I said, this is only one scenario and there are multiple scenarios that might happen that can lead to different outcomes for the viewers. One is viewing a document.

D

So this is a scenario where a meeting participant is allowed to view distinguished designing happening, but is not allowed to sign themselves. So you'll see here that on bavia's left hand side and she has no text boxes and she can see that there's a text box from me, but there is no no place for her to sign or click and she has a fairly basic, essentially a document to show.

D

But as I go about signing the document, take me a second to decide if I actually want to sign or not you'll see that my signature shows up, on her left hand, side almost immediately.

D

But perhaps most interesting is what happens if you want somebody in the meeting who shouldn't see exactly signing, maybe you're in a large meeting like this, and you only want key people to sign a document and then move on with a divester scenario that arrests the meeting. So in this scenario, we've set it up so that only I, uh the document creator, has the ability to sign and view the document, but the non-viewing meeting participants and will not be able to see the document happening.

D

So while I am able to sign the document that one shows me bavier will see an error message that says she is not authorized to view this document, and this is all handled by making a call to the backend. So when the stage loads, with a document id and a specific document, it makes a call to the api from the react app and the api will verify that the user issued this.

E

D

And they have, they are entitled to view the document and I'll go to this more in a second when we run through the code and so at the very top have you talked about sharing an entire application to stage, so that is one of the two ways you can now share to stage, and that is still possible in our in our demo. If somebody clicks on the share application stage button in the side panel, that's highlighted- and you will see the following error message- essentially saying that the share button is not supported in this app.

D

That is because, while you're able to share, we don't have scenario to cover this, but I just wanted to call out that it's possible to have uh application sharing, as well as programmatic sharing all right. So I'm going to do some quick code through and I'll run through our code. Our code is currently available. This proof console is currently available on the microsoft team sample repository in office dev, and let me open up the code.

D

You can see it's available today and you can run it if you like. Hopefully, the documentation covers everything and maybe zoom in the pictures. So you can see this great, so a code is split into three sections and we have the web m code, which includes all the controllers, our authorization code and our front-end code.

D

Our domain includes a bunch of services and our infrastructure includes um data storage and calls to external services like microsoft graph.

D

But the most interesting thing I suppose to talk about is the new api, how how simple it is and how it works. So, in our site panel document card we make a call to the share dot, app content to stage and function from the teams sdk, when you click on this button, it's quite simple where it takes in a callback to handle the success and failure states, and it also takes in a url that tells us to navigate to so here we're saying, navigate to the current host stage.

D

Slash id where id is the document id that we are using, and this url at this route is a route inside react, router router that we're using. So if we go to the react, router config, you can see that we have a stage slash document id. So when this route matches, we will open the document stage component, that document stage components gradually simple.

D

It will get the document id from the parameters and then we'll make a call to our api and it will render whatever is returned from that api, either a document or if an error is returned, it will render that that api is relatively straightforward. We take in the document id we get any information we need to from a document store.

D

This includes information, like document name, the document title and signatories of the document, viewers of the document and things like that. But before we give that document back to the user, we do a check to ensure that whoever is requesting this document is entitled to this document and that is handled in that getdocument handler and which is an authorizationhandler.net, and we check to see that the user who's making the request is either the owner one of the signers or a viewer, an assigned viewer of this document and if they're not they will get to.

D

You are not authorized to view this document error that bavia received. Previously, you might ask: how are we doing this? How do we know who the user is, and this is all done, using the teams sdk and in particular they get our token call, so we authenticate users to our app and when we store our information and any- and that ought token is then used on calls to the api, and this works great for most of our scenarios.

D

However, there's one scenario where, if you try and create a document, we need more information than what teams get our token sdk provides us and and that's the difference because as part of the create knocking flow people picker gives us a user's id, and we want to get more information like the user's name, to ensure that we can provide the right information back from the api call, and that requires additional scopes. That is now provided from the team's art course.

D

So we get the user information, and if this, if we don't have to write scopes, it will fail and we respond when it gets consent required and back in the front end. When this response gets back to the user to the front end, it will initiate a single sign-on flow and for the on behalf of um scenario, and once that scenario is complete, we will be able to make graph calls.

D

One thing I wanted to call out, and even more so now that rajeev has discussed it as well. Today is the people picker itself. So, as I mentioned, we are using adaptive cards to create certain certain certain uis and and in our create document, flow, we're using adaptive card people picker to select viewers and sign us, and it's extremely simple integration.

D

If you want to use it, so we have just got a simple choice set here and for the data for that choice, set we're saying we're telling teams to get information from the graph.microsoft.com user's data set and we're also limiting that data set to the current context, and- and this is this- gives us the ability to choose users essentially zero cost cool, and I think I'm just about a time so I'll quickly wrap up.

D

Thank you very much for listening guys and we've run through the sharing his stage feature and how it can be used, and we've also demanded a proof concept which covers the programmatic share into stage api, but all touches the number things like team single, sign-on adaptive cards.

D

As I said, the proof concept is available today on the microsoft teams, sample github and thanks for listening. If you have any questions, please leave in the chat and we will try to get to them. Asap back to you.

A

Excellent, thank you really really cool stuff and a great scenario and played great explanation. How this one will work and and like ian and shai, was saying you can download the zip like watching it was putting in this chat that will uh this code is then hosted from microsoft and you can play around with that sample. You can kind of test it out within your developer, tenant, which is free as well. So please check it out uh great way of learning how to build microsoft, teams, meeting apps using this model. Thank you for that now.

A

Let's then move into an oops and wildex demo of today, where we're going to talk about viva connection and microsoft teams as well excellent.

E

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 uh viva connections, microsoft, graph, microsoft, graph, toolkit and teams?

E

So, let's ignite, we start 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..

E

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.

E

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.

E

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.

E

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.

E

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.

E

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 is build, how it works, we'll show it in action, and I also hope he will also show some code julian.

F

Thanks a lot waldek 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 core, 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.

F

So what I'll do is I'll, just open a couple of windows so on the screen, what you are seeing is towards the left. 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 requester and on the right side, I have opened the same dashboard page as megan, so we are seeing some extra content in the dashboard, because you know we have added an adapter card which is shared with with certain users only so on the right side.

F

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 contact setup, 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 will be actioned as in approved or rejected by by megan.

F

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. uh 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 the comments saying I need day off.

F

And then schedules that and then now the number of well-being days for her are reduced from five to four now on the right side. uh 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 uh that were that were made by by members in her team. So she she opens up this card wherein it says she has three pending well-being requests.

F

So she clicks on that and she sees that. uh You know some members in her team have made uh well-being requests. uh 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 um 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.

F

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 details these are so, firstly, on the on the right side. Over here you can see who has raised the request, uh for when uh 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.

F

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

F

So with that, uh you know, with that in mind, megan is happy uh to approve this request. So what she does is. She comes in the left corner over here. Just adds a comment, comment saying uh all okay and then, while doing that, you can also 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.

F

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

F

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

F

Okay, so let's have a look at the basic elements involved 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 uh in in which we have the well-being, personal app and that's what we saw a few minutes back so the dashboard it gets data from well-being list and adds uh data into the well-being list and same is the case with with teams.

F

So it gets the data from well-being 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 and then the final thing is. We saw some events that appeared in the teams app. For that you know 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.

F

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 the adapter card that was adapted card extension that was used by rachel in order to create a request.

F

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

F

That goes 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.

F

So let's take a look at the code, so all this code is available on github, so this sample contains two adapter cards and one sharepoint framework web part, which is the team's personal app. So, firstly, we've got the reminder, ace and then we've got the wellbeing, reminder adapter card extension.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.

F

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.

F

Once we have that data, we need to show show that data. We we do that using a card view. Now, if you want to see what those different types of views are, there are a lot of videos provided by the pnp community on on basics of adapter card extensions right. One of the views is the card view now.

E

F

View what we do is uh now that we've got uh the requests for the current user. We just show uh yeah, 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.

F

What we do is we open this? This? You know the quick view which is which can be you know, created using a json and it'll have a typescript file which runs the code 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 shared button, and then, when we click on the schedule button, what happens? Is uh we open? You know in the dot ts file, we have the on action method.

F

In that what we do is we just create an item in the sharepoint list? So basically 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 I'll go through this quickly.

F

So what we do here is we go ahead and get the number of well-being requests that are pending 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 ace we've got the on innate method uh in that method, and the first thing we do is using sharepoint rest api.

F

We go ahead and 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 so once we have all the requests. What we do is we just map all the requests into a custom object, and one particular thing over here here is for each request. We compose a team's url now this is nothing but themes.microsoft.com entity, and then we paste the id of the teams app.

F

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. 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.

F

What we do is we just show to megan how many hour 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 uh we've got the photo of the of the requester and the title of the request uh and the view button.

F

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 megan to a into the themes app and then in the teams- and she sees the request with respect to the themes app, it's nothing but an spf x, word part.

F

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 request using different components. 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 requestors 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.

F

And finally, we've got the agenda uh ngt control, which shows uh all the you know, previous events and the and the future events. We just use graph api in order to get those events and then we we display them. 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.

F

Thank you very much uh visa back to you.

A

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 and showing a lot of the cool technologies across microsoft teams and craft and viva, and so on so really really awesome stuff. Now we only have a one minute time to go, so, let's actually close up for today. Thank you, uh shy, buyer ready, ian o'brien of wild deck and and really really cool stuff awesome demos.

A

Today um the recording of today's call will be available within 24 hours in america, 365 community, a youtube channel. um You cannot access the recording directly from teams chat, so go to a warning on that one every single week. We are getting requests on that, but that does not work unless you're a microsoft employee. So it doesn't work for external people. You can follow us on microsoft, 365 diff on m365 bmp, which is the community and platform community account, and we will tweet whenever the recording is available through those accounts as well.

A

The next microsoft 365 platform community called happens on april 19th, so we 19th is a week from now and all of the community calls are available from the akms m3s5 bmb. But that's it for now have an awesome rest of the week and stay safe and please keep the feedback coming and we are building all of these capabilities and platform options and good stuff for you. So let us know what works, what doesn't work and how we can improve thanks. Everybody, let's stay in touch.