Microsoft 365 Community Microsoft Teams, 18 Mar 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Getting started on using Microsoft Teams Yeoman generator v3

Description

In this 13-minute Developer-focused demo, Wictor Wilén picks up the newest Microsoft Teams App Project Generator - #YoTeams at the Repo and proceeds to take viewers from generator installation, project creation – scaffolding of files, to and explains VS code files. Note: not using class based React components but using functional components and React hooks. Then create a build and install app – a configurable tab, in Teams. New V3 capabilities called out through demo. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on March 18, 2021.

Demo Presenter: Wictor Wilén (Avanade) | @wictor

Supporting material:
• Repo - Microsoft Teams App Project Generator - #YoTeams | https://aka.ms/yoteams

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 if you want to get started with your teams, I highly recommend that you go to ak dot. Ms slash yo team. To start with, that's a github repo. Where we have this solution, uh we you can submit issues there. You can use the discussion forum if you need to discuss something. We also work in home, documentation it's getting better, but you can actually switch over to the preview branch and the documentation a little bit a little bit better right now.

A

But essentially the solution consists of the generator uh which generates your solution, which you need to install. You need to install the npm, of course uh same as as with sharepoint framework, then you install the generator teams, and the solution is also using uh another separate package nowadays called yo team spilled core. You don't have to install that.

A

That's taking care of you by the generator, but essentially that's the bill, toss we use for for the packaging manifest building the web server, etc, cetera and packaging, the the client side and server side code, and we separate that out to separate package so that can be updated independently. Instead of of the generator having to inspect all the files, you have etc, so, but it's in here and both of them have readme files.

A

If you want to understand more about the different kind of tasks that you can do, for instance, with their core and documents here, the different kind of build tasks, you have everything from build, creating a manifest serving it locally and and if you want to override them and do whatever you essentially want with them, some people want to do much more with their webpack, for instance, they might want to switch that out completely. So it's totally up to you. It's full flexibility and we give you all the source code here of it.

A

So you can build whatever kind of solution you want, but to get started. What you need to do is once you have node uh 10, 12, 14, 15 or whatever in store install. It has to be over over 10. You can just type yo teams, yo teams, I run with skip install here now. That means I don't install all the node modules, so we don't have to watch that thinking for 10 minutes or so whatever it takes.

A

Depending on on the bandwidth you have, but once you do that you will be asked a couple of questions. I I will make a very simple one. Then we jump over to an already prepared demo. This will take a few seconds before the javascript script. Gremlin starts to work so very similar to sharepoint framework as well give it solution name. uh I want to create my project in the current folder, where I'm at right now uh give a title of my project. This will be visible in microsoft teams.

A

Once you install the application, just leave the default, you need to have a company name or your personal name. Then you have to choose what manifest you want to use so right now we have support for 1.8 and the preview. The next version will have support for version 1.9 as well, but we uh essentially that was shipped with version three, but we disabled in 303 due to that it wasn't supported in any tenant. So there's no point in having it out there because it just caused a lot of problems.

A

So it's currently, you can actually go in and modify it manually if you want to do 1.9, but 1.8 would choose that. This is a new option we have since the project started four years ago.

A

The number of features has grown over over the years, so you had to almost setting up a simple project was like 20 30 questions, so we made it simpler right now by turning off the advanced question. If you choose quick scaffolding here which, although you only ask the simple questions and you get up to speed much faster, but if you want to add more testing or other advanced scenarios choose no in that question.

A

In this case, I wanted to create a tab I'll need to specify url where to host it later. That can also be changed afterwards.

A

Then I answered no to the show with loading indicator. I need to give it a name. I want to create a configurable tab. Yes, I know it's going fast here, but essentially I'm just clicking enter and go through all the questions. To create a configurable tab, we have the support for azure additional sign on. uh I'm gonna opt out of this right now, because that requires we have it as yes default, but typically you need to, or you need to set up an azure ad application to get that to work.

A

So, let's just use snow there. This is a cool thing. You can actually make this available in sharp online as well, by specifying yes here, which means that you can take your package teams package and upload to the sharepoint app catalog and have your tab being a web part or a full page application in sharepoint, and why would you do that when you have sharepoint framework and those scenarios will want, you want to go back to the to using the provider hosted model of having applications?

A

For instance, you need server-side, rendering or more advanced features, or you want to reuse the same application in other areas as well. This is a very good way of doing it. Specifically if you're an isv, you have an application. You want to not have everything in javascript. That's a good way to to create the provider host the web application, but I choose no for that one right now and once that's done, it creates a couple of files for me and I can open vs code and start looking at it.

A

So if I jump over to vs code so what's happening when your project is being scaffolded, essentially uh it will create a source folder for you. It will create between four or five different folders. The test folder here is only if you chose test when you scaffold it. If you wanted to be scaffolded with tests, so typically you only see client manifest public server and the server folder contains the server side code. That's essentially is creating the node express solution hosting the the file, the the html files and any apis and stuff you want there.

