Microsoft 365 Community Development, 18 Mar 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft 365 Development Community call – 18th of March, 2021

Description

Microsoft 365 Development Community call on March 18th. Demos: 1) Accessing comment information in list formatting and advance form, 2) Getting started on using Microsoft Teams Yeoman generator v3 and 3) The Microsoft Graph Toolkit in Teams with Blazor. Latest GA releases - SharePoint Framework v1.12, PnP Framework v1.3.0, PnP Core SDK v1.0.0, and PnP PowerShell v1.4.0. yo Teams generator-teams (apps generator) v3.0.3, yo teams-build-core (gulp tasks) v1.0.1 + v1.1.0 Preview, and msteams-react-base-component v3.1.0. The host of this call was Vesa Juvonen (Microsoft) | @vesajuvonen.. Q&A takes place in chat throughout the call.

Learn more:
• See the full blog post for this call at: http://aka.ms/m365pnp-blog
• Download invite for bi-weekly General M365 Dev SIG call: http://aka.ms/spdev-sig-call
• 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

Welcome everybody: this is the general microsoft 365 development special interest cube. uh It is the buy weekly sync, it is march 18th um and your host today will be me. My name is I'm a program manager in the microsoft 365 side of the microsoft, and today we have a really cool agenda again, we'll we'll use the first 15 minutes like typically and to go through some of the updates related on our open source projects across the different areas, and then we can have a look on the.

A

What is the latest samples related on the microsoft teams areas and we'll have a quick picture time as well, and then we have three demos starting clock quarter best on the hour is the target for all of the demos and chris I will start then we'll go to victor vlan related on german generator for microsoft teams and tommy will go through microsoft, craft toolkit in teams with placer so really cool setup of capabilities going through and awesome demos in the pipeline, um and I didn't mention what chris is going to go through.

A

But obviously everybody knows chris kent is going to do some microsoft list magic and I don't even know what he's going to show today but uh we'll see um it's it's a good way of keeping a surprise to yourself as well. Now before we go to the updates, a quick recap again, uh we would love the community members to volunteer for doing demos in this community course. So we would love people to be able to demo their let's say sample code or solutions or actually learnings. It doesn't have to be a open source solution.

A

It doesn't have to be a sample which is submitted. It might be something what you learned from your customer project or a a let's say, a school hobby project, and you want to share that for others, because when we are watching those learnings and and having that those demo discussions, we learn from everybody else and that's super super valuable way of actually super super valuable piece of this course. Now you can absolutely contribute. Also in github we have various different locations, I'm going to show all of them in a second and then provide feedback.

A

Provide feedback, provide feedback. Everything what we do in microsoft, we're doing for our partners and customers. So if something doesn't work or something works, um please let us know. Positive feedback is also really really really powerful way of actually keeping people engaged and keeping people investing on certain areas.

A

Now, quick recap on our urls and assets and ad resources, so we have two different youtube channels. We have the master, 365 developer youtube videos which is only for developer stuff. Then we have the microsoft 365 community videos which is developer, stuff makers and builders.

A

Videos on that one, and we have a lot of open source stuff available in multiple locations. It might be really hard to always find the sample or code piece which you're looking for so.

A

Therefore, we have sample galleries, for example, for finding your microsoft team, sample or spfx web part sample or list formatting samples from a simple location uh right now we're working on a unified, microsoft, 365 sample gallery, where we will then surface all of the microsoft samples and community samples, and you can easily filter out what you're searching for that's going to be coming later this spring and then, if you're wondering on that, there's too many urls to remember uh only one url actually to remember, which is a gamers, m365 bmp, and then from that location you can find references to all of the other locations.

A

Now, a few other updates. Just a quick recap: we do have our sample gallery for microsoft teams development. So the cool thing about this sample gallery is that it actually surfaces all of the microsoft samples in github and also all of the community samples and githubs in multiple locations.

A

So it's not only what has been provided in a single repo, it's multiple organizations and repos aggregated to a single location, making it easier for you to find that the relevant sample for you, a game team samples is the url for that one and then, let's jump on here, I think david is going to do.

B

This slide so david trying for you absolutely thank you vesa. Well, friends. As you know, we are inclusive and open source community that invites everyone to take advantage of the resources, as well as contribute back to the resources that are available for everyone in the community. But we understand that there's a degree of complexity, sometimes understanding how to navigate github, how to set up your workstation, a number of topics how to contribute documentation if you're not a developer.

B

We welcome all contributions, but we want to help you if you feel that there are challenges that you can't overcome sharing is caring is an initiative that provides you hands-on guidance. So we invite you to join any of the sessions. Our team is growing and you're going to see a wide spectrum of topics coming soon, including power platform and some new sessions coming up next week. First time presenter and more than code with vs code, and then we've also started the amas every month.

B

