Microsoft 365 Community Microsoft Graph Toolkit, 6 Apr 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building Microsoft Graph Toolkit apps with Angular

Description

In this 12-minute developer focused demo, Sébastien Levert once again reminds viewers that MGT is Framework agnostic. If you're building apps with Angular, you can use Microsoft Graph Toolkit components. To get started – install the Angular CLI, use the Angular CLI to scaffold up a new web application (ng new angular app name), then install MGT. In this demo see how the mgt-login and mgt-agenda components are added within Angular components. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 8, 2022.

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

Supporting materials:
• Documentation - Use the Microsoft Graph Toolkit with Angular | aka.ms/mgt/angular
• Article - A Lap around Microsoft Graph Toolkit Day 14 – Using Microsoft Graph Toolkit with Angular | https://devblogs.microsoft.com/microsoft365dev/a-lap-around-microsoft-graph-toolkit-day-14-using-microsoft-graph-toolkit-with-angular/
• Angular - CLI Overview and Command Reference | https://angular.io/cli
• 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

So continuing on our journey to discover the microsoft graph toolkit and all the different components and ways to integrate with your existing applications. Today I wanted to discuss the angular case.

A

We have seen actually based on the usage that there is a lot of usage of the microsoft graph toolkit with angular the the full spa framework from google, which is absolutely awesome, and we wanted to provide some easy ways to integrate with angular. So today I really want to bring you onto a journey of creating an angular app making it, as seems as possible, to integrate with the microsoft graph toolkit, but before we dive into a little bit deeper. Let me do just a little bit of a recap of what is the microsoft graph toolkit.

A

So the toolkit is a collection of reusable framework, agnostic components and off providers that allows you to access and work with microsoft, graph, so think about functional pieces of code that you can drop into your app that automatically connects to microsoft graph styles. The components really leaves us the hard work of building components that you can then just reuse inside your apps, but you're. Not stuck with our components, you can build on top of them, you can customize them and you can make them work with any web frameworks.

A

We've already discussed a lot about just plain html. We also discussed about react last week. Well, this week is all about another one angular and as it's the case for a vast majority of the web frameworks today, they basically work on any modern browsers.

A

Why would you care about the graph toolkit? Well, first, it cuts on development. Time can easily add ui components that access graph with just a few lines of code. It's really really simple: to bring them in without having to build a full pipeline or a full infrastructure to bring these in, don't have to style any of that. It's just they're out of the box, they're beautiful.

A

They look like microsoft, 365 components, but they're also flexible to really respect your own brand and bring your own styling guides on top of mgt, and it just works everywhere. It works inside teams. It works inside sharepoint. It works inside electron. It works inside your single you're you're, just your spy or a single page application. It works with an outlook. It works within a bunch of different areas where you will be thinking that you can bring these components in so think about how this can really extend your experience to other platforms.

A

Other capabilities entity loves angular and there's a couple of reasons why mgt loves angular. First angular is extremely friendly with web components. Web components is the standard that we are building on top of for everything component. So we're not building react components. We're not even building angular components, we're building standard web components that are available for all html frameworks out there and angular is extremely friendly with web components, so it makes our job really easy to integrate, with angular or they're, just very, very little settings and then you're up uh to go.

A

So if you want to learn more about how to get your app running with angular, you can go to ms slash mgt, slash angular, where you're gonna find the entire walkthrough that we're gonna go through today.

A

How do you get started simple? First, you make sure you have install the angular cli, which is the core of how you're going to build an angular app. So you install globally the angular cli you're going to do a new app, so you're going to use a cli called ng. So engine? U whatever name of your app in that case demo ngt angular and you then install mgt and and npm install at microsoft, mgd and you are ready to go. So that's as simple as that. So let me go here.

A

Let me go to the actual demo. Let me close my slides and let's go deep into what we want to do. So, let's start with our app module, there's a couple of things that you need to do to enable custom components or web components as part of your angular application when you're building your app you're going to get an app module which is kind of the root of your application. If you're building in react, you would have an index.ts in here.

A