A

The client folder contains the client-side code, that's the javascript, the react, controls, etc. The public folder is for html files, static files, images, css and whatnot, and finally, the manifest is where you have the team's manifest and once the solution has built built everything you will have in the package. Folder. That's where you will have the zip file, the teams application you upload into the teams, app catalog and the dist and is where the actual executable the javascript files of the solution are.

A

So that's where you start your application, and this is the big difference between version two and three. Essentially, we had everything in the same app folder previously, but right now we split up it into server and clients to make it easier for for bigger teams to work with, and specifically also it's easier to manage, the different kind of uh typescript configuration, etc.

A

So now, each instead of having them in the root folder there, the t is config the test, config and whatnot, and even eslint configure, as you can see, are stored in the client and server respectively.

A

So, let's take a look at the tab, so the default tab, one is being scaffolded. We have three files, the one for the tab, the display, the normal tab. You have one configuration uh control and one for the remove control.

A

If we take a look at the the normal page here, this is also so, if you're coming from the sharepoint framework. Well, it's a little bit different. We are not using class-based react controls here, but it's done is that functional components and react hooks, so that might be a new thing for for some of you, but as me personally, I'm all into using react hooks now. You can actually use that in sharpened framework as well, for your custom components, but it's in an easier way and that's the way forward for react as well. So react.

A

The new versions react! That's where that's! Where react is heading, but essentially we created one uh custom hook here called use teams that makes all work with the team's javascript sdk so much easier. So, instead of you having to initialize the team's con context and getting managing the themes managing the full screen, handlers, etc, you can just use this hook and it will create a couple of properties for you.

A

You will have one property called in teams which is set to undefined one, while, while it's loading and then true or false, if you're hosted or not hosted in teams, you will have the current theme. You will have the current context.

A

So in this case, I have an effect here in react and when in teams is changing, when that value is changing, it will run this method. So once team once uh the react component knows that it's in microsoft teams and this variable has changed. It will go in here and run the microsoft teams. App initialization notify success to tell the team's application. That is ready. If it's not in teams or something else, it will actually just set an internal property to not the microsoft teams same kind of thing.

A

Once we once the context is loaded, we can use that to do stuff with and we can do the same kind of thing for if I want to control if we're in full screen or not, I can just add full screen here and make the same kind of use effect for the full screen and manage that without creating my own custom handles for it, and then it's adjusted.

A

The render method down here- and I can use of course, use full screen here as well to hide and show certain things if you on a full screen or not. For instance, I want to show a custom menu if I'm in full screen or yeah, or vice versa.

A

So uh once you have this, all you need to do is uh open up a command prompt and you type there type, let's scroll back here and what you type is called ng rock serve. If you want to use andy rock, for instance, that will create the public, url and stuff for you, and then we create the manifest and everything it will compile everything for you and get it started, which I've already done for my demo solution here.

A

As you can see it's running in the background it created the manifest validate the schema starting, the webpack, both the client side, the server side it copied some files etc to have everything up and running. So what I need to do is I go over to microsoft teams and I need to find the right window there. It is so in my um team here, let's sideload, this application go into applications for that team, uh find the upload a custom app in the lower right corner and, let's see where it is, I choose my zip file.

A

That's been been generated by the generator and, let's click add here, to add it to this team. So I'm done now. I'm sign loading it. You need to have those permissions as well to be able to do that. Hopefully you have a office or microsoft 365, dev tenants. You can do that. Then I can go into any kind of channel and I can click it plus here to add my custom tab, which I haven't done anything to. Let's do yo teams v3 demo and there you will see now.

A

The first is the configuration page I mentioned. There's three react components, one for the configuration page, so we can just type hello pnp here, save that value. That's you can do whatever you want in here and then we have the page that will load the react component and it will also type out hello pmp in here, and this is the exact component you saw. I I showed you just now created using react and react hooks. So it's a very simple way for you to get started. This is what you get out of the box.

A

Then you can start adding signal sign onto it. You can add your completely custom solution and by default you'll be using the react. uh React fluid. I don't know what is called react view and north star package to do this instead of the office ui fabric. So, for instance, we immediately without writing. A single line of code have support for the the black and dark themes, uh light and dark themes, but also the high contrast themes.

A

So that was a super quick introduction to it but, as I said, go to ak, msl teams take a look at some of the issues. If, if you have an issue with it or go into discussions and ask a question uh or please, if you have ideas come with them and let's make the solution even better thanks all.

B

Awesome stuff, absolutely brilliant stuff. Thank you victor on that one really really cool um and super easy to get started on things, and obviously there was a question related on. When did you use your themes and when they use spfxioma generator? um The simple answer is spfx is for the ux and every single time. Like victor said, you know you have a back end, then you would be doing your themes or an alternative back-end technologies, um but and one alternative actually for tech is the microsoft teams toolkit.