So we have the next ama scheduled for april, the cli from microsoft 365.. So we're excited about everything we want to get more involved with you. Please don't hesitate to join completely free, hands-on, safe space learning, we don't record any of the sessions. So it's great opportunities to ask any and all questions. You'd like we'd love, to see you there aka dot. Ms forward slash sharing, is caring. That's it back to you.

A

Excellent, uh thank you. uh Thank you, david for that one. Now, moving on on the slides, a few updates and few news from the microsoft side of the house, we are currently conducting a survey related on our microsoft, 365, developer, ecosystem support and support thinking, and we would love you for being able to submit your feedback related on these things.

A

You will see actually a lot of surveys coming up from our from the microsoft site within upcoming weeks, so just a wordable warning- and this really comes back on the fact that there's a lot of lot of already planning for next fiscal or our fiscal year and in microsoft the fiscal year always starts in july. So we're already collecting a lot of feedback from our core audience, and so we can allocate the funds and and uh budgets uh properly.

A

But please, please go against and developer success for giving us feedback related on this and then some news and announcements pretty recent announcements. So on monday we microsoft we released a new, getting started. Microsoft, graph toolkit in microsoft learn so really great, getting started uh tutorial and a training package uh to get started on building solutions with microsoft, craft toolkit so really really cool stuff and a great great great work uh by our cloud advocates on this one and then another kind of uh relevant news, especially for sharepoint on microsoft teams.

A

Well actually, as a host also for microsoft. Craft toolkit is that the sharepoint framework 1.12 was released last night last night yesterday and which is actually targeting more and more. The microsoft teams, obviously not taking anything away from the existing sharepoint capabilities and improving those as well, and then there was an update on the technical dependencies on the sharepoint framework and we're looking into further updates on that. um It's interesting to see that every single time I release a new update related on typescript or react support and there's always the feedback.

A

Why isn't it using the latest and greatest? And there are always reasons for that so, but we're always trying to get to the latest and greatest what we can on supporting these things and note 14 support as an example technically works already in 112.

A

But we didn't want to yet announce that so, let's jump on the individual projects so bert. I think you are in the house for doing quick update on the pmp.net libraries.

C

Yes, yes, uh I can do that, um let's start with a release, so we actually released uh pnp core sdk version 1.0, so the first j release of the new library. um Actually that work has been going on from april, so it took us a while to get to a v 1.0, but it's out try it out and then let us know what you think about it.

C

uh Definitely looking for contributors as well, so if you're interested in modern development, uh this is uh kind of a place where you can really uh live your dream and do all kind of magic that stuff so all good over there. um That was a great marketing statement. You.

A

Can live your dreams.

C

Yes, absolutely actually, that was really.

A

C

I'm changing roles by the way.

C

Combined with the core sdk ga release, we also release pnp framework 1.3, because that one now uses ppcor ga. It also completes the journey. Remember that we had that journey from being. Besides score, then we had bp framework and people cross gate, those three things.

C

Now we are in a state that uh we have pmp framework uh np, because the gate new staff will be building vp across the k and slowly but surely we'll move things over from framework to cause decay to maybe in the future, uh only continue with bmp core sdk, but that will be like years years out from uh today.

A

And this is really for the journey related on bmp side score, uh which was introduced already five years ago and again modernizing the whole stack related on that, because there's there's actually was it almost 180 000 uh users of this stack. It's coming.

C

88, eight and last month, which is actually pretty wild absolutely each month we see like a growth, so it's still.

D

C

uh Okay, what did we do uh real, quick uh pp framework uh with our preppy for 1.4 side, extensions, stuff done some additional events and some fixes from lyon, but overall bb framework focuses mainly on bug, fixing and merging prs, but not really adding new things because dk. On the other hand, we are adding new things. For example, syntax support, so 1.1 will have full syntax api support. You will be able to work with models using apis.

C

Maxine did like a massive job on improving our system. Support, so carson case still uses some csun, but now we have like a super clean lightweight system, client embedded in pmp car sdk. So thanks for that, sarah helped us with the special characters and pages and file file names. So we had some troubles there.

C

That's all not good, so you can use all the allowed characters now and that all works and there's plenty of other fixes done by erwin, paulo paul and myself and going forward we'll keep on adding growing people to gay and adding more quality model communication and so on, and that's it cool.

A

Let's do the bmp powershell as well. I know irving couldn't make this call so you'll be doing this quickly as well.

C

Okay, I didn't know that uh I.

A

Think he told you that in some of the messages.

C

Okay, I'm behind the messages so yeah.

A

C

We also released 1.4 income presumption with the one thing the framework released so because oh she uses that one. I think one of the really cool new things in powershell, which I personally find really cool, is the registered pnp azure id app commandlet.

C

