Microsoft 365 Community Microsoft Graph Toolkit, 20 Apr 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building Microsoft Graph Toolkit apps with Microsoft Teams

Description

See how easy it is for Teams to leverage MGT. In this 9-minute developer focused demo, Sébastien Levert opens with a review of MGT basics. Develop Teams apps using either yo teams (Microsoft Teams Community driven Yeoman generator) or the Teams toolkit (Microsoft provided framework to build apps in .NET, JavaScript and TypeScript). Add MGT to your project, install the mgt-react package and MSAL 2 provider. Now add MGT components. Expose your apps in Teams, office.com, Outlook. MGT is Framework agnostic. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 22, 2022.

Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert

Supporting materials:
• Documentation - Build a Microsoft Teams tab with the Microsoft Graph Toolkit | aka.ms/mgt/teams
• Documentation – Getting Started with Contact Exporter Sample | https://github.com/OfficeDev/TeamsFx-Samples/tree/v2/graph-toolkit-contact-exporter
• Tool - Yo Teams - the Microsoft Teams app generator | https://pnp.github.io/generator-teams/
• Tool - Teams Toolkit | https://marketplace.visualstudio.com/items?itemName=msft-vsteamstoolkit.vsteamstoolkit
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/mgt/docs
• Documentation - Styling components in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/customize-components/style
• Documentation - Microsoft Graph Toolkit caching | https://docs.microsoft.com/graph/toolkit/customize-components/cache
• Documentation - Localizing the Microsoft Graph Toolkit components | https://docs.microsoft.com/graph/toolkit/customize-components/localization
• MGT Playground - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | https://mgt.dev/
• Sebastien’s MGT Demos Repo - MGT Sandbox | aka.ms/mgt/sandbox
• MGT Demos Playlist - Microsoft Graph Toolkit – YouTube | https://www.youtube.com/playlist?list=PLR9nK3mnD-OUVLPfpm0QL4DVQ8Rw2Md5k

Learn more:
• 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

Folks, we are at the end of our journey with the mgt microsoft graph toolkit and today we're going to talk about teams. How can we use teams to leverage the microsoft graph toolkit component, so I'm going to go quickly over the basics of mgt for the ones that are new to it? So what is the graph toolkit? It is a collection of reusable and framework agnostic components and off providers that allows you to access and work with the microsoft graph. So the components are fully functional, they're ready made, they can use them.

A

It's kind of a drag and drop in your app and you're good to go. You can use components are already connected to microsoft, graph, which saves you tons and tons of time works with any web browser in any web framework. So you're using angular react plain javascript anything you can always use the microsoft graph toolkit.

A

Why would you care about the toolkit? First? It's it cuts on dev time, so you get to your business goals way faster. It is beautiful, but it's flexible. So if you love how microsoft 365 looks like- and you want to get some of that in your app you're you're good to go- we already have that. But if you want to customize it, you can also do it on your own terms and it works everywhere either on the web in electron, on a teams app in a sharepoint framework, page anywhere.

A

It just works, and you know what mgt loves microsoft teams. It is a match made in heaven, there's a lot of components that are very specific to teams, but also that are really a great way to create apps that brings user context in there. So how do we start? I'm going to do two very, very quick demo, one we're going to use yo teams, which is a microsoft teams, community driven uh yeoman generator, which is um awesome and super simple to use. I'm gonna go through this. um The only thing you're gonna have to do.

A

You're gonna have to install teams the teams, generator, sorry and then you're gonna have to say yo teams, I'm going to create your app a basic app and afterwards you're going to install your mgt react components. In my case I used react and then you're going to want to install one authentication provider that will allow you to get access to microsoft, teams, the contacts and the authentication so you're going to be fully authenticated.

A

So let's go on to the demo very quickly, and let me do that for now, so you can see under on the right that we have an mgt tab right here on the right on the left. We have a little bit of code, I'm gonna just zoom in just a little bit, so you can see a little bit better. um So what do we have here?

A

We have a regular, very regular um client.ts, which is kind of our entry point of our app nothing special there teams, when you're building apps a vast majority of the times. When you will build a web service, you will be building a tab and these tabs in your teams. They all have their own small apps if you'd say so. You're gonna find, for example, my yo teams tab uh here, and this is where all my app would be for this specific tab. So let me go and see what's in there, so a couple of things.

A

First, you will want to use our providers.

A

You will want to use our specific provider, our team's mso2 provider, that allows you to have a great connection with microsoft teams and will handle the authentication for you, and the only thing you'll have to do is to say hey. I am running in teams as here you know we're using if I'm in teams- yes. Well I mean teams, I'm going to reuse the library here and I'm going to use this configuration here which tells my app that this is the app the aad app that I want to connect to.

A

This is one artist codes that I want to use, and this is where I want to use my authentication, because authentication in non-sso scenarios will be happening through a pop-up. If you want to go and set up sso, then you will not even have a pop-up. It will work flawlessly without building this, but I didn't want to confuse folks to add a little bit of complexity to this solution, so I kept it as simple as possible.

A

So once this happens, the only thing you have to do now- leverage mgt, which means in our case, to use the components of mgt, for example, here having a login component and here, having a welcome person for me with these kind of things which allows you to build something like this, for example, have my login component right here, I'm already logged in so I don't have to like to go through your login.

A

But here I can have my full people card and I can drag and drop and see all these kind of things, the beauty about using teams as a surface to build your apps is now. You also have the ability, with the exact same bits of code, the exact same 100, the same lines of code. You can actually now build apps that will land inside office.com. So, for example, I have it here. I have office.com here and I can find, but I have a yo teams app.

A

That is available right there and I can use it and it has the exact same behavior that he had in teams. So now that you, you went from a teams developer to an office.com developer, allowing your users to connect to more um of your data. And finally, you also have the exact same capability with an outlook. So now you have the ability to have this and exactly the same capabilities.

A

The beauty here it also integrates natively with the theming engine of microsoft teams. If I go here- and I put it in dark now- all my tab is now fully dark and looks really really great. On my ui second thing that I wanted to do, I'm going to go quick for that.

A

If you want to try out teams building apps with teams with the teams toolkit, which is a microsoft provided framework to build apps in both net and javascript and typescript you, we also have a sample that is available. So the only thing you will have to do is to go to your teams. Toolkit tab, click on view, samples and install here, the contact exporter using the graph toolkit.

A

What it's going to give you it's going to give you this great app that we can find here that has a capability of searching for folks, I'm going to search for adele right here and where I will be able to export this list of folks straight to an excel spreadsheet. What's the beauty here, this sample uses entirely sso, so you don't even need to log in the only pop-up you're going to get is the first time for content, if you don't have already consented to these to this app.

A

But besides that there is no login required with this, or really really great example, to see the full set of capabilities that mgt can enable with microsoft teams. So let me go back quickly quickly to the slides. Before I hand it off to you, um there's a a couple of resources.

A

Go to our repo aka, ms mgt, you can look at our docs at our issues. You can even contribute. You want to see all the samples that I just showed today. They are all available on our sandbox samples. You want to play with our playground or you want to learn more about mgt everything. Is there vessel back to you.

B

Excellent, thank you. Sebastian really really cool to see those live and an awesome demo. So it's great to see that the teams v2 sdk, which is still in preview, is, is already functioning so that you can take the same team's application.

B

You can expose that not only in teams but also in office and in outlook, which is really really cool as well, so for those who might come from a sharepoint framework perspective that actually integrates with this uh team's v2 uh packaging model uh in future as well, and all of that is kind of getting automatically. So spfx is more the hosting side of the house, not the capability side of the house, but all of this is getting nicely integrated to each other.