Microsoft 365 Community Community Demos, 5 May 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: TeamsFx .NET - Introduction to Teams Explorer Sample

Description

In this 15-minute developer-focused demo, Thomas Gölles shows off a sample tab for accessing a Teams site’s profile (a very useful developer resource) leveraging Graph and SPO API endpoints to get the information. Authentication by TeamsFx SSO and certificate for PnP Core. The app is built using TeamsFX .NET library, Blazor, Microsoft Graph and Visual Studio. From tab, select a Team, view the Team’s properties, installed apps, channels, team members, etc. No need to go to Postman or Graph Explorer for this information. This PnP Community demo is taken from the General Microsoft 365 Developer community call recorded on April 28, 2022.

Demo Presenter
• Thomas Gölles (Solvion) | @thomyg

Supporting materials
• Tools - Microsoft Teams Framework (TeamsFx) | https://github.com/OfficeDev/TeamsFx
• Tools - Blazor | https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor
• Demo - TeamsFx .NET - Current Updates - April 2022 | https://youtu.be/5yULqXWIz2M?t=801 |– Thomy Gölles (Solvion) | @thomyg

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/m365pnp

A

A short introduction, I'm a team lead at uh soldier here- are all my social connections to reach me. That's the important part on that screen to give you some reference or to make some some contents clear. What I want to talk about to you today is teams development, and you are probably are all familiar with that kind of graphical screen. What we want to do today is that we want to create a tab using web technologies, calling microsoft graph with visual studio, so taking a few of the boxes of this microsoft slide.

A

What we're going to use to do that, something that I talked about like two or three weeks ago, so we will use teamsfx as a library here we are um and, of course we will write dotnet code again, let me make a short choke on costs of our react friends, I promise there won't be any promise in my code because it's topnet just for reference.

A

What is the team's effects on this slide like the toolkit, and this is a library that is provided by uh yeah, the microsoft, uh dev and and teams team to allow you to reuse their their investments in terms of the library so that you can easily integrate your applications or start from scratch?

A

And basically you have a nice library that helps you uh with things like authentication and a couple of settings teams, and that is exactly what we're gonna look at right now so from here now, let's move actually into the demo um at first, I will start the application first, so we have a short idea. What we're going to look at and I'm opening up it over here in this window, um very simplistic ui.

A

At the beginning, I select one of my teams that I joined a nice spinner waits for a couple of seconds and comes back with some data from a couple of graph endpoints.

A

The idea of this application is basically really something that I created for myself a couple of months ago, because when you're, developing microsoft teams and you're doing proof of concepts, you always need those ids of certain teams of your channels of your team and of course, you can go to a great tool of graph explorer.

A

You can go to postman and reuse all those tools to always get those ideas I like to have my own ui at first, because, first of all, I learned teams fx a little bit that way and second of all, I just want to have like this on my joint teams in that tenant. I click that, but I need to work on right now and then, after a couple of seconds, it shows me all the properties of the team like yeah.

A

All that's, coming back from the teams object from the graph call all my installed apps in that team. So it's not only the things that I deployed there or you as a developer deployed there, but also, of course, the built-in um applications that are available in teams and in teams. Everything is application, brake cloud groups, application the calendars, application, callings application, and that became handy already a little bit if you need to adjust policies and you need those ids and yeah.

A

It's just another way to retrieve this information in directly in teams, without the need to go to postman or to graph explorer, because remember teams is all about reducing context switches, so we have here channels, of course, so we can have a look into what is the graph giving us? What is the api, giving us in terms of channels and how are they represented in the api with all their yeah ids, and there should be a reference over here.

A

Still, those things should mean something to people that used to work with skype, same uh yeah, nomination like back in the days of course. Also the members are there, so you can have a look at also. What are the team members in your in your specific team? That's important, or this is something that helps. If you create a bot that should mention someone or that should notify someone, then you need a couple of those ids and that's basically, the idea of this little help application that I created for myself and then it was like time.

A

Okay, let's make that a proper sample so that the whole community can um have it and play with it. And that was the idea somehow I think in in november last year and yeah, I'm still not done.

A

uh We will see that it's a lot more than it was in back in november, but um what's missing still that to be a sample in the pnp repo in the community sample is I need to create the documentation and read me because of course I added a couple of features, and I did a couple of things that make it more complex to deploy and then need to really describe that that so that you can also deploy it to your local tenant.

A

But let's have a look at the application itself or how we can achieve that. So, let's start from the team's manifest. uh Of course it's a teams, fx solution, so I went through and created a new teams tab based on the template. If you're not familiar with teams of max uh there should be a youtube video out from the last community call, I think, two or three weeks ago, where we introduced you to teamsfx in general. I won't go into detail to that, so we want to spend our time really like.

A

Okay, we assume that teams fx is known, and with that we assume that okay you're a teams developer. You know what a teams manifest is, and we start by looking at what is our static tab, because what we saw first was a private tab in the ui world in the api world is called the static tab, it's a content url with slash tab.

A

So let's find that page going to pages tab here we are very simplistic: using teams explorer components, uh a nice ui representation with the card of a certain ui framework, and then my teams explorer and the last time I showed you teams, fx or blazer. Actually, that's the technology that we are using here.

