Microsoft 365 Community Microsoft Teams, 7 Mar 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Build Microsoft Teams tab app using Teams Toolkit for Visual Studio Code

Description

In this 21-minute developer focused demo, Garry Trinder steps through creating a new Teams app that contains a tab. The Teams Toolkit enables you to build a half dozen different tab experiences with React based project templates. Covered in this session – tabs and Toolkit overviews, themes, router, app manifest, Toolkit installation, configuration, app and tab template selection. Walk through the scaffolded project code. This is the 3rd demo in this series.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 7, 2023.

Demo Presenter
• Garry Trinder (Microsoft) | @garrytrind

Supporting materials
• Training - Build and deploy apps for Microsoft Teams using Teams Toolkit for Visual Studio Code | aka.ms/learn/teamstoolkit
• Documentation – Teams Toolkit Overview | https://learn.microsoft.com/microsoftteams/platform/toolkit/teams-toolkit-fundamentals?pivots=visual-studio-code
• Documentation – Create a new Teams project | https://learn.microsoft.com/microsoftteams/platform/toolkit/create-new-project?pivots=visual-studio-code
• Documentation – Build tabs for Teams | https://learn.microsoft.com/microsoftteams/platform/tabs/what-are-tabs
• Documentation – Add single sign-on to Teams app | https://learn.microsoft.com/microsoftteams/platform/toolkit/add-single-sign-on?pivots=visual-studio-code

Previously delivered demos in this series
• Demo 2 – Teams Toolkit Learn Path - Build a bot using Teams Toolkit for Visual Studio Code - Garry Trinder (Microsoft) | @garrytrinder - (2/28)
• Demo 1 – Teams Toolkit Learn Path – Get started building apps for Microsoft Teams using Teams Toolkit for Visual Studio Code - Garry Trinder (Microsoft) | @garrytrinder – (2/21)

A

B

Today, I'm going to be talking through how to build a Microsoft teams, Tab app using teams toolkit for visual studio code. My name is Gary trinder I'm, A, Cloud, developer Advocate at Microsoft. uh This uh session today is part of a five-week series and this is covering the build and deploy apps for Microsoft teams, using teams talking Visual Studio code, Microsoft, learnpath, and so this covered at five weeks. We have already covered how to get started on week, one so that was installing and teams talk it and creating a sample.

B

App uh week, two I covered how to build a a bot, a notification bot and this week um I'm going to be covering tabs uh next week.

B

Well, actually, not next week, um I'm gonna skip a week, but the next um session is going to be covering uh team's JavaScript library and how you can integrate that into your application, so bring some of the Native features uh for of teams into your apps and then, finally, in week, five we're going to go through how to deploy and publish your app um to uh to teams and to and to azure and and you've got everything available to you at the moment. So the learn path is live.

B

So if you want to check that out, go to aka.ms, slash, learn, slash teams, talk it and you'll find all the information on the modules that we've already covered and actually the modules that we're going to cover. uh If you're interested in you you want to. You want to jump ahead.

B

So I just want to quickly recap. If this is the first um session that you've seen and I'm talking about teams, talk it you're thinking, what is it so teams talk? It is uh extension for visual studio code. It enables you to build and debug and publish teams apps uh much faster than you would be building everything yourself.

B

So if you're using the visual studio code version uh you're going to be using JavaScript or typescripts, and that can be used on Windows, Mac, OS and Linux as well, but also to just make you aware there is also a team's toolkit baked into Visual Studio 2022.

B

So if you're a net developer, using c-sharp and or just on Windows- and you can build teams apps using using the toolkit in in visual studio and for today and this series we'll just concentrate on Visual Studio code, um so yeah if you're interested in Visual Studio, let us know as well if there's anything that you'd like us as to cover, let us know as well and we'll get up to speed on that.

B

So a few uh prerequisites just to uh just to call out as I'm going through this so uh to build your tab, app you're, going to need a Microsoft 365 developer, tenant with custom apps enabled you're, obviously going to need Visual Studio code. uh Because uh teams talk, it um is a visual studio code extension and uh it's also built on uh it, uses the the node.js runtime as well, so you're going to need at least node.js uh version 14 um installed uh on your on your machine, okay. So let's get into building tabs what?

B

What is a tab? Well, a tab is really like a teams aware web page that you can embed in Microsoft teams. You can add them uh into your channels uh inside a team. You can add them in group chats or you can also have them as a as a personal app as well so open that up from from the left hand, rail, so you've got a focused um area where you, where you want to be able to to surface your your app.

B

You can also use them in meetings, so you can Surface a tab in the the pre-meeting stage before the meetings actually started during the meeting as well through the through the meeting stage and also post meeting as well. um So when you're you're viewing a uh a meeting, that's already happened, and you want to show information about that that meeting in your tab- and you can also surface it there as well now Taps can be just static or they can actually have some configuration as well.

