Microsoft 365 Community Community Demos, 3 Jan 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building One Productivity Hub with SPFx for Teams, Microsoft 365 app, Outlook & SharePoint

Description

In this 11-minute developer focused demo, Waldek Mastykarz’s shares his build once, use anywhere dashboard recipe. To your SPFx app, add 3 lines of code (3 calls to Microsoft Graph Toolkit) + 1 line for auth, then adjust scope to access APIs and add a manifest to the TeamsSPFxApp.zip file created with CLI to your package. Renders one dashboard built in SPFx that can be exposed in SharePoint, Teams, Outlook, Microsoft 365 app (Office.com) that displays data stored across Microsoft 365 in one place, where you work!

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on December 6, 2022.

Demo Presenter
• Waldek Mastykarz (Microsoft) | @waldekm

Supporting materials
• Repo - One Productivity Hub powered by SharePoint Framework | https://github.com/waldekmastykarz/spfx-productivity-dashboard
• Repo - spo app teamspackage download | https://pnp.github.io/cli-microsoft365/cmd/spo/app/app-teamspackage-download/
• Repo - waldekmastykarz/spfx-productivity-dashboard | https://issueantenna.com/repo/waldekmastykarz/spfx-productivity-dashboard
• Documentation - Build a “One Productivity Hub” solution using Microsoft Teams and Microsoft Graph Toolkit | https://github.com/OfficeDev/M365Bootcamp-TeamsOneProductivityHub
• Documentation – Providers (MGT) | https://learn.microsoft.com/graph/toolkit/overview?WT.mc_id=m365-80548-wmastyka#providers

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

A

A

It's really hard to keep track of all of the work going on around us. We've got meetings planned in the calendar. We have open tasks, we have to do and then the files with which we work and we make right and all of that info is spread across the different apps that we use. We use Outlook to track the meetings.

A

We have some app to track, tasks like to do planner and then the files well they're, living anywhere and everywhere, and it's odd right, because all of that info at the end of the day is stored on Microsoft 365. and it is available to us using the Microsoft graph. So what if we could change the way we work? What if we could build a dashboard, a productivity, Hub of sorts that gives us a single pane overview of the work going on around us right?

A

What if it it could give us insights into the meetings we have left for the day, the open tasks and the files with which we worked. So this is exactly what you're, seeing now on the screen right. It's a SharePoint framework web part connected to Microsoft graph. That shows us what meetings we have left for the day, the open tasks that we have and the files with which we work. So, let's have a quick look at how it's built.

A

If we look at the code, this is literally it. In fact. It's just these three lines here.

A

So we have this HTML tag here named MGT agenda which matches the calendar events that we have here, then we have MGT to do which shows the tasks and then the file list right, which shows the files which will work, and it's literally it and the reason for that is- is that, because we use Microsoft graph toolkit, we only need to use these HTML tags right, and then we get everything in place to show that info in the webpart that we have built right. We don't need to to worry about anything else.

A

We don't need to worry about this.

A

We just get to show the data that we are interested in from the Microsoft graph and in fact we get even more right, because if, if we look at the list of events or the meetings that we have left for the day like for each one, we get its name the title of the meeting, but we also get things like the meeting time and the location and also info about the people with whom we are about to meet right and that's pretty cool, because for each one we get to see their picture, but also we get to see a person card showing us more info about the people with whom we are about to meet right.

A

So this is the meetings then for the task. Yes, we get the list of tasks, open tasks that we have in our list, but for each task. We can complete this task directly from here and, if anything else, pops into our mind, we can create a new task directly from here as well right and then for the files. We don't just get to see a list of the files with which we worked.

A

We get to see the files with their name, the modified date, the icon, so that we can easily see which file is it that we're after and then there are even the folders in case. We need to uh go a layer and deeper right, so we get all of that with just these three HTML tags, because we use MGT. Now you might think wait a minute. It cannot be it Microsoft graph isn't available anonymously before you call it before you get anything back. You need to authenticate first right. So where is the code for?

A

For that you're? Absolutely right? There is the code to do auth as well, and it's here it's this one extra additional line that we have here.

A

Mgt does auth for us as well, and it uses this way where you tell MGT what kind of app do you have and how you want to authenticate, because you can use MGT inside spfx like we're doing now, but you can also use it in a single page app or an app that you've built in asp.net in Blazer, right or in a teams app and depending on the type of app you like.

A

There might be a context available to you like we have in spfx or teams, or you might want to do auth by yourself right, like you, might have a separate way to authenticate.

A

So in this case, because we are in spfx, there is the context available to us, and the only thing we need to do is to tell MGT you are now inside an spfx app. This is the context that we have available, and this is all the info that it needs in order for it to be able to authenticate and call the Microsoft graph.