It's more like that, app that that module that ts file that you're getting and here you're going to have to import the custom elements schema that will allow you to add to any html template that you're building you're going to be able to add unknown html elements like the mgt ones, mgt login, ngt agenda, it's going to recognize them and will automatically support, adding these capabilities and will not screen four errors over there. What you need to do you actually need to specify which schemas you want.

A

So you can just go here and add these custom elements here and the rest is just a standard angular module with the different sub-components that we're going to use our main component will be our app component and we're going to have a nav bar that on top here and the agenda component. This one right here, let's go see our app component, let's see how it looks like- and this is really where we're gonna initialize ngt.

A

So what we're gonna do is we will be making sure that we have mgt looped in first thing, we're going to do we're going to import some of the mgt capabilities as part of our class here, so we're going to import our providers, our msl2 provider, our template helper, we're going to come back to this later and our provider state.

A

Why? Because here, when we will in it our angular module- or in that case our regular component, we will want to make sure that we have our client id hooked onto every single routes. Every single component that are in there so basically you're going to be able to use nhd components all over the place, so we're setting here our client id is coming from an environment file that I have that has my actual client id.

A

Also, I'm providing a simple is login function. This will allow me to do some conditional things on my html. I will be able to say this specific div or this specific dom element. I just want it to be rendered when it's logged in. So, let's go see at how this looks like in the html template that I have going to my html tablet here, you're going to find here that I have my very simple toolbar, where I have this here, where I have my app nav bar right there and where I have my app agenda.

A

These are the controls that I'm leveraging here. These controls are different components. So let's see how the nav bar actually plays out- and this is where we're going to have our mgt login component. So if I go to my nav bar and I go to my html, I'm going to find here a very simple login class here with my mgt login component.

A

So as you can see compared to how we're doing it with react, where we're wrapping all of our components in in auto generated, react components here, you don't have to do this you're playing with the raw html components with our raw web components to get the full access to mgt, which makes it super super simple, because there's nothing to translate from html to react.

A

So here just play that in the screen automatically it's going to get loaded, it's going to be able to understand that there is a global providers that the provider is logged in and will automatically show up in our screen right there same thing with our agenda component. If we go back here, we have our app agenda.

A

If we go to our app agenda you're going to find that the agenda here will um automatically be this guy here, the mgt agenda and some really cool capabilities that we can do that are um mgt stuff that are a little bit specific to angular. The first one is this, this syntax kind of square bracket square bracket, closing square brackets?

A

Why do we have them? Well? Angular supports curly braces so curly brackets as their way to identify their own capabilities within angular. So now we're kind of conflicting with angular, and that is why at the root so for all of our app, we can simply say when we go back to our app components.

A

I now want to set the binding syntax. Now I don't want to have curly brackets.

A

I want to have square brackets to represent this, so when we're doing our work, when mgc works on the page, it will use these square brackets and then we're going to be able to have all of our conditional rendering from mgt, and all of that, like we have here where we say when you're going to do click you're going to call the open web link method, we're going to come back to this one, and I want to display the event dot subject, which is exactly what you see here right, but I'm really I'm reloading this one here automatically.

A

It renders just this specific template of an event with just this line of code. As you can see, we also have a click event. So how does this play out? Well, there's a little bit of code that you can put in there where you basically need to attach to the dom element to the actual html element which is done using the view child directive. That is right here. Where you can say, I want to add a template context. That's something we've done in the past with a lot of our nhd components.

A

You can add some capabilities, some functions to the components to do stuff, and in that case we have open web link that basically just do a window that open of the the event that is available as part of the context.

A

And now, when I go here- and I click on the this here- it opens up a new window where I can see my event showing up. So that's really what the only thing you need to know about angular the rest bring as much as you want from mgt in your app. You don't have to think about any other capabilities. You can just bring this straight to your application and it should work natively now a couple of links.

A

If you want to go to our repo, our docs or issues, the samples that I've showed today is available on our sandbox ak dot. Ms mgt sandbox, our playground, our learn modules, I'm all done for today. Brian back to you.

B

Thank you so much sid for showing us a little walk through on anchor love to see all these demos and nice just easy, easy to consume kind of things for ngt uh great, to see this and appreciate you coming on to share both.