B

So you can build configuration pages so that when people in your organization start using your your app that contains a tab, they can configure it to their their individual needs. And so you can.

B

You can build tailored experiences rather than uh just you know, a a single page that just uh shows a uh a particular um a static set of of content and and tabs can also provide a single sign-on support as well. So users don't have to manage multiple accounts. You can use your Azure ID account uh to uh to to authenticate and make requests as as well through that app and now the tabs are a really good way of surfacing existing apps as well.

B

So um you know if you've got an existing web app that people already use in your organization, you think actually yeah. We want to bring that into teams, because, because that's uh where, where our employees are working yeah, you can do that with with a tab. Now you might not want to bring the whole app in you might want to bring um certain areas of your app um into uh into teams, but using the tab is a is a great way of uh of being able to uh to do that.

B

Now. The last few weeks we've been kind of talking through a a support scenario, and um you know suppose in this scenario, you've got support. Engineers um that want to be able to view and update statuses of tickets, manage assignees and do that all through uh through through teams. A tab could be used to surface that information in the place where they're working um it might be that you want to surface knowledge. Base information within teams as well in a tab and using a tab in this scenario, can actually help.

B

So the support Engineers don't have to go to to different systems all the time they can. You know, look at a tab or a tab in a Channel or tabbing a personal uh app and access that quickly, through through teams and to you know, really help that overall support process and and and improve the uh the the communication within your within your teams. This team's toolkit coming to all of this well teams talk.

B

It really helps you to build these tab experiences through a series of project templates which which I'll I'll show you and it's worth noting that all of these templates are actually using the create react, app Library. So, as you can imagine all of the uh the the tabs you use react. So if you're a react developer and then then this will be good news for you, and so this is set up right from um from from the get-go.

B

You don't have to configure anything and you get the the features that you that you'd get from you know using Create react app to to build any other web application, but you get it in in teams. So let's quickly take a look through uh the the code which is um created for you when you create a a new project using uh teams toolkit Visual Studio code.

B

So here is our main app file. um So this is like the top level uh component in our in our app. um We get a a used tint hook. This is provided by the teams, FX library that is provided with with the template- and this gives us easy access to things like themes.

B

So what is the current theme being used in the user interface, the Dark theme or light theme, and we can pass that into a provider um which shares this globally within our application that components that are in this app can use. They can change their um change. The the user interface on the Fly should should an end user want to to change their theme, so everything uh updates and the use teams hook actually provide you with lots of information as well.

B

It provides you with with teams context as well, and you know whether this app is actually running in teams on a nice little utility there. If you're, you know, maybe again surfacing your um your existing web applications outside themes and in teams as well.

B

So it's a very useful uh useful hook uh provides lots of information for you.

B

The next thing I want to talk about is the the router, so the router is provided um for you to uh to provide client-side routing for your for your application. So we can see that there are four routes that are provided um for you, so the privacy in terms of use. These are pages that are needed to be added into the uh into the app manifest that's created for a free uh for an app.

B

So if you're building the uh building a tab, you can you can use this this setup to uh to to basically create your your privacy pages and your terms of use.

B

Pages, there's also a a config component um as well, which is another type of tablet: that's the configurable tab and but I'm just going to focus on the the tab component at the moment, and so this basically means that if you know the browser goes to our um our web server address with Slash tab at the end, it's going to load a react component called Tab, and that essentially becomes our our Tab and our our page.

B

um That's uh that's going to be going to be loaded and, additionally, uh what it gives us as well, if, for whatever reason, um yeah someone hits the the root address of our web server, it's going to automatically redirect them to uh to our tab um as well. So again, this is all coming from the uh the the react setup.

B

It basically means that we don't have to handle all of this. We could just go straight into the uh the tab component and actually start building out uh our our interface for our for our album. You know add any components that we want to. So, let's take a look at that now and- and this is the out of the box example- really simple- uh the tab is just a a simple function that returns a um a welcome component and that welcome component again can provide whatever user interface that that we need.

B

But this as you're building out your your tablet. This is where you're going to start. This is where you're going to start, adding in uh your uh your your own uh features and and user interface, so it's really uh lightweight um in in its setup.

B

So with that, let's actually go to uh to the demo and let's go to visual studio code.

B

There we go so I've got Visual Studio code here again. If this is the first time you've seen uh uh teams toolkit demo and the uh the the way that you actually install teams talk it is you can go to the uh the extensions Marketplace in Visual Studio code and just search for teams.

B

Toolkit I already have this installed um just open up the page and you'll be able to see the install button um as well in there when you've installed uh teams talk, it you'll find that you'll have a little teams icon on the uh on this sidebar. On the left, hand, side click that, and you get a number of options now we want to create a new app, so we can click on the create new app and go through the uh the the project uh creation wizard.

B