A

Now there is one more thing there right, so each API on Microsoft graph is exposed behind the scope and scope is basically permission that your app needs to have in order to be able to call the API in spfx.

A

We express that too right, so we say our app has once or needs to have access to these apis that are secured with aad, and whenever you install the app the admin world needs to Grant the access, and in our case, all of these apis are the Microsoft graph right, because we're calling only the Microsoft graph and we show info about the user. So we need to have the access to that. We show the upcoming meetings, so we need to have the access to that tune.

A

The calendars, then we show the files with which we work, so we need to be able to read them too and then the tasks, because we again show tasks right and we not only want to show tasks, but we also want to have the ability to update them or create new ones right. So this is basically our app the whole app right.

A

It's just these three lines of code here: the extra line for auth and then the access to apis right and it's pretty cool, because with already that, you can build a simple yet useful tool for yourself to improve the way you work. You might say well these days, I'm, not spending that much time on intranet, I'm, actually spending more time in teams right where we chat meet collaborate. Does that mean that every single time I want to see what else is there for me to do and really stay on?

A

On top of my work, I need to go to my intranet, find bookmark, find the page and look it up there. Well, no because the cool thing is the web Parts you build with spfx, you can expose them in teams as a personal tab right. So here we are in teams a personal Tab, app right and you can see exactly the same web part. That's the same ad being available to you in team.

A

So if you spend a lot of time in teams, well, you can access exactly the same info there without going anywhere else now you might say well, but my org is big on email. We work a lot of with external folks and we really spend majority of my time in email, so sure I have already the calendar there, but if I want to access other things doesn't mean that I need to go to my intranet or go back to teams.

A

Well, no right recently we announced the ability to expose teams apps in Outlook and Microsoft 365., and what you build in spfx becomes a teams app, which you can also then expose in Outlook at Microsoft 365.. So here we are in Outlook and you can see the same app available to you directly from the left rail so that you can access exactly the same info in the place where you already are in Outlook.

A

In this case, right and if you choose to use Microsoft 365 as the place where you start, because maybe it gives you better insights into the files or people around you- you can also access the same app there right. So it's really cool that you build your app only once with spfx, and then you can access it through SharePoint teams, Outlook and Microsoft 365.

A

and what's really cool about this, is that if you go back to the code right nowhere in the code, you see like a big switch statement. That says, if in SharePoint do this, if you're in teams do that, if you are in Outlook, do this like we're not doing any of that?

A

It's just like we authenticate once we pass the context once and it works everywhere, and that is really cool right, because it simplifies uh your code a lot, because you can just build once and use it everywhere and then right, if you add to it MGT, you can really easily connect to Microsoft graph without writing a lot of Code by yourself too right. So we've already talked about, like you, build your app in spfx, expose it to teams, expose it to Outlook and Microsoft 365..

A

Now, if you expose your app to teams like that, works immediately right, but if you want to also expose your app to Outlook and Microsoft 365, there's a little bit of extra work, you have to do right so for that your team's app has to have a manifest that is built on version 114 or higher right and by default, when you upload your SP PKG to catalog and sync it to teams that isn't the case yet so what you have to do is you have to add the Manifest to your package upgrade the version so that it's 114 then repackage it to a file named teams, spfx app.zip and ensure that that file is your team's folder in your app right.

A

If you use any other name, it's not going to work. If you use this name when you build your sppkg upload it to catalog and sync to teams, SharePoint will use the team's spfx app, zip that you use instead of creating its own package for teams, meaning it will use the Manifest you work and then your app will be available, acros teams, Outlook and office right now. How will you get the Manifest sure you can type all of that by yourself, but there's an easy way right.

A

There is this little trick so when you upload your SP PKG initially right initially, when you create a project, you will have teams, you will have the images, and that will be it. There will be no manifest in there. So when you build your sppkg and you upload it to catalog and you sync to teams at that moment, SharePoint will create the package for teams.

A

In the background by itself, there is an API that you can call to get that zip to get the team's package for your SP PKG and you can call the API by yourself or you can use, for example, CLI for Microsoft 365 and then from there. The command, SPO, app teams package download and with that you pass the name of your svpkg and you get back the zip, which is the teams package for your SP PKG inside.

A

You will find the icons you've already had, but also the Manifest, which you can now adjust, upgrade the version right, maybe add some additional text and then repackage it into teams, spfx, app, zip, and when you then repackage your sppkg and deploy that to catalog, you will have now an spfx based app that is visible across SharePoint teams, Outlook and Microsoft 365 right. So you build it once and your app is available across all these locations.