If you need to create an application, azure id it's like a one commander away and you can configure everything uh app only certificate, uh all the permissions, so it's just put on a command line hit, enter and boom. It's there. So it's really it's magic another, uh I'm really I'm getting into marketing there's. So it's magic yeah.

A

Yes, you are you're sounding like a martian person. More and more.

C

And then another thing is the gcc sport um that was long pending, uh but finally, is there so pnp powershell should work in all uh environments, all cloud environments from now on, cool and usage, great 23, 000, tenants and rising. So all.

A

Good cool excellent. Thank you bert on that one. Let's jump to victor uh next related on your teams,.

D

Yeah cool, so we talked about loss two weeks ago, the release of uh version three. uh We have uh we're working on a new preview thanks to paulo and paul shafeline, with some we have some pull requests looking through with some uh specifically the link, unfurling uh extension, where you can essentially take care of when typing in a specific link, you can create the preview and those kind of things for for that in in chats and channel messages.

D

uh Paulo is also working on having local https support uh very very similar to how sharepoint framework can have the local certificate for developers.

D

We also have a lot of things on the agenda, such as meeting extensions being the number one priority of the big new features to come. We also wanted to create a little bit more advanced uh scaffolding code scenarios, uh ins in many cases where, when you're new to teams development and don't don't want uh such bare-bone experience as you get right now, so that's of course, good and bad. uh Some folks prefer a leaner option to start with some will once more enhanced or more complex scenarios to start with.

D

Since last call we have a new preview of the the core build tasks that supports multiple manifests, so assuming you want to build for production and staging and all your different kind of developer environments and create different, manifests and test out in different features and different configurations, etc. That's now supported in the your team's build core 1.1.0 preview.

D

We will talk a little bit more about your team's v3 in the upcoming demo, so we'll be back in a few minutes.

A

Cool excellent, excellent victor um and a good comment from tim duncan. I love the images everywhere so um that actually comes from marketing. People saying why why can't we use images like like some other people are doing, and then we started using images now beth um is on the call to cover microsoft, craft toolkit.

E

Cool, so for those of you who hasn't used microsoft, graph toolkit, it's a component library and authentication supports for super, accelerating your app to connect to microsoft graph, and we don't have a lot of latest updates, but we have two things: that's in the works, we're building a msl, 2.0 provider that supports the latest themself browser that will enable you to have multi-user login in your apps, the other one. Is we just recently released a preview for onedrive file components.

E

This supports most of the api endpoints coming from the graph that you can get your onedrive files or a file list. You can see a little preview of the file list component on the right side of the pictures here. So if you're working with files through sharepoint or your personal onedrive or whatever drive that you have please try it out, give us feedback. We would love to know what people, how people use their file components and what are the features that we can add to this?

E

To make this better a lot of different ways that you can help us give us feedback on the new components. Try out our new providers, the recent one is the electron provider and submit issues and prs for us in the pr. Thank you.

A

Excellent, thank you pat on that one. It was slightly easier for you this time, because it's one hour later right, yes,.

E

Did I do better.

A

Thanks, uh let's jump in here, do we have bob on the call?

A

No, we don't actually have a pop on the call related on microsoft, team samples, no I'm catching up on things so, but there's a new sample available related on a team's sso with server-side craft calls um a really cool sample available over there and we're looking into improving and collecting additional community and microsoft samples uh in the centralized repository or at least reference, then from the centralized sample gallery, which is a game as team samples and whenever we'll get the unified microsoft 365 sample gallery available.

A

All of these akms addresses will be redirected pointing to that one unified location. Now next, we will actually have a picture time. So for those who are willing, uh let's do a quick group photo, I'm gonna actually well, I'm already sharing my screen, I'm gonna flip to the together mode, and I will just share my themes window in here there we go excellent, excellent. We can get more live people on the on the show, a quick crew photo. The limit is 50 and, let's do some hand waving.

A

I didn't even enable the video this time, because I wanted to make sure excellent, excellent thanks. Everybody thank you for being part of this awesome community, we're in in on this together. Thank you. Thank you. Thank you. Excellent, really big hands uh seeing on the back road. Thank you for that uh brilliant. Now, let's move into the demo section we're a few minutes behind of the schedule, but I think we'll catch up by end by the time we're closing in for sure. So, chris you are starting today.

F

All right: well, I'm chris! That's it! Let's talk about stuff all right, so we're headed over to our classic warrior horses site and we're going to take a look at a view. We've taken a look at before we're going to take a look, a couple of options with it. So if we head on over to our aquatic acids, as we all know, horses are worldwide and most of the world is covered in water, and you may not realize that horses control that territory as well.

F

So let's go over to our aquatic assets where they track uh the various things they have in water and so on. So this is a giant list. We've used this demo before just to kind of illustrate this. This sample, which is a sample I'll, show you a link to the sample in the end and the idea that sample is it's dynamically drawn based on row index right, so you can see it's getting deeper and deeper the further we scroll down right, regardless of sort and everything until eventually we get to a submarine and a horse.

