Microsoft 365 Community Microsoft Graph, 21 Jan 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SharePoint Framework web part used in Microsoft 365 Meeting Capture solution

Description

This SharePoint focused demo was extracted from the Microsoft Graph Developer Community call recorded on January 7, 2020. The entire 60-minute call/demo is found at: https://youtu.be/efcg0n6iRco

In this 13-minute extract, Jeremy Thake (Microsoft Graph) and Todd Baginski (Microsoft MVP) share a cross-platform solution called Meeting Capture app. The result of a collaborative effort in which many M365 orgs including SharePoint (Vesa Juvonen), Graph (Ben Summers, Nikola Metulev), and Teams (Joey Glocke). The sample app was created for and shown at Microsoft Ignite 2019 and continues to evolve. In the first 7 minutes of this session, Jeremy gives viewers a capabilities overview of the all-in-one meeting notes tool. Then in the last 6 minutes, Todd explains the role played by SharePoint namely to store documents and to display meeting events and tasks assigned for the selected call either within SharePoint or inside a Microsoft Teams tab. The web part retrieves task information for meetings aligned to a specific Teams’ channel via the Graph API. For meetings created with this app, all pre-read documents as well as attachments collected during a meeting, are stored in the meeting related SharePoint folder created when the meeting was created.

In the full Graph call recording, Jeremy and Todd are joined by Nikola Metulev (Microsoft Graph), who explains how The Microsoft Graph Toolkit was used for this solution.

Meeting Capture capabilities include: Meeting scheduling, document/notes/agenda capture, task assignments, meeting logistics reporting/approvals. The app is effectively a single functional front-end that connects to a host of platform services each of which may be accessed separately or via the Meeting Capture app. This uniting palate of capabilities is neatly tucked into Microsoft’s robust Teams unified communications platform.

The Meeting Capture App incorporates: Graph API, Azure Services (AD, registration, permissions, SQL), SharePoint/SPFx, Outlook, Planner, SQL, OneNote, Teams, Graph Toolkit, App Studio, Power Automate.

Presenters:
• Overview: Jeremy Thake (Microsoft) | @jthake
• Function: Todd Baginski (Canviz) | @toddbaginski

Supporting materials:
• Code for the Meeting Capture App https://github.com/microsoftgraph/meetings-capture-sample Todd Baginski (Microsoft) | @toddbaginski
• Using Microsoft Graph APIs in your solution https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis
• End to end demonstration of the Meeting Capture application functionality https://youtu.be/i2dqLM_ciUA

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint/Office 365 developer community at: http://aka.ms/sppnp.

A

But we actually built is a tab. We've called this app application, a the meanings capture application and what it allows me to do is within the context of this particular Microsoft team and in particular this particular channel of a team. We can go and create meetings that are in the future, with agendas with people attending, as well as pre, read documents and even tasks that we can create to associate with people around those pretty reads and then, when the meanings actually live, we can capture the notes of the meetings.

A

A date attachment create new tasks and actions, as we have discussions in the meetings and then afterwards actually kind of publish that meeting and sign off. If you want to be that official, like a lot of board meetings or committee meetings or governance, council meetings do so just to give you an idea about what we're doing here when we create the meeting I'm. Actually gonna do one just as in context of what we're doing today, which is the community call for February discussion, and you can see that it's already added me as an attendee.

A

But it's also added at least here who is part of the cantos a board and has also been part of meetings in the past. That I've worked on with that particular person. Now I can go in here and add a lot of other people in and it's using a people picker here to make those suggestions. So I can go and add Todd who's in the core here and now. Teaming is an attendee and you can see there's doing nice little simple things like adding their photos that are stored within the profile.

A

Now we can say that, although my next community core meetings in February, the 4th I, can't really go in and say, wow I do want to kind of start this discussion early, so I'm gonna, look for a time for 30 minutes in the 13th or the January, for these three people and when you're on five meeting times well, that's actually doing is running the get schedule in the background on the graph and I can go in here and pick when everyone's available and you can see they're at 9:30 and then not.

A

Everyone is available to attend so I'm, going to pick that 10 to 10:30 timeframe and so we're going to review content firm, the Jan, the Jan call we're gonna, discuss potential speakers here and then we're gonna talk about content from engineering that we want to add and obviously I can go in and add new attendees and maybe there's some pre reading before this meeting.

A

Maybe I have already got a list of potential Microsoft community core members that I've been drafting in a Word document and I can click Save now well, that's obviously, gonna do is go create that meeting it's gonna send meeting, invites to everyone and it'll kind of do a nice summary of all of those events.

A

So if I come over into Katie's calendar here, you'll see that there's existing ones that have been summarized where it's put those in and if I go over onto the calendar, it will come through here that I am but one on the this one. That was one I just created, and you can see that if I double click on it, it shows me all the members.

A

It shows that no everyone responded yet I have automatic, responding because I've created this meeting, and so it kind of integrates nicely with that calendar and then, when it comes to wanting to launch that and and preview that meeting I just click there. It's gonna tell me as I'm running this as the note-taker within that meeting. That Katie, which is me as approved it Alyssa and Todd, have not accepted the meaning.

A

So maybe they might not turn up shows me the agenda we initially had as well as those links, those pre, read, documents we wanted and then during the call.

A

Maybe we've got some notes and I'm just gonna, throw in some nice lorem ipsum here for the sake of not seeing me type too much and I can basically save those meetings at any point and keep re saving those as I go as a note-taker, but I can also go through and add tasks now I can go and create tasks that say: I need to catch up with new speakers for March and May I'm gonna assign that to a listener, because Alice is the one that normally does this and then I'm going to make that as a deadline for the 20th and add that task and I'm gonna covers what that's doing.

