Microsoft 365 Community Microsoft Teams, 27 Sep 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Build a productivity dashboard by using Teams Toolkit for Visual Studio

Description

In this 15-minute developer focused demo – Ayça Baş shows viewers how to build a productivity dashboard app (Teams tab) using the Teams Toolkit, .NET and Microsoft Graph Toolkit (MGT) to design tab in Visual Studio 2022. MGT components – agenda, todo, and file-list are used to deliver calendar events, Microsoft To Do tasks and files on dashboard. Create default tab from template, run it and then customize it (update placeholder values for authentication, add components). Now run your completed dashboard! This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on September 27, 2022.

Demo Presenter
• Ayça Baş (Microsoft) | @aycabs

Supporting materials
• Demo - Getting started with Teams Toolkit for Visual Studio – Garry Trinder (Microsoft) | @garrytrinder
• Tools - Microsoft Graph Toolkit | https://github.com/microsoftgraph/microsoft-graph-toolkit
• Documentation - Get started with Microsoft Graph Toolkit | https://learn.microsoft.com/graph/toolkit/get-started/overview
• Dev Playground - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | mgt.dev
• Documentation - Publish Teams apps using Teams Toolkit | https://learn.microsoft.com/microsoftteams/platform/toolkit/publish
• Article (Tutorial) - Build a productivity dashboard with Microsoft Teams Toolkit for Visual Studio | https://devblogs.microsoft.com/microsoft365dev/build-a-productivity-dashboard-with-microsoft-teams-toolkit-for-visual-studio/
• Tools – Microsoft Teams Toolkit | https://github.com/OfficeDev/TeamsFx
• Learn - Teams Toolkit overview for Visual Studio | https://learn.microsoft.com/microsoftteams/platform/toolkit/teams-toolkit-overview-visual-studio
• Demo - Introduction to Microsoft Teams Toolkit – John Miller (Microsoft) | @jmillerdev

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

Advocate at Microsoft, mainly focusing on teams and Microsoft graph developer Solutions. So today we will build a productivity dashboard by using teams toolkit for visual studio and we will use.net for building the solution and we will create teams tab to give you teams at toolkit for visual studio and teams, tab with that using.net, and then we will use Microsoft graph toolkit to design our application. So maybe we'll use calendar events to do tasks and some file folders just to Showcase how we can design our own app.

A

But if you want there are also other components available in the graph toolkit, so you can just check out the documentation and before I start sharing. My screen I just want to share that. My colleague, Gary presented, get started with teams toolkit for visual studio last week.

A

um So if you go to the YouTube channel for the community, you can check out his video and learn about the fundamentals. Let me actually share a screen. Let's take this over here and make sure everything is working. Can you see my screen now? Yep.

B

A

Okay sounds good, so today we will use visual studio and if you want to learn more about how to set up what sort of tools you need for building apps with the teams toolkit, you just check out the Gary's video getting started with the teams toolkit for visual studio I will just move forward with how to customize the apps, but we will still create an app from scratch. So don't worry so first thing: I, open, Visual, Studio 2022 and then create new app I will just type teams.

A

Here there are different options: uh you can go for when you're, creating a teams app. Let's just keep as my teams app six. You can call it as one product if you have to as I mentioned. There are different options when it comes to create teams apps and we can create notification. Bot comment bot, tab in messaging extension. Since we will build a productivity dashboard, we will actually create a tab. In this example.

A

I will just create and let's wait until it's creating the project, so we already have a template coming that the teams toolkit. So when you actually create the tab and then run the app straightforward, you will see that there is a good template coming and it's also providing the authentication feature, which is awesome. So you don't have to do a lot of customization. Okay, so I just created the teams Tab and before we do any editing, let's run the app and see what's coming in the template, and then we can customize it further.

A

Before we run the app, we actually need to complete some prerequisites, but we don't need to do anything manually. Teams toolkit already provide some preparations. If you right click to the app you create and go to teams toolkit, you will see. There's a prepared teams app dependencies when I clicked this. It will bring me a page with Microsoft 365 account here, make sure that you log in with Microsoft 365 developer account which will give you a free sandbox to test debug. All of your apps related with Microsoft 365, which is awesome.

A

It's free and it is super useful I'm sure you heard of this in this community calls A lot of times, but I'm using my own enter 65 developer account here. I will click continue and then teams toolkit will do all of the preparations for my for my account, which includes Azure active directory, app registration as well. So once all the preparations are done without editing anything in the code, I will just go ahead and run the application to just to check out what is available.

A

um You can change the browser here. If you want to test out with something else, I will just run it for Edge and see how it looks like in the edge everything I do here by the way is available as a tutorial too I will share the tutorial Link at the end of the presentation. So if you want to try out yourself, you can go ahead and check out the tutorial and follow step by step guidelines to build the exact same thing.

A

It is it started running in the browser. Let me grab it in here, so teams toolkit basically does all the preparation as well as it will pop up the teams, uh with the account I registered initially in the dependency preparation part, it will log into team. So you don't have to do it again, and then it will bring you the app when it is ready. You just need to click add, and then you will see what is coming with the tab in the default template. So it's loading right now.

A

Okay, here we go, I will just click add and then I will see it in a basic chat. If you want to test it in the channel, you can just click on this little arrow and you can choose where you want to test this tab, but for now let's go for the basics Okay. So it's loading the default template. We actually have a really good looking default version of the tab.

A