F

How exciting? Right again, that is a sample that's available to you, we'll link at the end, and it's less the point, although I do have a reason for choosing this we'll come back to it. So let's say we've got this beautiful list and we literally do all right, I'm going to zoom that in just a little bit now, if I want to add you know so, if you see I've got this comments right, so that's cool.

F

I can see that I've got comments if I click that I can come in here and we can do comments if you haven't seen this. Yet it's awesome right. If you open up the form you want to see him hit this little comments button. I had a comment that says that horse minds, not hoes minds, horse minds are best minds date all right and we'll just comment that right and that's great, and now we have this lovely uh comment, icon here and that's cool right and we can see that we've got one there.

F

We come over here to like uh laser shark 956.

F

You know- and we just say, lasers- we're having a very intelligent conversation, sharks right wow, we remember the whole idea is: we've just got some comments that are happening here and now, if we look at here, we can tell which items have a comment uh by the way. If you don't see that uh the very first time you comment online you'll need to refresh for whatever reason, but if you hover over, you can see it's one comment or it's three comments.

F

There. You see the tooltip there three comments, that's cool, but uh what? If we want to do something with that right, we want to actually use that in a format say. Maybe the title field is uh hidden right, so we're going to show hide columns and we're actually going to just take the title field out of there right. So that's where that shows up ah now we have no way of seeing which one do we have arbitrary comments on. It's very sad right. So we can add this thing here and now.

F

I've shown you in the past. The idea of if you just want to apply a format right. The tip here is to choose a calculated column of this kind of old school interface. When I chose more there and I'm just going to call this thing format doing very creative and hit equals and double quote double quote that creates this empty, calculated column and the reason we've done this in the past is because then you can apply format here. It shows up in display, but it's going to stay off of your edit form now.

F

uh Some of the reasons for that are no longer true and we'll take a look at that as well. But in the meantime, let's take a look. What we can do with this format, so, let's format this column, I'm going to go to advanced mode. So I can just write this json myself.

F

Alright, so we've got a little schema thing and now, let's add, uh say an elm type of div, because we want a box to contain everything all right- and in this case, because I happen to know we're building. I know that I'm going to want some children. So I want some child elements here all right and we're going to say this. One we're just going to make another div all right and in this case let's set some text content so now we're actually at it.

F

So what if I want to get how many comments there are know if there even are comments? Well lucky for you, we can reference stuck any other internal com column. It's underscore comment count.

F

So if we use that- and we preview the ones that have those comments or had comments in the past right, so I had a comment here. I deleted it. It went down to zero, are going to show this number now. So I have a value in the comment count field so hey. I can use that right. We can start doing some stuff with that. uh So what if I wanted to be a little more explicit right, like that's cool, that one shows zero, but it's a little confusing, because this one doesn't show zero.

F

It's because no one's ever added a comment and then removed it. So, let's just do a couple things here: let's make that a little easier to see right, we'll come to the end of that we'll add a style that sounds exciting with enter there and we're going to type in uh font size we're just going to make a little bigger. So we can see it in this case. We're going to say: 16 pixels should do her, let's preview on that, uh it's pretty much right there. So now we can see it a little better.

F

But now what? If we wanted to do things like work with this, so we want to show zero. So what if we said equals- and we say if and we'll just say, if common count all right, then why don't you show the comment? Count.

F

Comment count and if that is not a value, in other words, it doesn't have a value on. You show zero instead right. So, let's see if we can try that out bam. So now we have an entry for everywhere. So that's very exciting. Now what if we want to make that a little fancier right, that's cool, that we've got arbitrary text and we can use that in all sorts of different places. What if we want to go a little fancier, I told you we needed children for a reason.

F

All right in this case we're going to add another child, make sure we add our comma there and in this case, we're just going to put another div. So another box, we're going to put it above right and in this case we're going to say style, because we want to give it a font size as well we're going to say font size of 36 pixels.

F

We want this one to be a big one, because we're actually going to make this an icon right attributes and we're going to say that we're going to say icon name because we're going to pull out an icon.

F

These are the fluent ui icons, so we just reference them by name here and in this case we're just going to say message now, if I preview that right, that looks a little weird, but we have this beautiful common thing if we want the actual icon they use by the way, you can just switch this from message to comment.

F

If we preview that you'll see it's got the little quotes in there now for our cases. I don't want that and I'll show you why. uh So I'm going to go back to message so that I get an empty version of that, and now I'm just going to do a couple things here, I'm going to change it around. So let's change out our style slightly. So I'm just going to come down here to this guy and let's change out.

F

Let's put a width and some positioning and everything else, I'm just going to copy that, so we don't have to watch me type it I'm just going to paste this. This by the way, is a sample that is open, source and free and available to you, and I will show you the link within the end. So what I've done here is I've now taken the second box and I've positioned it absolutely right, so that it goes above that icon right. So now I've got this wonderful icon right.