A

I just started with the sample project that came out that comes basically out of the box with teams of x and this one is already modified, so there is no c sharp code down there, so everyone that uh yeah listens or reads uncle bob's books of software architecture and clean architecture. We are not messing around with these things today here, so this clean code, clean laser code y blazer, uh you see a reference to yeah certain c sharp elements directly in html.

A

That's the beauty of blazer that you can use c sharp in the front end. But again we have this drop down. Remember from the demo. Basically, that's the only thing in that is generating an event, because when we change something, then we show different values in our tabs here in our items- and I created a couple of different tables to represent the data and basically those tables are then yeah populated with values from our variables in here in the backend.

A

Of course, there is a c-sharp file. You can always create a razer component and create a code behind file by just naming a new class. Exactly like your razer file. Like component.razer.com and then add the partial keyword on top of it, because with that visual studio and dot network, basically realizes okay, I need to mix up those files during compilation or exactly before compilation so that we can create cleared code.

A

So we have a past class here with again you see here the definition of all those values from the front and then it's pretty straightforward in our lifecycle method. On after render async, we are saying: join teams await data service, get teams so again, something that we that I'm introducing you to now compared to the sample from two weeks ago.

A

We're calling an actual service in here, so we're not messing around with business logic or data logic in our ui code, also not in the call behind file, because this basically just reacts on on render creates the first initial list of my joint teams this night, the nice notification that we saw this. This green pub saying: okay, we're good and then it reacts on the on team, select change event and with the on team setup change event. Again.

A

A couple of service calls that grab new fresh loaded data and down there there's just another method that basically gets rid of all the existing information in case of we load information for a new team. So we want want to see the spinner again and keep our yeah our ui, responsive and and nice and easy so the magic so to speak, of course, is behind this data service and let's have a look at the data service because we are using dependency injection from the six. Why? Because we are a normal dot net six web application.

A

That means in our program cs. We are registering services that are available within the application and, of course, the folks that create the team's fx also registered their services in there. So teamsfx microsoft teams, that's also part of our service chain and with dependency injection. We can make use of the services. Now you will see already. I also added the pnp core in there, so we can also talk to sharepoint with the service and, of course, I'm registering our own service as well in there.

A

So it's available to our front end code and in the service, then we are basically using again dependence injection to get the service references and then, if the get team's call at first we're going to create a graph client and the graph client is something that already is also taken care of in some regards by teams of x, because using the graph of provider and using the team's user credential, both things that are available through teamsfx, you can easily call a graph service client or create a graph service client, and with that you are back to let's say regular.net sdk of microsoft graph and then it's easy-peasy calling graph join teams and getting our teams back, of course, a little bit of sorting so that we've nice alphabetically order and down there getting details.

A

All those different graph calls to get the team details and basically create a property list, so brute forcing basically over the class over the type and getting back all the properties for different graph calls for the teams call for the install apps. It's always the same idea, get the object back from graph and iterate through it, and we can also make one more thing.

A

We can use our configuration, of course- and you see here, teams explorer, so I can go in here and say I want to show a sharepoint online data and I also want to activate the fancy mode and of course, you see down there, the pnp core config with a certificate. So we'll talk about that in a second but normal, a app settings json, you are you're using laser server. So it's okay to have this app settings file it's on the server, it's not in the client. It's not in the browser of your user.

A

Just run again.

A

It takes a couple of seconds to spin up the local debugging I already modified. The oe string was not true. What did I? Okay? Of course you should write proper english in here.

A

My mistake, let's rerun again and with that we have a fancy mode, so we have parker in here because I get always marked on my design capabilities. Now I added parker. So no one can mess again with my design, because now you would mess with parker as well, and no one dares to do that. But if I now select a team here, you see there are two more uh tabs.

A

Sharepoint site properties and sharepoint web properties takes a couple of seconds again to to load all the data now a little bit more because we are also waiting on our calls coming back from the sharepoint world, so the pmp core library, again team, installed apps channels, members and if I go down here to sharepoint online site properties, that's the properties of the site collection. You see all those fancy things in there, and sometimes it's just really.

A

uh You need a use case to use the authentication of the pnp core library, that's my use case for that and the web properties and you go all the way through and again in terms of authentication. um The idea is that I'm using my own application definition for calling in the pnp core library with my certificate. Why?

A

Because, of course, for the graph part, I'm reusing what teamsfx gives me in terms of the sso token, but for the pnp core library I might want to have application permissions, because I might want to do something else in there and then a second application comes in handy in here with that, let's just make a short wrap-up.

A

What you saw today, teams explorer it's a sample tab that looks behind the curtain of a couple of graph and sbo endpoints we're using teams, fx singles and on for graph call and a sophisticat based application in azure ad for calling pnp core, and you saw a lot of components. We talked about dependency injection code behind launch settings and saw some ui settings with that, I'm giving it back back to david. Thank you.

B

Excellent, thank you. Tommy. That's really really cool stuff and really appreciate the depth. You went in there to show how it can all be put together.