We have some information about the app it's a Blazer server app and then, if you want to get the current user information, it's explaining how to do that and we can actually authorize that means default. Template also provides the authentication feature. I will accept this, and then we should be able to see the people person card at the bottom, which is a great feature, as you can see here in this demo, I will show you how to use the existing Azure active directory app registration.

A

So we don't have to worry about going to the Azure active directory admin portal and then creating an app registration from scratch, copy, paste, keys and stuff. You don't have to do any of these steps. So, let's get started building our custom map. um I will start with the host CS HTML. Here. This will be the place. We will call our msl2 provider from Microsoft graph toolkit, which will help us get the single sign-on authentication going for the Microsoft graph toolkit components.

A

This is quite necessary because we want to use the components to make our application easier and look much nicer. Like any Microsoft experience, you don't have any specific provider in the MGT yet for net, but maybe in the future I don't know. We should check that step.

A

um Okay, so I will start with some dependencies before adding my msl2 provider. I will just copy and paste them here, I'm using configuration, because I will gather some of the active directory credentials, some of the actor dietary keys from the existing app and in the body. I will just paste the script here. Let me Zoom a bit more just to Showcase what is in it. Okay. The first script is a MGT loader which will bring me all the goodies from Microsoft graph toolkit, including providers and the components.

A

So, in the second script we are calling MGT but msl2 provider, which means that in the M cell 2 provider we will be authenticated and then afterwards we will be able to use the components. But in this case we are doing something different.

A

We are actually first using these existing client ID instead of copying and pasting, so I use configuration here and get the authentication client ID from the teams FX, which is existing in the app settings.json and the second thing we do just to carry on with the single sign-on we are giving log and hint that means that we will just give the user preferred name, and then this will carry on without asking any login information from the user. So when we run the app it should be able to run straightforward.

A

If there is any permission need to be asked, then it will pop up a page, but that's all redirect URI. We need to redirect something and blank oath and Dot HTML is actually the default coming from the teams toolkit app registration, so I Define the exact same thing here in the redirect URI, let's actually create the same. Redirect HTML over here, which will be empty, but we will still need that under www root, I will just go to add and new item and we will just create a blank HTML fit the exact same name.

A

Thank you and that HTML and this is created- we don't need to edit anything here. It's just to use in the redirect and login type. We will not use login, but we will need pop-up for the scope. uh Authority will be coming from the existing configuration again and the Scopes I will require all of these permissions to run my productivity dashboard properly with the files calendar and to do so I added all of the Scopes here and that's all so, let's start designing our tab once we are done with the authentication part.

A

The rest of the stuff we will do is everything is the tap.razer. So this is actually our Tab, and here we already have a page you've seen in the default version. I will just delete this welcome page and we will start adding our existing Microsoft graph toolkit components.

A

So I added the person component, which will show up on the top and showing my picture and my name.

A

um You can also use login component, but we're not going to use any login feature so I just use the person component over here I also want to design three different columns with calendar to do and files just to show that, as a column, I prepared a div structure. It's a really basic HTML. But here we have three lines of titles as calendar events to do tasks and files, and the bottom row will be the data itself just to run the data itself. We will need the components and, let's add the components over here too.

A

The first component will be MGT agenda. The second component will be um MGT to do and the thirds, let's add, MGT file list. Okay, so this should work. Fine I was actually going to test this out without adding um CSS, but it might be a bit slow. So let's add the CSS and then test out when we reach the final point.

A

Okay, so we are done designing our tab as well. Let's extend the tab.razer and you will see tab.razer.css here so since we are not running anything with the welcome page I'm, going to remove everything here and use the existing basic CSS that I created, which is also available in the tutorial, and we are pretty much ready to go. Let's run the same app again and see if we forgot anything.

A

um This is pretty easy to build, because teams toolkit is helping a lot with the app registrations in the active directory and we are using single sign-on as well. So the only thing left for us mainly is just designing our own app um and if the pop-up works, fine, that means we're good to go.

A

um Okay, let's add our app okay, foreign.

A

Okay yeah, so the main thing we try to do here, instead of clicking anything we wanted to pop up the permissions content, page First, Once I, accept this I should be able to see everything available in the productivity dashboard. So that was the main idea. We don't want user to log in again, because we all also have the user information coming from the existing active directory.

A

We just want to use the hint and use the SSO feature, and then we give the permissions after that, we will be able to see everything if you want to see something more like when I, for example, want to see a colleague joining the same event. I need to give more permissions, and this is automatically coming from the Microsoft graph toolkit and you can extend the permissions rate and you can see more items here and if you want to customize anything in your productivity dashboard. Of course, you can do that with the graph toolkit components.

A

For me, the best place to go for customization when it comes to Microsoft graph toolkit components is mgt.dev. You can actually practice everything there and then copy paste in your own app, but I usually prefer to add some of the attributes like group by day or some of the maybe adding maximum number of the day. You want to see I think re-running. The app would be a hard in this point, but actually uh you can do a lot of customization by just going to mgt.dev.

A

You will see all the attributes available here and as well as you can customize The Styling. You don't have to use the existing filing given by the components you can customize the entire thing for your own organization.

A

This is pretty much it I want to share the link for the tutorial as well. If there is any questions, I would like to answer. If I have any time left.

B

Let's I went to the let's go to the second demo. We can answer the questions on the chat and, let's see, if there's extra time in the end, so that we don't go over with the next set of slides and demos. But thank you. I got really really cool stuff and really I love the Simplicity of this application because it shows the power of the MTT as well in the context of Microsoft teams, so really really cool stuff.

B

So you, you really truly were able to implement a useful application within matter of minutes with teams toolkit so really really cool stuff.