F

That shows uh the actual common count right in there, because I've hidden the title field, or I didn't like how that worked right. I always wanted to show comments, or maybe I want to do. You know a little fancier where I'm going to take a look at the the comment field itself. So let's go back up to our attributes for the main parent element. Let's add some attributes here in this case we're just going to say hey if the comment count is greater than zero right, which will be.

F

It won't be true if it's also blank uh then show it in the theme color. Otherwise, kind of fade it out a little bit because we don't need it to be very prominent. Let's preview, that there we go so now, we've got them in that nice horse brown right here, for when they actually have comments, and so on. So you can see. We could actually do a lot with that right.

F

We could conditionally show uh actions if they have comments right, draw people's attention to the fact that there's a real discussion happening here behind the scenes, and we do that all by referencing, this kind of hidden column. It is not a column, you can just add. When you go to the show hide columns. You can't just get an arbitrary comment count, so you will need to use formatting if you want to use that value in any way.

F

Okay, so that's cool, very exciting! I'm going to just save that, and you know we can do things like if we switch to a tiles view or gallery view we switch to that right. We'll get this kind of default out of the box. You'll notice. Our format has nothing in it because it's a calculated column with a value of almost nothing, but if I format this current view, if I switch to advanced mode, I've got basically nothing.

F

I've got to go in hard mode, but if I go back to design mode I hit edit card, then I switch to advanced mode. Hey look at that. They did all the work for me right. So that's exciting! I'm going to just randomly increase the height here. Let's go 25 just because I know what I'm about to do preview that so it gets a little taller. But if I scroll all the way down here in this format, there's a couple things I want to point out. The first is you'll notice.

F

There's a p tag here, so we can actually do a paragraph tag now, you'll see that the schema still doesn't say it's allowed, but if you inspect the element, you'll find out that indeed you can now pass the p tag in as the element type.

F

That may be very helpful to some of you, uh but one of the things I want to point out here is instead of this format, which is trying to just get the value of the format all right, we're gonna do that trick. We did a couple of weeks ago when we showed it, which is the column formatter reference and in this case we're just going to say our format column, all right, we're just going to reference it that way and we'll hit preview and oh and you'll see now look at this.

F

This is interesting, see it's showing the format, but now we've got the the actual numbers floating way up to the top. You know what's happened here now, I'm going to save that we'll come back to fixing that in a minute all right. So what happened here? Why is it look different here versus when we're not in that view right? So when I'm here it behaves correctly and in fact we're going to see another problem here.

F

So if I open this up- and I look at the form in the past format- only fields would not show up here now. They show up with this. This is a read-only field, but they don't show your format so just calling that out, it's a bit of a pain right now, so one of the things you can do is for these right.

F

If you still want to use these or if you have used them in the past, you can hit edit columns, I'm going to take my form app and I'm just going to uncheck it all right, and then we save and no longer there. But what?

F

If I also want to see it right now, so I'm going to arbitrarily copy it right now, so column settings will format this column all right, I'm just going to grab that format that we did before and I'm going to swap over instead and just use the deployed column because it already exists and we're going to hit advancement, I'm just going to paste it in there just so we can see it show up on the form preview that now we have the exact same format.

F

The reason I'm showing you. That is because we click on it. We have the same problem, we're seeing all those tiles you see that one. If we look really closely is up here by deployed instead, so we have a difference in how those are being handled. So what's happening is the parent element. That's inheriting styles is different when it's in the row view versus when it's in the form versus within the tile.

F

So what you're going to want to do is test right, so make sure you're testing these things.

F

So what we can do is we can just edit that format so column settings, I'm going to format this column again and all we're going to do is up on the parent, we're just going to make sure we set some base styles that match the base. Styles, that's already getting in the row, so we get those that same thing.

F

So in this case, I'm just going to add style tag and what I need to do is, I need to add a position of relative and the height is 42 because the height here the row is going to be 42 pixels, but when it comes in the form it's going to be based on what your format is. So because we made this icon, 36 pixels it'll be 36, pixels and it'll, make our little number here not be centered and then we'll be sad. There'll be so much tears and crime all right. So let's do that.

F

I'm going to save that and then we're going to swap over our format. Just so I can show that it's fixed in the tiles view. So let's save that so now, when we look here, hey look at that that fixes that. So again, we have to kind of set a baseline uh on some of those properties so test to find out what you actually need to correct and you'll find that if we swap over to the tiles view uh once again now that we've corrected that it's going to be corrected as well.

F

So that's an important kind of distinction. uh One other thing. The reason I pulled up this particular list is to point out that in the form you see, this boat is based on only drawing in row index of four, and yet it shows here and if I pick a different item, all right, you can see now it's the blue, so the idea here is the row index in the form is still going to come from the row index. It was when displayed right so now this one's a row index.

