Microsoft 365 Community Community Demos, 7 Sep 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft Graph Toolkit Latest Releases

Description

In this 8-minute developer-focused demo, Elise Yang and André Lage highlight 2 key new features in v2.3. Teams MSAL2 Authentication Provider (built on top of MSAL-browser using more secure Authorization Code Flow with PKCE, supports interactive login and SSO) and a file upload feature added to the File List component (allows users to upload items to a location in OneDrive/SharePoint). This is the first MGT release where all major features were contributed by community! This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on September 7, 2021.

Demo Presenters:
• Elise Yang (Microsoft) | @elisenyang
• André Lage (Datalynx AG) | @aaclage

Supporting materials:
• Repo - Microsoft Graph Toolkit | https://aka.ms/mgt
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | https://aka.ms/mgt-docs
• Sandbox – Microsoft Graph Toolkit Playground | https://mgt.dev

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

Hello everyone um today, I am here to talk about uh microsoft, graph, toolkit's, newest release, so this release is coming um this week, it's not officially out yet, but we are planning to release it this week um and it'll be version 2.3.

A

So one quick thing I wanted to highlight actually about this release is this is our first release where all the new major features were contributed by our community members, so I just wanted to say a huge thank you to everyone who has contributed whether you've contributed a feature or a bug, fix um or you've filed a bug for us to fix or have you've left feedback or a feature request and repository. um All of that contributed to this release and wouldn't have been possible without it. So thank you and for what's new in this release.

A

We have two uh new major features, so the first is a teams, msl2 authentication provider and then the second will be the in addition of file upload to our file list component, so first for the teams, msl2 provider, so this was actually contributed by simon. So thank you simon. He was unable to be here today to demo this for us, but a huge thank you to simon for contributing this. So this new provider is built on top of cell browser and uses the more secure authorization code flow.

A

Our original teams provider is actually based on msl js and use the implicit grant flow. So this one is more secure and we're going to recommend using this going forward and an additional benefit of having this new team's msl2 provider is that now it can support both the interactive login flow, which you've already seen with our original teams provider, in addition to single sign-on.

A

So now we have a single sign-on mode so that um your users don't have to uh go through that login flow and sign in and we've consent to that app.

A

So here I just kind of have a quick code snippet of what it looks like to initialize this new provider.

A

One thing to note is that if you are going to use sso mode, you do need a back uh backend service and you need to provide the url to that back-end service in the sso url property, and this is how you configure your authentication so for the interactive login flow. It's still the same. You don't need it back in service, you just you, can just do the uh provider on your client and it should work exactly how the original teams provider works.

A

Now that we have two teams authentication providers, we recommend using the teams mso2 provider going forward for your team's applications, we'll continue supporting the original teams provider until msl.js is supported, but we're not going to be putting any new development or features into that provider, and it will be all going into this team's msl2 provider going forward and with the release we'll provide all of the migration uh documentation as well as getting started guides for how to do sso and set up a teams application that uses this new provider.

A

So for our second feature in this release, we have added a file upload feature to the file list component, which we released with our last release. So this was actually contributed by andre. So thank you, andre um and he's actually on this call um to do a quick demo of this feature so andre whenever you're already feel free to take over the screen.

B

So good morning, and thank you elise for this small introduction itself. I will share my screen where we can see this new component.

B

So basically, uh what is the main reason of this uh this solution? So we try to use the microsoft graph toolkit file list and we create a subcomponent itself that will be able to upload the the files to candid to onedrive or to sharepoint site. So what we do is just to use the same parameters that we define to use the file list to retrieve the information and we change the drop to the right place.

B

For example, I will pick my local drive folder and I will pick some files and if I drag and drop, I will be some actions and basically he will start to upload the the files files they are bigger. They take a little more time and the file will be automatically uploaded. The moment we go to our onedrive, the files will be updated. We can upload the files with folders and with their content, and we can always change this.

B

This process, how it is how it is activated on the new feature when it becomes available, so there is a new property, and here the first thing that we need to do is to define the the scopes that we need to to have access or to be able to upload the files, and for here it's important that we have, for example, the files read write and the site right wall to be able to be to write and to upload the files itself. The second one is on the microsoft graph toolkit file list.

B

We have a new property that is called enable file upload. When we add this new property, the the option to make upload of files will be activated on the microsoft graph toolkit, and with that we have some additional properties that can be used for for for future validation. For example, we want to limit the number of files to be uploaded to 10 each time we want to define what will be the maximum file size, that window blows, or we can define some exclusion files itself.

B

Another simple example: what we can do with the with the microsoft toolkit is, for example, I will pick a file that already exists. I will drag and drop and he'll ask me you want to replace the file or you want to keep the file if you want to keep the file we're going to have this uh a new file.

B

But as you see, there is a one afterwards, so we keep the file, so we have two files plus with the same content with a, but if you name it with one itself and with this very simple validation and with this properties, you'll be able to upload your files in a very straightforward to your onedrive or to your sharepoint.

B

It's important only to define the the options that you where you want to to drop it, and this is a very simple example how we can make the upload of the file and thank you elite for the opportunity to make this component, and I give it to you now the the call.

A

No thank you for contributing this. This is great, so those are the two new major features that are included in this release. um We also have a bunch of bug fixes, as well as other improvements to our our existing features, which will be fully documented in our release notes. So the release is coming this week, so keep your eye out on twitter and on the graph blog for the official announcement and, if you're interested in learning more about microsoft, graph toolkit.

A

In the meantime, our repository is at aka.ms mdt and you can leave any feedback bugs or feature requests as an issue there. Our documentation is a.k.a.m.s mgt dash docs, and we also have a bunch of getting started guides there as well to help you create your first application using the microsoft graph toolkit and then, if you just want to kind of play around with the components and see what features are available without setting up your own dev environment, you can go to our component playground at mgt.dev.

C

Excellent information. Thank you so much elise. Thank you, andre for the demos, wonderful stuff to see really appreciate you coming on today to share about this and look forward to seeing you again entering your next release.

A

Yeah thanks for having us.