A

Is it's actually creating that planner task inside of a plan within the channel for this quarterly meaning? So if I go into my Microsoft to do as Alyssa I go into planner as Alissa, essentially I'm going to see all those tasks showing up within within my experience now after the meetings done, maybe I want to like wrap that up. Maybe you've got some final notes. I need to do shut off the meeting or like, at the end of the day.

A

I go back and I add some more notes, because I'm have my a full stacks of meetings, means that then I can publish that meaning, and so what I can do here is when I click publish that's going to go away and wrap all that up and capture it, and then summarize those notes into an email form and send those to all of the attendees.

A

This means that if someone needs to shoot this to other people, if they weren't in the meeting but want to hear see the notes they can, but also the real benefit of this is, is the amount of times like I'm on a bunch of different kind of governance teams here and V teams. If I want to find previous meetings, I just go to the channel where that V team actually discusses things and I go to the meeting capture. I can see the history of all those meetings and go review.

A

The meaning minute notes from it, and so this is super useful and it is consistent. So if your whole organization use this approach, if you get invited to a new v-team, you know where to go to look to see all those previous meetings and all the notes. So if I jump back over to Outlook here and went into Katie's mail here, you'll see that that community call for February is sent the email. We've got a nice standardized format here shows the attendees of the meaning. It shows what the agenda was.

A

It shows the notes that we're taking during the meeting, but it also shows all the different tasks that were given and and what's still outstanding so because those people do the pre reading of that document we attached those tasks is still open, but you could go in there mark those is closed and when you just publish the the meeting it wouldn't send those through and we've done those things like adding the fact that when you click on this, what we're actually doing is taking advantage of OneNote, which obviously we've created the notebook for that channel within the file section of teams and for every meeting that gets basically published.

A

We go and create the OneNote notebook page for those, and so if you wanted to have one note on your phone or one note on your desktop, you could go and basically open this OneNote page in your application. Have that one and go with you and again consistency? All of the meaning minutes will all be there, underneath these different notebooks maps to the team and the channel, which would essentially be a section within the OneNote and then every single meaning here when it would then be the OneNote pages that get created.

A

So we're leveraging a lot of different aspects of the Microsoft 365 platform here to work with a common scenario that people do within companies to run with meetings within the context of members of a team. There's.

B

One more piece to the puzzle that we haven't shown yet and that's the SharePoint framework piece, and so we also created this SharePoint framework web part and the idea here was well. It's nice that I'm getting a web bot telling me if I have pre, read tasks to do and it's cool that I can log into teams that I can find out what tasks I have upcoming for me by looking at individual meetings. But what about?

B

If I, just want to look at all the meetings that that this app tracks that I'm, a part of and I, want to look at all the tasks and those meetings that are either assigned to me or somebody else can I do that in one spot?

B

Was the use case for building this, and so that's what this web part does and I have an in edit mode to start to show you here that this webpart, when it's not running inside of teams, you put it in edit mode, and you tell it the ID of the team that you're running against, as well as the channel where you've deployed it, and once you put those things in there, the web part knows where to go retrieve the information via the graph API.

B

Now you probably noticed that this user interface looks very very similar, except for the launch button over here, and the reason it does is because it's using again the same Microsoft graph toolkit control that that lists the meetings here and so when I click on the meeting, the one that Jeremy made, for example, now on the right side, again we're using a graph toolkit control, and this one is basically the list of tasks for a given bucket and so because each meeting creates its tasks in a separate bucket.

B

This is reading from that bucket, and so we can also filter here on all the tasks were created or just the tasks that were created. For me, we didn't have time to write any actions into this page to complete these tasks or change them, but that could easily be done by looking at the other code we made in the app there to make that take place, and the really neat part about this app is that this SharePoint framework app can also run directly inside of Microsoft team tab itself.

B

So if I go take a look at this code here for the web part, this is the the SharePoint framework web part code, I'm, looking at now and in this webpart code. The first thing I'd like to point out, is the we're using react, we're using SharePoint core library. We are also using here.

B

The import for the Microsoft graph controls inside of the actual component that is inside of the web part here here is where we have our interfaces for the person, the agenda and the tasks component that we use now and there's not enough time to go through this whole thing, but at a high level here you can see the agenda component.

B

That was the one on the left side of the web part being used, and it has a click event registered for it that when you click one of them, it's going to fire load tasks, and so, when load tasks, fires here you can see how we're using the tasks graph toolkit component, which is what you saw rendered on the right side of the screen. And so, if we go back again here, this is the tasks component, and this is the our task component over here. Events component on the left.

B

It's one last interesting thing well, actually more than one, but when I have time to talk about today in the code here- and this is in the actual initialization of our web part, let me find it real quick here. It is so when the component mounts, if you're familiar with react component did mount, will fire and inside of component did mount here?

B

You can see where we go to and make a new graph service, and that's when we're going out to get the events by the group and Channel and that's here's our graph service class, where we actually execute that call, and so this this pattern has been around for a while inside of SharePoint framework. But if you haven't seen it before that, that's how these things are happening here. One last thing I'd like to loop back to and give you all a tour on that.

B

It's not a code level detail, but it is a technical detail that should help you understand the solution better. When Jeremy created the new meeting, you saw that these attachments were stored somewhere, and we saw that planner tasks we're getting created. Well, really, where are they getting created in this particular team? Channel I've put links to where they are so I can show you quickly. First of all, as we all know, when you create a team, you can create a place inside of SharePoint to store the files.

B

So this is that place that comes with that inside of the channel on teams, and so here's the one Jeremy just made 36 minutes ago, community call for February when he created the new meeting. We made a folder to track that meeting and we uploaded any of the meeting attachments to this location.