F

So if I'm sorting this by that date, right you'll see that everything changes here, but the picture still draws because it's based on the order. So even though it doesn't have a comments anymore, it's still going to draw there. So all that to say I throw a bunch at you to point out that there is a real difference between what's displayed here in the form and what is displayed in a tiles view, and so on. So just be aware of those.

F

Now, let's swap back over to our slides, that is not how you do it there. We go slides, okay, so first up that column count empty with no comments. That's the total number of comments. There's also a comment. Flags jesus reference like any other column and then form considerations. So again, those formats are not going to show up the way they used to the row index is still going to work. This is the big one though, so the format is not aware of the render surface.

F

So when you do your format, you don't know if you're rendered in the web part, you don't know if you're under the list. You know the list view mobile device, you don't know any of those types of things you have. You have some indication of like layout size at time of render, uh but that's about it. So what you want to do is test everywhere right, so the inherited styles are going to differ at times, so just look at it in multiple spots to make sure that your format is fully covered.

F

You don't want to be surprised when that when those numbers are flowing to the top all right and there we go so there are some uh samples out there so that sample that shows how to access the comment field and show how to kind of render that with that absolute position is available and then, if you are interested in that uh submarine, drawing for whatever reason that is also available to you and you can check that out all right. That's it! That's a look at.

A

Excellent excellent excellent thank you chris always entertaining stuff for sure. Let's jump on on a victor.

D

So let me share my screen and thanks chris, it's always hard to be after you in all presentations. uh So let's talk about some teams development. So if you want to get started with your teams, I highly recommend that you go to ak dot msl 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.

D

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, but essentially the the solution consists of the generator which generates your solution, which you need to install. You need to install the mpm, of course same as with sharepoint framework. Then you install the generator teams and the solution is also using another separate package nowadays called yo team spilled core. You don't have to install that.

D

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 et cetera, et cetera and packaging. 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.

D

So, but it's in here and both of them have readme files. 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 the 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.

D

It has full flexibility and we give you all the source code here of it. So you can build whatever kind of solution you want, but to get started. What you need to do is once you have node 10, 12, 14, 15 or whatever in store installed. It has to be over over 10. You can just type your teams, your teams, I run with skip, install here now.

D

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, depending 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.

D

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- and I want to create my project in the current folder, where I'm at right now give a title of my project. This will be visible in microsoft teams. Once you install the application, just leave the default, you need to have a company name or your personal name.

D

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 have 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. 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.

D

This is a new option we have since the project started four years ago. 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 I'll do 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.

D

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. uh Then I answered no to the show with loading indicator. I need to give it a name. I wanted to create a configurable tab. Yes- and I was going fast here, but essentially I'm just clicking enter and go through all the questions to create a configurable tab.

D

We have the support for azure additional sign-on, I'm going to 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. So, let's just use snow there.

D

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, what you want to go back to the to using the provider hosting model of having applications? For instance, you need server-side, rendering or more advanced features, or you want to reuse.

D

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 a provider host a 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.

D

So if I jump over to vs code so what's happening when your project is being scaffolded, essentially 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.

D

The client folder contains the client-side code, that's the javascript, the react, controls, etc.

D

The public folder is for html files, static files, images, css and whatnot, and finally, the manifest is where you have the the team's manifest and once the solution has built built everything you will have in the package: folder, that's where you 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. So that's where you start your application, and this is the big difference between version two and three.

D

Essentially, we had everything in the same app folder previously, but right now we split up it into server and client to make it easier for for bigger teams to work with, and specifically also it's easier to manage, the different kind of typescript configuration, etc. 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.

D

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 control and one for the remove control. If we take a look at the the normal page here.

D

This is also so, if you're coming from the chevron framework. Well, it's a little bit different. We are not using class-based react controls here, but it's done instead functional components and react hooks, so that might be a new thing for for some of you, but as uh me personally, I'm all into using react hooks now. You can actually use that in sharpen 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. The new versions react! That's where that's!

D

Where react is heading, but essentially we created one 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 uh properties for you.

D

You will have one uh 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.

D

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.

D

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.

D

Handles for it, and then it's just 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 the full screen or not. For instance, I want to show a custom menu if I'm in full screen or yeah, or vice versa.

D

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

D

As you can see it's running in the background, it created the manifest validated 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 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.

D

I choose my zip file that being been generated by the generator and, let's click add here, to add it to this team. So I'm done now, I'm sideloading 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.

D

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.

D

Then you can start adding signal sign onto it. You can add your completely custom solution uh 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.

D

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.

A

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 do you use your themes and when they use um spfx00 generator? um The simple answer is spfx is for the ux and every single time.

A

