Microsoft 365 Community Microsoft Teams, 12 Apr 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building in-meeting document signing app for Microsoft Teams

Description

In this 21-minute developer focused demo – Microsoft presenters SaiBhavya Reddy and Eoin O'Brien educate viewers on Stage View, side panel, in-meeting apps, and the new programmatic sharing of content to stage capability in this document signing POC demo. Workflow - create a document, create a meeting (authorized viewers, signers invited), add your app to meeting (tab), use shared capability to share document during meeting. Sign offs are reflected in UI as occur. See code and get sample today. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on April 12, 2022.

Demo Presenters
• SaiBhavya Reddy (Microsoft)
• Eoin O'Brien (Microsoft)

Supporting materials
• Documentation - Share app content to stage API | https://docs.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/api-references?tabs=dotnet#share-app-content-to-stage-api
• Documentation - Share entire app to stage | https://docs.microsoft.com/microsoftteams/platform/apps-in-teams-meetings/enable-and-configure-your-app-for-teams-meetings#share-entire-app-to-stage
• Documentation - Share specific parts of the app to stage | https://docs.microsoft.com/microsoftteams/platform/apps-in-teams-meetings/enable-and-configure-your-app-for-teams-meetings#share-specific-parts-of-the-app-to-stage
• Documentation – People Picker in Adaptive Cards | https://docs.microsoft.com/microsoftteams/platform/task-modules-and-cards/cards/people-picker
• Step-by-Step - Share meeting stage in Teams | https://docs.microsoft.com/microsoftteams/platform/sbs-meetings-stage-view
• Sample - In-Meeting Document Signing | https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-share-to-stage-signing/csharp

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

Hey everybody hope you are having a great time of the day, and here I am with my colleague abin and I'm 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.

A

Walkthrough then we'll open the stage for uh for 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 teams apps. So if you have an application that you have built for meeting uh meeting purposes, then the whole presentation for the next 20 minutes makes more sense to you.

A

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?

A

How do you get this more appealing experience 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.

A

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.

A

The links are in the footnotes, so this scenario is called shading. 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.

A

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

A

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.

A

So this is called programmatic sharing to stage which is a new feature from the platform, and our poc is built on top of showcasing this programmatic sharing to stage by using a document signing scenario, and 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.

A

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

A

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.

A

Let's say you are uh running a motorcache 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.

A

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.

A

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 pickup. 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 specially two different kinds of experiences for our poc.

A

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

A

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 install this app to this meeting so once the installation is done. I have an option to add this app to a tab.

A

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

A

So here comes the time of the meeting and we all joined the meeting and then I start the meeting and I open the side 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.

A

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, uh I said we are using people picker right. We use the people picker to assign signers and viewers of a document.

A

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

A

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

B

Thank you all very much for joining the community called. So yes, as bavia 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 both summarize it again and that allows you to share a document in a meeting. Have members that are meeting signed a document at the same time and it's a react application that calls it dot net api.

B

So some of the features that we're using in this airproof 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.

B

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 that this is being done using mock documents and obviously says already, 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.

B

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, but one of the things that we talked about that I want to make sure we call out.

B

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 after best for this scenario, is it allows you to pick you 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.

B

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

B

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 a manifest file available on a case repository that you can download today and run, and so under videos you'll see on the slide side. 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.

B

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

B

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.

B

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.

B

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 viewing 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 in different positions, because not everyone can sign in the same place.

B

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 curves to create small um ui elements that confirms that banjo is who she says she is in a real world implementation. This might be something like a text box or some other form of input that allows for you to sign with your finger, and you continue on you'll notice that, as bavia has signed it almost immediately.

B

I will see her signature show up in 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, and I can now sign this document.

B

I pop up my adaptive card. I sign it and the document is outside. 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.

B

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 text box for me, but there's no no place for her to sign or click, and she has a fairly basic, essentially a document to show.

B

But as I go about signing the document, it takes 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.

B

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

B

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.

B

So when the stage loads, with a document id and a specific document, it makes a call to the api from the reactor app and the api will verify that the user issued this area 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 stage, so that is one of the two ways you can now share to stage that is still possible in our in our demo.

B

If somebody clicks on the share application stage button in the side panel, that is highlighted- and you will see the following error message- essentially saying that the share button is not supported in this app. 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.

B

This proof console is currently available on the microsoft team sample repository in office dev, and let me open up the code. You can see it's available today and you can run it if you like. Hopefully the documentation covers everything and maybe zoom in to 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.

B

Our authorization code and our front-end code, our domain, includes a bunch of services and our infrastructure includes um data storage and calls to external services like microsoft graph.

B

But the most interesting thing I suppose to talk about is the new api, how how simple it is and how it works.

B

So, in our side 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. 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.

B

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.

B

That document stage component is very, very simple: 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 error.

B

That api is relatively straightforward. We take in the document id we get any information we need to from a document store. This includes information, like document name, we're talking priceless and signatories of the document, viewers of the document and things like that.

B

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 assigned viewer of this document, and if they're not they'll get to. You are not authorized to view this document error that bavia received. Previously, you might ask: how are we doing this?

B

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.

B

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 as different, because as part of the create document 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.

B

So we get the user information, and if this, if we don't have the right scopes, it will fail and we respond with all 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.

B

One thing I wanted to call out, and even more so now that rajeev has discussed it as well. Today is the keeper picker itself. So, as I mentioned, we are using adaptive cards to create certain certain certain uis um 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.

B

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

B

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 sharing to stage api. It all touches the number of things like team single sign-on adaptive cards.

B

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

C

Thank you really really cool stuff and a great scenario and played great explanation. How this one will work and and like ian and shia, was saying you can download the zip like what 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 great way of learning how to build microsoft, themes, meeting apps using this model. Thank you for that.