So yes, I want to create a new app, and here are the different templates that we have uh available to us. So we've got a number of tab options actually, um for us, um we've got I'm going to start with our basic kind of hello world tab.

B

um We've also got spfx tabs as well. So if you're using SharePoint framework, you can use teams toolkit as well to uh to build your your tabs. You've got an SSO enable tab as well. So that's a tab that comes already pre-configured with with SSO and a new um a template called dashboard tap as well, which sets up, as you can imagine, a a a dashboard uh like a tab.

B

That's got a user interface already there set up and that you can that you can go and uh and amend for now I'm just going to use the uh the basic tab, template and go choice of language, so JavaScript or typescript.

B

Let's choose JavaScript a place where I want to to save this and then type in your application name hit enter that will scaffold the the application for you and it will open up um and then you'll be able to run it now, I'm not going to go through that step now, because I've already done that so I'm going to skip to uh and a already created project. So this is all default. I've not changed anything.

B

What I have done is it is running at the moment. So hence why you can see the uh the the terminal down here um with the the local um address is already showing.

B

um So this is um what you, what you get by default, so we've got the the readme. That's going to provide lots of information as to um you know how to delete book how to edit and manifest- and eventually you know, deploy this to to Azure. If you, uh if you want and also add in extra features, so this is just a basic tab, it doesn't have single sign-on, um but the information uh how you can do that is is also uh also provided.

B

If we look at the project structure, so we have all of our all of our code for our tab in the in the tabs folder. If we go into the source folder, we can see that we've got um some react, jsx files in here and if I open the components folder, let's go to the app jsx file. So this is the the app file that I that I showed you.

B

This is the very top level of our app with the router and the uh and The Roots and the uh the link in references to the the individual tabs.

B

um So, if I go into the tab component, we can see that that is yeah. It's very basic. Let's just have a look at the the welcome Tab and we can see that yeah. We've got lots more um kind of code in here um that is basically building up a a user interface, and that looks like this, which is already ready.

B

um So I've already run uh teams talk it and and loaded this into uh into my developer, tenant and so to save time on the npm installs that uh that take take a while- and this is already running and side loaded and I'll just quickly go back and show you how I did that I went to teams, talk it on the left, hand, side and I clicked this button here to debug and then chose my uh the the browser which which I wanted to use for for my debug session, which is either going to be Edge or it's going to be going to be Chrome.

B

So if I just go back to the um the tab, so we see it's running if I just refresh, we should see that it will reload. So we know that that's actually coming from a from the live web server and we've just got some user interface uh components on here. We've got a a tab uh uh control that's on here, that's just showing different information.

B

So let's uh just put this side by side with the actual code.

B

So we can see here that the uh the the actual image is all coming from from this uh welcome component now. What's really nice in here is that it's actually got a hot reload as well. So if I come in and make a change and hit save you see that the uh the the code is is being compiled and the change happens immediately.

B

So it's a nice setup already from not having to make any changes. I've just created a project I've run F5 side, loaded that into my uh into my project. Let teams talk, it do all the setup that it that it actually uh it needs, and so I don't have to do it. I'm then able to make changes to the code and have that reflected in the in the running app as well.

B

Now just cover the user interface um components that I talked about so by default it uses the react, North, Star library, and so we can see that it's pulled in like a menu component that that can be used to to create this interface and with that the slides and yeah. So uh I think you've seen how kind of really quick and easy it is to to create a new teams app that that contains a a tab.

B

And if you want to learn more, then definitely check out the teams toolkit documentation uh where you know, there's documentation there, as well as the learn path of how to create a new teams, project and lots of information on building tabs for teams as well in in the docs, and this goes into how to design them. What user interface to use things to do things to don't or avoid, um as well as documentation for adding single sign-on to your team's apps as well?

B

Should you should you want to yeah, then once make requests to the graph API and pull information into your app as well and to to help your users go through that process of consenting to your app and and authenticating as well? um That's all I was going to speak about today. I know: we've finished a little bit early, um but yeah uh want to quickly finish with um this series uh build and deploy apps for Microsoft teams. Using teams talking Visual Studio code is on Microsoft learn.

B

It is a learn path and we covered building tabs today, uh just a reminder not next week week after which will be the 21st of March, we'll be covering teams, JavaScript library before then going on to deploying and Publishing your app, but so yeah. If this trusts you- and you want to learn more about the previous weeks as well- and modules uh check out the learnpathak.ms, slash, learn, teams, talk it and the previous recordings as well. That will also be on the community YouTube channel um and with that Vasa back to you, excellent.

A

Thank you, Gary, really, really cool uh demo and the simplification and how easy it is to do those things. It's it's really great. It's certainly heading to the right direction, gets simplified, yeah released by really so to say, and just to remind remind everybody, there's the V5 preview release of the teams toolkit also available. So if you have time and availability I know that they would love to get your feedback around what works in team toolkit and what does not work in dim's toolkit.