Like victor said, you know you have a back end, uh 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 and blazer and tommy is actually waiting eagerly to get started on showing how that can be done. Right, tommy.

G

Perfect, uh you can see my screen already yep. We can see the screen, take it away perfect and, let's start with three slides of powerpoint. I think it's okay, um let's start hello, I'm tommy gilles, I'm working for a company called solvian in grant in austria and I'm an office dev mvp and you can reach me at my twitter handle.

G

Today we want to talk about the microsoft graph toolkit in blazer and in teams it's a little bit different than what victor just showed us in terms of we used or in my demo, we're going to use the laser components instead of react. So no eo teams, it's a different uh way of working. Don't don't get me started in between what is better or what? What is the better way to go? It always depends.

G

I know it's a consultant saying, but it's a different tool and you might have reasons for that approach or for this approach. I will go in some details why? I think in some cases laser is the way to go, especially if you think of all the releases that will come with net six later in november this year. With. Finally, the vision of one.net coming through and all the platforms, all the clients will be served by one.net version and, of course, lasers, part of that the graph toolkit we will use specifically for that target audience.

G

I myself have a yeah 10 years, sharepoint background. So, of course, we're using the graph toolkit in a lot of our solutions um might not be the the way that the classic.net developer that starts out and says. Okay, laser is an option for me to surface something in teams goes, but I think this audience might have some experience with the graph toolkit and it's a quick way to start and have authentication running in players and teams, and that's what we're gonna see in a couple of minutes. um First, laser yeah.

G

It's I don't know it's the cool kit, if you think of everything web assembly web assembly basically means that the server is sending down a bunch of dealers to your client on your phone on your browser doesn't matter, because every modern browser has some sort of a mono framework running being able to interpret that and surface then html in the browser.

G

Major difference, client, side, server, side, server side really runs on the backend, uh connecting to the browser with signal r and back and forth. That's we're going to show today and we're going to focus on today um here. The first big difference is, if you think about authentication, uh client-side really lives in the browser. So it's not a smart idea to store any secrets in a client-side blazer solution.

G

There are ways to go into the code to disassemble the things and then you basically give away authentication that's why a server side might be more interesting or ways how you can connect the client to a server to handle authentication in a proper way, um and I think I have a line in there and I'm just saying it out for for reasons um I might lock somewhere a token to make sure that I can grab it. Never do that in production. I've seen that too many times, never lock any mirror tokens on production servers.

G

If you want to know more about blazer, that's the one url you need to know, there's a big big list of all possible tutorials training materials.

G

If you start reading this today, you might not finish until the next community calls, so there's really a lot of information in there, but enough with powerpoint, let's go directly into the code, and I'm opening up here are prepared with a studio solution.

G

That's actually already running here in a small demo and what we see is the yeah, the basic place, application that you get with next next next server-side solution in visual studio, small introduction, a login component from the microsoft graph toolkit and an agenda component inside my application here in my browser and, of course, prepared already also in teams side loaded with a custom app and a static tab here so same same site.

G

How are we handling authentication in this solution? Let's go to the code and the off part basically is done by providers from the microsoft graph toolkit.

G

How can we make use of the microsoft graph toolkit in blazer in a server side solution? We have a file hosts cshtml, that's where you just link your script files, so I'm linking microsoft teams sdk and I'm linking the microsoft graph toolkit loader. Also, we will need this later. I will link a custom startup javascript file. We will see how we use that in a couple of minutes.

G

This is how everything is loaded and then in my index, eraser file, I'm just popping in a microsoft teams provider and in microsoft, teams, microsoft, graph toolkit teams, provider and the microsoft graph toolkit amsa provider. Why? Both because my application is running for once standalone in the browser and also as in teams application and either way, I'm opening the application.

G

The providers here know what to use, and you see these are different ids. So these are two different azure active directory applications connected to the providers. Just to show you how you can even go this way, that's okay! For teams, I'm going with that application in my ad for the normal way as a normal standalone application, I'm using a different approach, because, if you think of all the different net applications that are out there and existing might be a good idea to surface some of the information in this application in teams not the whole.

G

The whole solution, not the whole navigation, part just important uh parts of it, and then you can reuse your existing code because with laser you can take your existing c-sharp back-end code move over, let's say from an asp.net forms application. There are the link that I showed you before. There isn't even a project that moves over existing forms, applications to blazer and you can reuse existing logic in c sharp directly in placer.

G

That's one of the reasons why I think that, with all the huge amounts of steel.net forms applications out there there's a big big opportunity for blazer in the future. Next to our authentication providers, the demo is really simple: we just use the microsoft graph toolkit at gender uh component to surface uh yeah, a scheduler from myself from a certain date so that we can make sure okay, we have some data in there. I don't think I have something for today. That's why I'm going back to an old date in here, but let's see the difference.

G

If we comment out some of those providers here, for example, let's comment out the msr provider and restart the application.

G

So we are now saying: okay, I only want to authenticate through teams. This is again my normal application, no sign in working so no way to sign in because, of course, we said we commented out the amazon provider. We are relying only on the teams provider.

G

Let's move over to teams, we need to reload the application, because I'm just surfacing a local host here, click on sign in going to an off page and I'm in here, and this short off page is actually configured in this off pop-up url- and I have this page here all it does. Is it just says: okay, microsoft, graph toolkit teams, provider handle authentication and that's all teams needs to wire the user through.

G

Do the application and we're good to go, and there is one one big difference if you think of this application, now being a tab, just side loaded in my my teams, environment compared to taking the same application and just put it in as a tab as a website, I'm going in there now and just flash my local storage. There is basically where all the tokens are stored and refresh that page, and you will see that inside just a tab. That is a website. There is no way to sign in.

G

I can only sign in in my site loaded application, because this is the only way the team's sdk gets called and does the magic with the microsoft graph toolkit the other way around. If I go back now, it will be here y easy answer. It's the same application in the local storage, this local host- and you see here this is my msr keys, and this is the application guide from my active directory application, and you see how basically the tokens are stored, they're all stored in the local storage.

G

That's why it's easy that or that's why it's possible that you can now log in in this page. If you first click here, so that's a little bit confusing just think of it. The team's sdk only gets served really if you do a prop application, not just by putting in a tab in the teams in some places.

G

Next thing is, and the last thing for today we have now power log in let's comment that in again to make sure it just works and go to a second demo. That does a little bit stuff a little bit different.

G

We stop duplication and restart, because now we want to reuse the token that we get from the microsoft graph. Toolkit application will fire up in a few seconds there. We are I'm still connected because, of course, there's a caching here. I click on get teams.

G

It calls now out to the microsoft graph toolkit to get the token, and we will see all my teams that I'm part of in this drop down and if I go to the correct one, there should now be a next call and get back to the microsoft graph and display all the users from my selected team, with the email addresses and their roles. So how did we end up here very easy?

G

This is the html code for the button for the drop down and for this member table and what we need to do is, and that's the interesting part we're calling in blazer javascript code and the javascript code. We call is get token and remember I told you, we have a startup javascript file. That's here and all we do is we say get token, and then we just use one line of javascript microsoft.

G

Graph toolkit providers, global providers get access token getting the access token back, and then we call our own custom graph service on the custom graph service then uses the net client from graph in a special way with the delegate application provider, because I already have a token. So I start this with the token and then it's a simple call. Graph service client get my join teams and it's a little bit special, because the second one to get the members actually use the better endpoint and to get the better endpoint working together with the g8 one.

G

You need to trick your project files a little bit because you need to create an alias because both files actually use the same namespace that's a little bit tricky, but if you create an alias, you can use actually the ga version of the graph client and the beta version. In the same part, and of course one called get, teams is the j8 version and the second one is the easier call to just get the better endpoint and get back all the users.

G

The email addresses and the roles, and that's it, I'm one minute short visa 13 minutes.

A

Excellent marcin, I can see your hand up, but unfortunately there's so many people in the call that we're running out of time, if, if possible, can you ask that in the chat for tommy to follow up on that, but tommy? Thank you. Thank you. Awesome stuff, absolutely brilliant stuff and great great demo, and this so mikhail berklund had a pretty recently cool demo related on blazer as well.

A

So there's more and more focus on the placer and it's really really really cool stuff and I think there's so many people who are coming from this kind of a classic csharp server-side background. So this is more natural way of doing development. Or, what's your take on this tommy? Is it? Is it for you, natural, more natural than for me? It's.

G

It's more natural because I'm I can't write react code that way, I'm more proficient with net, never never jumped over that wagon. So but yeah it always. It depends it's not right and wrong. In my world.

A

Absolutely absolutely but cool. Thank you tommy on that one, and thank you chris. Thank you victor. Thank you. Tommy super awesome, stuff, uh great great demos. Today, uh we've been having the q a running throughout the day. In the chat window, the recording will be available in the microsoft 365 community called community uh youtube channel within 24 hours, so akms m365 bmp videos. Then please follow us on the microsoft 365 dev or entry 65 bmp next entries is what general community call is on april 1st, and that call is going to happen.

A

It's not a april fool's joke. um Actually, technically microsoft. We are not allowed to do april fool's jokes, because apparently people might confuse them in real things. um That is an internal role in microsoft and then next sharepoint framework is on march 25th, and we have a lot of lot of community goals available in different topics.

A

We're looking into potentially merging some of this together, we're still in the progress of potentially making that decision happen, but if you're interested in any of the other calls akms m365 bmp is the one location to access all of the call information as well, but thank you. Everybody for today have an awesome rest of the week and upcoming weekend and stay safe, we'll be definitely in touch cheers.

B