Microsoft 365 Community Development, 12 Nov 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft 365 PnP – General Microsoft 365 Developer SIG community call – 12th of November, 2020

Description

Microsoft 365 PnP Community - General SIG call on November 12. Three demos: 1) Theme and hover card handling in view formatting, 2) Introduction to the new Employee Trainings Microsoft Teams app template, and 3) Building Airline industry scenarios with Microsoft Teams and Azure. Released Preview 3 of the PnP Core SDK and Preview of PnP Framework (Sites Core). Released PnP Modernization Scanner - v2.18 and yo teams v2.16.0. Microsoft Graph Toolkit 2.0 Preview.4. Released 2 new Microsoft Teams Development Samples. The host of this call was Vesa Juvonen @vesajuvonen. Q&A takes place in chat throughout the call.

Demos:
• Tips and tricks for theme and hover card handling in view formatting – Chris Kent (DMI) | @theChrisKent
• Introduction to the new Employee Trainings Microsoft Teams app template – Nidhi Sharma (Microsoft) | @nidsonbirdie
• Building Airline industry scenarios with Microsoft Teams and Azure – Manoj Mittal (Mindtree Ltd) | @manojmcans & Bharathi Elangovan (Mindtree Ltd)

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 channel microsoft, 365 development, special interest group- it is the bi-weekly sync november 12th uh holiday season is coming really really really fast, which is kind of cool, and hopefully everybody has some time to get some rest and and all of that as well. Now, today we have a busy agenda and we'll try to do all of the the summaries on the open source projects and all that stuff in 15 minutes, and then we move into the demo section and we have our microsoft list format in god.

A

uh Chris kent is that the right way of defining chris, probably yes, uh starting and then we have niti and doing an introduction on the new employee training. Microsoft themes app template, it's not actually yet quite yet available, it's coming pretty soon, but it's good to have a preview on that and then, as a last, but not definitely, the least manoa metal is going to actually show off a really cool microsoft teams, hackathon 2020 uh solution, which was one of the winners of the beers.

A

So two topics on the microsoft teams and one around the microsoft list. Formatting now before we go to the actual content, a quick recap on the opportunities to participate with the community. We definitely welcome everybody to come and join this course and do a live demo.

A

So please reach out to me or any of the pmp crew members and we'll catch your schedule and learning from other people's demos and solutions and learnings is really the great way of actually improving your skills and and because every single time, I'm watching these demos, I'm learning new stuff as well. So these are really good. You can always contribute in a github either in the docs or in the samples. Those are more than welcome and the most important thing is to provide feedback feedback feedback, the whole community open source.

A

All of this stuff exists for your benefits, so if there's something which doesn't provide or if something is missing or which you do better, please give us feedback and also positive feedback is always welcome.

A

Now, quick recap on the add different assets, we're not gonna, spend or too much time on this one, but we have two different youtube channels. Do historical reasons mainly. Do we have a lot of open source stuff available? We have sample galleries for microsoft, team samples and spf examples and all of that stuff.

A

By the way there will be really cool, unified sample gallery sooner or later, and we're working on that one already a lot of urls, the final url to remember: akms, m365bnb, the one location to actually get moving from there and a quick recap on the on the sample gallery. So we do have a microsoft teams, assemble gallery, there's more and more samples on this one. Every single week we will go through the latest samples slightly later on the presentation.

A

Just to recap: if we're looking into starting on developing anything on microsoft, teams go to the akms team samples and you'll find existing samples. Like all of the microsoft teams, uh app templates are listed there, all of the community contributions stuff, which is coming from microsoft and all stuff, so we're trying to make it as easy as possible for you to get started on the microsoft names development.

A

Now quick recap on our akms akms sharing, scaring initiative. So david we'll do this one.

B

Absolutely thank you betsa all right friends for those that are new to the community. We are a completely open source community, which means that all of our resources and tools are available to you for free, but we also provide hands-on guidance sessions. This includes consuming starting to use some of the new resources and tools that you may be finding, as well as contributing back a lot of times. These come with certain hurdles or fear of some of the new technologies. Things like github, maybe that's foreign to you.

B

These sessions provide live, hands-on guidance opportunities for you to learn together. Will we walk you through the different steps required to do so completely safe space? They're, not recorded they're, great opportunities to ask questions, get to know the opportunities that you have to contribute beginning with the first time contributor session. We have one next week on november, 16th and december dates coming soon. They build upon one another. So hugo- and I provide you all that you need to get started and continue to learn into things like community docs.

B

You don't have to be a developer by the way. A lot of these provide you that guidance that is valuable to you, whether you're a developer or a non-developer, including how to get started with using some of the spf x sample. We also have a multi-day session coming up in uh likely in the beginning of december. That's going to cover a few different topics like setting up your dev station, using the cli for microsoft, 365 and upgrading samples.

B

So really is a progressive path going to be a lot of fun hugo and I try to be very hands-on with you and provide continued opportunities. So we invite you to register all completely free. Aka.Ms sharing is caring, so we look forward to seeing you it's been really popular. So please come join us in a session bessa back to you.

A

Thank you david. Thank you, yeah. The last session got a lot of positive feedback in social media as well so great job and david and lugo on that one. So please join on them a great opportunity to learn new stuff. Now, let's actually jump on bert's table well, not on your table, but your microphone.

C

Well, you can try to jump on my tables pretty long distance, but yeah. I can find if you don't try. You don't know so uh just kind of quick reminder. uh Pnp core sdk is our brand new sdk that uh has been in preview. 3 pnp, slash core sdk is the place to go um I'll talk about actual changes in a second input framework. Is there as well again still in preview?

C

uh Pnp framework is actually pnp site score the good old site, score library, but then this one is ready for standard 2.0 works on crossplatform.net and is spo only so there's our way forward for pnp size, core or speed b framework right now, what has changed in in all those libraries, because we have three libraries now I mean, besides code being the framework and people as a gay and in the ppp framework, the besides core site, we actually merged like 15 pr's, so quite a lot of pr's have been merged. So that's good.

C

One new thing to call out in pnp framework is the on behalf of authentication flow. So if you want to usb framework, for example, an azure function- and you want to take the identity of the one calling the function to go back to sharepoint, this on behalf of lower support is makes it quite handy for you um philippine, because the game, which is our usda one, the main thing that we actually added in the last period is support for modern pages.

C

It's like, let's say, 90 baked so still 10 coming up, so more unit tests are coming, the multilingual features are still being added there, but it is getting in a good state. So, within the next two weeks, we'll finish the pages api and you have a fully functioning page pages api there uh looking forward for that one, um we shifted a little bit our timeline, so we plan to uh this month we'll move to next month.

C

Everything is kind of shifting like one month further along, but the good thing is that we have some new features like the pages api being already available in this in better one. At that point,.

A

C

A

To the bmp publisher site and a quick recap on what's happening on that side as well.

C

Yeah powershell side a bit of similar story um in the classic powershell uh we merged some vrs. We didn't release due to some constraints. We couldn't release a version this month, but we promised to catch up as soon as possible. There now for the the new powershell the cross platform powershell um that one will have a nightly release, so you can always grab the latest version and if you do a change today tomorrow, you can grab that change and start playing around with that so uh and in there I think.

C

Blender was one of the key aspects that we worked on with some new command lists over there.

A

Excellent and then jump on the modernization tooling on.

C

The modernization tooling just a quick recap: the key thing in modernization is being able to transform your classic pages into modern pages, and we see a ton of usage in that one and it keeps on growing um more and more companies are doing that so um across the one billion modernized pages already a long time ago now, so I should probably update that number, uh but yeah it's something that that really is useful for your organization, so give it a try.

C

uh Second thing is demonstration scanner, helping you to detect classic elements in your site like classic workflows, for example. So if you need that just give it a try, it should be fairly straightforward to use. Nothing really has changed for the both products, because they're kind of feature complete, but if there is feedback here just let me know.

A

Excellent, then, just to recap: we want to go to the modern sharepoint phone and sharepoint modern, 0.1 and sharepoint. So please use this tooling and start using modern experiences if possible. Now the next we'll jump into do teams- and I saw that victories in the call as well. So let's actually let victor to talk in a second. Yes,.

D

Hello, everyone in the autumn darkness- at least it's here in sweden- it's even cold today. um So last week or a week and a half ago, we released version 2.16, quite some big updates in it. First of all, the schema sport 1.71.8, but, most importantly, I think, was some great contributions from the community, including microsoft, both from the typescript site and the fluent ui teams so great stuff. There, a lot of long-waited features from feature requests as well should be in there.

D

Next we're looking into what we can do with the regards to integration to the team's toolkit, but also some other request features such as react hooks and the faster build pipeline so go out there and build some teams. Apps.

A

And that's what that was really fast so and just to clarify.

A

Just to clarify the positioning as well, so there is a microsoft teams. Toolkits and there's your teams. Can you victor explain? What's the difference between.

D

A

D

Do that so the team's toolkit is uh the tool created by microsoft uh for creating teams apps. It comes in two flavors one for vs code and one for visual studio. uh It has, I would say, it's sort of an integration of the app studio into vs code or visual studio.

D

So the the big difference is there that you have more wizard-like interface than you create the javascript app for using vs code or net based application for abuse, visual studio, we're using the same kind of schemas and everything around that and that's how we're looking to how we can integrate them. So you can either scaffold a project using team toolkit or yellow teams. But it's up to you to choose what tools you want to to have so to say.

A

Excellent, so they're not competing they're, complementing schooling just to be super clear on that. One like.

D

Everything you have different ways of doing stuff right, so use the tool that fits your style of coding and writing, etc.

A

Absolutely thank you victor on that one and then we'll move into quick recap on the microsoft graph toolkit and I'm beth is on the call for doing a quick update on that.

E

Thank you. um We just released 2.0 preview 4 last week. Some of the big features that's added um since preview. 3 are the localization helper right-to-left support, support edit, more dark themes and we fix a whole bunch of bugs and also there are quite a few community contributions. So we wanted to call out everybody on the screen.

E

um There are also quite a few new getting started guide or what's it called blog post? This is so early. I keep like forgetting my words. What I wanted to say: anyways english is hard um there.

E

Quite a few new contents out there that you can check out- and you know, follow the step-by-step guides to learn how to build some of the samples that we prepared. um Last thing I wanted to say is we're doing a workshop next tuesday on wednesday. It is actually open to public these things used to be locked down for isvs only so if you wanted to join us to learn more about not just graph, it's a combination of windows, surface graph and m365 technologies.

E

We're also going to build a cool demo. The second day live coding, 90 minutes, um and you can read more about this event later. Thank you guys, versa.

A

Excellent, thank you beth, I'm sorry! For the morning times. I know that it's hard so yeah.

E

Okay, no, it's not your fault. I'm yeah mostly complaining because it's hard to wake up.

A

Okay: okay, excellent! Thank you guys for that one and then a quick, quick, quick recap on the microsoft team samples. So, like mentioned already, when we started, we have a specific gallery for microsoft: themed samples, akms team samples and there's two new samples, really cool samples now available, which is the search based, keep app with microsoft themes, toolkit so implemented using microsoft teams called toolkit, and that shows really how to integrate with keeper.

A

We understand that there's a native capability on that one already in microsoft teams, but it's basically demonstrating how to implement similar kind of thing uh and as the the native capability in my in microsoft teams and then the second implementation is the me experience as a personal application built with spfx, because sharepoint framework gives you the automatic hosting. You can really easily build experiences with sharepoint framework targeted for microsoft teams. So it's not just about sharepoint.

A

uh Certainly, in this case and there's a me experience is a really cool, multi-web part uh solution which actually is using microsoft, craft toolkit then to surface my tasks and my upcoming events and all of that stuff, so really really cool sample from rugby as well.

A

Now the next we'll have a quick picture time, so let's actually do for those who are willing to do this, I'm going to flip again to get a mode and then we'll have a one picture mode and I'm going to put this one in the screen and you can then see how many people we are getting on the screen and I think, there's the 50.

A

Oh there's the sharepoint monkeys in the room again, so that's good to see right next to victor victor, don't watch on your right side, so I think we're hitting the 50 limit and I'm going to take something. Everybody waves, save some hands, excellent and if anybody is wondering the reason I've been thinking this through the reason why my face is so badly big is because actually I'm sending now multiple streams, multiple dimensions. That's probably the reason. It's just bandwidth issue.

A

So all good, uh I think, that's a one more time wave, wave smile, excellent, good call, excellent thanks, everybody good to see the faces, like I said, a small thing and really fasting every single week, but it actually, it has a big impact, actually real faces and real real people. Big big big thing here for sure I will paste in some pictures on the on the chat window during the demos, but the next we will go to the. What was it? What did? I call you chris?

A

You were list formatting, god.

F

F

A

Share the screen here so we'll start with chris, then we'll go to the nikki uh related on the new employee, training, microsoft teams, up template and then monoi metal at the last and we'll try to keep the 15-minute spots for everybody. But chris take it away all.

F

Right all right, I'm chris! Let's do it all right, so we're going to take a look at our classic warrior horses site now, the warrior horses have put together a list to commemorate the great horse families uh that about the time. So we go check that out right. It's pretty basic list. They've got the name of the family and they've got the history here right now we can make that look a lot better. So let's do that.

F

Let's come in here. I've already applied a format that includes a tile props. So if I go to tiles here now, I've got these nice horse, crests beautiful stuff right, so that looks cool and uh here's a nice tip as well. You notice there's a little star now on all items. So if I were to actually save this view, so I'm just going to hit save on the same one now the tiles view or the gallery view is the default all right. So now and I visit this list. This is what I'm going to see.

F

Instead of that kind of list view and making someone switch to this nice format, I've got all right. Well, let's take a look at this format because there's a couple of issues here and we're going to address, so these are some uh pseudo-advanced scenarios that do come up quite a bit, especially with their samples or when you're trying to do certain things. So let's take a look at the first kind of set of problems and that's with theming right. You see here. I've got a nice brown that matches the sight brown.

F

But if I go to change that look I go to theme and I pick let's say you know the classic teal and it's still stuck with that brown right, because I've hard-coded that color in a couple of spots uh but you'll, see it even more. When I switch over to like one of the dark themes like dark, yellow, you'll see that the two shield icons, because I use the appropriate classes, those switch just fine right. The text here switch just fine, but my my box shadow. This is an svg element.

F

That's brown, this underline, for which the border is also brown, not great right. So, let's take a look. How can we address that? So we'll switch it to teal for this this portion here just so, we can see it in action.

F

So if we go in here and we format the current view I'll make this as big as I can. One of the things you'll notice here is: we've got this nice distinction here with layout, so they've actually taken my tile props and broken them out. Even though I pasted a real sample uh directly from the sample repo right, they broke it out now between list and the gallery view which is nice. I don't have to necessarily manage that in fact, there's a nice design mode, I'm gonna go and switch it here.

F

You see, there's a card designer there's some really really cool stuff check that out go play with that, but for this this particular piece here: let's go ahead and paste that sample back in all right, let's preview that so we can see it all right. What I wanted to take a look at here is these colors right. How can we make these work because traditionally we don't necessarily have classes uh that allow us to do that with the theme colors.

F

Let's start with that box shadow right, so box, shadow right, you normally specify all these properties here and then you've got your color at the end. Now I happen to take the color of brown that I use all over the horse site, which makes sense on the horse site, but when someone else decides they also want to commemorate the great horse families on a non-horse themed site. It doesn't look quite so good right. So how can we do that right? There's no special theme piece I could put in here now.

F

If I pull that off right. So if I just remove that and we preview that right you'll see that now it's kind of the default uh kind of gray, which is okay, but if I really wanted that uh to be that brown color right instead of doing that, I could actually add. So if you take away we'll just do this attributes.

F

This guy right here so we're going to add a class.

F

In this case, we're going to have the class of ms font color right, we're going to say, theme primary right, so if we preview that you'll notice that actually that, if you do not specify a color as part of box shadow it'll pick up on whatever the uh the text, color is here right. So in this case we do have a way to set that to a theme color. So by doing that now we have a box shadow. That's theme, you know sensitive.

F

In fact, if we let's take a look at that in just a minute at a time all right, so that's really cool. So that's a neat trick. We're going to do some similar stuff here right. So that's how we handle box shadow colors. uh What about this border underneath here right?

F

So if we go down here all the way down where we've got our title here, so we've just got so that's the formatter all right! We just got this div here the text contents just that title all right. We've got this border bottom, where again we're doing that same brown color. Here all right- and this is okay. But what if we, you know want to specify that color as well? Well, you can't do that as part of this kind of border property here so we can do. Is we can specify that out separately right?

F

So one of the things we can do is we can add, um and if we added a just like before we're going to have the same kind of thing, we're going to add that attributes.

F

Oh, I can't space it over, we'll just do it manually. There we go make it look pretty all right what we wrote before, which is adding this instead of font color, though right we have this nice border color. So that seems like that should work right, we'll preview, that it didn't work right. It's still that brown. So, let's take the color out just like we did with the box shadow and if we preview that still no good, in fact now it's kind of that default black, it's a little hard with the brown and the black.

F

So what we need to do is we actually need to break this out into separate properties. So if we go bottom style, we'll set that to solid and then we'll set.

F

That bigger, so we can see it there, we go border bottom width. All right so accept these properties. Individually looks like two pixels all right now we don't put a comma on there and we preview that there we go. Look at that, so by not specifying not using that kind of a roll-up css property of border or border bottom. In this case right we were able to specify the color by doing it through the class. Now what? If and I don't really like that right? What? If I want that to only show up on hover?

F

Well, we can actually do this nice thing where we go dash, dash hover all right, let's preview that and let's take away, and then we say the uh ms border, color is normally right, we're going to say uh white all right, so there we go now. Let me hover over it. Oh, I got a fancy hover right so which works nice with my hover card there right. So that's pretty cool so again, another way to kind of take advantage of those uh theme colors.

F

Now what about this spg all right! So if we go down here all right, we're up here, actually I should say: we've got our svg element and we're all that exciting stuff for the horse. Right traditionally, you do that with a fill and again I've put that in here. Right so can we do something? You know fancy, yes, is the answer. So let's take a look right. So if we take this, you know you could set fill to red right and that would work as well right.

F

But if I want that to be theme sensitive, let's try and paste one of those classes in here as well. All right, let's bring it over, and this is just for my own- you don't need to format it properly, but I like to okay, we've got our class, so we see a font color theme primary right, so that seems like that would work right that nice deal. So, let's preview that oh we've got to fill in here with reds, let's take phil out entirely sorry phil all right preview that it doesn't work right.

F

It did not pick up on that, so this one has a slightly different trick right. So if we paste fill back in, we actually have to put a little piece in here. We go so fill and we say current color and we say current color and preview that bam. Now it's going to pick up on whatever the font. Color is right. So now we have our nice horse crest and they're all theme sensitive.

F

So I'm going to save that and let's take a look here so if we switch back between the themes, all right, we'll change, the look go to theme. If we go to our horse, we've got our nice. Browns are all working right and we've got all the teal right. We've got the green.

F

Even if we go to dark, yellow, you'll notice. Everything now is now theme. Sensitive awesome, that's really cool! So that's several techniques for that, and then I've got one more little trick here all right. So let's uh not do this dark, yellow or whatever. This is we'll go back to teal just for fun. Let's say we're gonna get out of here now. What about you know?

F

This is okay: we've got our custom uh card, props right sitting there on that title, which is cool right, and it shows this nice thing and that's awesome that we can do that. But what, if we wanted to show it for the whole thing all right, so, let's adjust where we put that. So, if we go in here, I'm going to format the current view, let's scroll down to where those custom card props are so we accomplish custom card props by specifying this element here right we open on hover.

F

We want that little beak, which is that little triangle all right and then we've got our own little formatter, where we can put whatever we want in there. In this case, we've just put a box. We put the history in it right, but we want that to show up on everything. So what if we took?

F

You know our custom card props here we're just going to cut them right, because you could specify those on any element up here and we say why don't we put that on the root element right so here we've got our root element, uh which is probably that one, let's see yeah. This is this one right, so we put a comma. We paste it in here, so I'm not going to bother fixing that right.

F

But if we preview that it should work on the whole thing right, it doesn't so here's a strange quirk with custom card props. If you have any children inside your element, custom card props will be ignored entirely right, which can be really frustrating, so you might be tempted to put you know, just copy paste. This custom card props on you know the shield on this or if you've got lots of elements.

F

Right so say, you've got an icon and text you're trying to use that as a button for a hover right that quickly gets very, very frustrating. So here's a little trick we're going to show you and that's the idea that instead of doing that, let's undo that all right- let's uh there we go, get rid of that we'll get an extra comma there right. So now we don't have our custom card props. But if we have this root element here,.

A

F

And we set the position of it to relative. We can go down into its children, so it's children right. We go down here and we can add another child. So right here, I had one of this one we're just going to add. Basically a dummy element right. So let's do this and let's say all right, it'll type and we're going to say it's a div, because we don't really care right. The only thing we really care about here is we're going to put those custom card props in there right.

F

But in order to make that work we need some styles because we don't want just an extra box at the bottom right so style. Let's add that here and in this case we're going to set its position.

F

To absolute, which means we just want it to be over top of everything right, but in order to do that, we're going to set its top to zero we're going to set its left to zero and we're going to set its right zero, and I bet you can guess where we're gonna set the bottom two, that's right, zero bam right! So we do that and if we preview that ah now we put this element that we've put as zero zero zero zero all around it. So it's hovered over.

F

It's there's nothing inside of it right, but it's hovered over the whole thing. So now we can put that cover card over all of the card which is really cool. So again, if you've got an icon, you got text. You know, you've got something a little more complex than a single element. This is the kind of technique you use, wrap them up in a relative container and then stick them next to each other right here, like that again check out the sample to see how that all worked all right. So there we go very exciting.

F

Let's take a look at a review and I'll hand this over to someone else all right, so theming tricks that box shadow, remove that color from the property and then you can use those theme colors for font color as needed right. So there's theme primary things secondary ordinary tertiary there's a whole bunch of them. You can check those out on the ui, fluid site or fluent ui site. All right for svg fills like we talked about. You got to use this current color for the fill and then it'll automatically pick up on the font.

F

Color all right and same with border color split those out from the simple border property into border width and border style, and then you could then use those watercolors with the theme colors and then last, like we talked about custom card props ignored when children present so again use our little technique there to position a dummy element over everything. You want that hover card to work on all right and finally be sure to check out full documentation.

F

This sample is available called horsepress check that out. It has both the sample before and the sample after. uh With details on the little advanced tricks, I did there. Okay, that's all. I got thanks. Everybody.

A

Excellent thanks chris, it's just amazing to see you edit those pages and the layouts and one question actually was a church one who asked just to clarify that as well. Will these work in a list formatting web part or list web part if you apply them to the uh the list.

F

It does, um and in fact, if you specify that so if you some of the tiles again, if you save that as the default, that's also going to work for your web part, the hover cards and all of those and the theming styles will all work as well. In fact, if we come in this with microsoft lists right, instead of I came directly to the sharepoint site, which you can see, I'm picking up the sharepoint theme. uh These theme colors will then take up those microsoft list theme.

F

It's gonna have that purple and some other look to it too. So.

G

F

Your format to be super flexible as you copy it among sites or use it inside list or inside sharepoint, or even bring it over to teams.

A

Exactly inside team as well, because there's a question related on that one, so, basically, inside of the teams, it's the same implementation which works in the microsoft lists, inside of the microsoft teams or in a sharepoint list or in a web part, so all of that works flexibly without any issues anyway. Thank you, chris, on that one really cool stuff, and it's like said it's awesome, to see how you know exactly what you're doing on the on the attributes and everything else. It's just amazing, but.

F

A

Yeah yes, but let's jump on nithya's demo, so we're gonna. Actually, there's gonna be an introduction to a completely new microsoft themes, app template, which nobody has seen before until except internally, right, nikki.

G

Yes, that is correct, yes, so this is very.

A

G

Fresh, let me just share my screen and we can get started.

A

G

All right, uh this one is a new action clip that microsoft teams is releasing uh it's called employee trainings. It essentially helps out all of the enterprises uh with managing all of these training events across the whole enterprise. um This is an app template, so app templates are open source production ready code that microsoft, engineering uh ships. We have a huge catalog of them.

G

um What we usually do is that uh we do common business line scenarios and see if there is a demand across customers and publish that code on github free to use free for you to make it your own and start developing with it to start using it in whichever way you want to customize it uh so that you don't have to do uh that, building from scratch uh for any of these common business line scenarios, so there's a huge catalog. The link is here. I've also posted it in the meeting chat.

G

So this one in particular um enables your corporate workforce uh to manage events. So there are a lot of learning apps out there, which actually help you with um creating playlists.

G

Sharepoint is also great for actually using just less for creation of playlists for different kinds of learning, but this is more focused towards managing those events like by capacity um and by setting reminders managing registrations and also allowing the users to like express their interest, the trainings that they are interested in and then uh also see what their peers are doing, so that they can get some inspiration like people in my team are doing this uh healthy, remote work training.

G

uh So I'm more encouraged to actually pursue that, and it creates this really collaborative wonderful space for uh managing and like sharing searching for all of these employee trainings. So it can be used very uh across industries. So I'm gonna move to the demo, but before that, just a quick note on the personas. So since it is for employee trainings first one is the host event host or a trainer.

G

The trainer could be internal or external right now we are focused on internal trainer, but you can also add guest users and meet them trainers um this trainer. Usually, these are very common problems that they want to make learners feels welcome. They want to manage all of these events. They want to remind people to register if the capacity is hit. For that particular event like a class or a training session only can have like 20 people for an effective discussion.

G

uh You can manage all of that as a trainer and then on an event attendee site. um The really big ask is to actually find out what is going on in my company, um like what is going on in the training state in the as per the interest. I have so that I can find that and then register for those events um and show that I'm actually learning like new things.

G

Another important ask here is also to be able to search and share these learnings, which are part of this app so with that moving to the demo, so I had logged in before uh so I've logged in as an end user so like an employee uh accessing the employee, training app and I've just named it as user, so that it's crystal clear that this is the user side of things. And then we have a team here created already for employee training demo and in this team I went and installed the app.

G

uh So this is just like how app templates work like uh I had opened that link as well. So there's a huge catalog here and just like any other app template. uh This one will also go uh in as a customer like an lob app in your app. So if I go back, um this will be available in like your built for your company once you deploy it, it's really easy steps to deploy as well before we get into the demo. um So it has like all these persona guidance.

G

What each and every field means like we have all of this in documentation. It has a really good documentation guide as well that you can utilize uh and know more about the technical details um that are required to actually deploy this app so from an admin side of things or a learning team type side of things. Let me just go back. Let me minimize this, so I am here right now.

G

um I just installed this app, but I played around with it quite a bit, so you can see a lot of notifications, but essentially what you do get is a welcome card as soon as the app is installed in this team, and then it can actually trigger this action, which is the most important action for any learning team, which is to manage these events. So if I click on add event, um I should be redirected to this task module which can help me to add an event right from the bot.

G

uh So my whole team can actually get notified once that event is created, and I don't need to inform, like everybody else, to coordinate on this particular event. They can just start a chat here.

G

I can also go to this tab that I can pin um as an admin or a learning coordinator in this team and then once I've done that I have these three essential stages. uh Any kind of events that I have created but not sent out to people are in drafts.

G

Active ones are the ones that are scheduled, event have been uh sorry, invitations have been uh sent out and then there is the completed cancelled, one uh which is essentially that um so, let's go to uh the first event creation, so I'm gonna use yeah, so I'm gonna use this event absentee meetings. So this is a new feature uh that has been released in teams, and I want to train the champion group in my company uh to be able to utilize like apps and teams and learn more about it and teach others on my team.

G

So I can upload an image here, so it can like go to my library and I can upload an image, but I prefer the color. So um I'm just gonna do this, and this is going to show me a little preview. um I've already entered the event name. There can be three types of events in person is essentially something that is not happening in covet 19. It's essentially when you book a meeting room inside your office to have an in-person event teams is a teams meeting invite like a standard teams.

G

Meeting invite on our calendar and live event is another type of invite that you can create in teams. Meetings uh live event can have up to thousand people uh teams. Meetings currently can have up to 350 people. uh It's soon getting extended like this limit keeps on increasing and then in person events you can manage the capacity as per your office space uh categories again as an admin. You can configure these categories, so you can keep on adding them.

G

If you want to create a category, but essentially, if you've already created them, you can categorize this event. Let me choose so I had actually created a live event, uh so one difference between live event and teams. Event that I would like to highlight is that if you choose teams, the meeting invite is automatically created. But if you choose live event right now, we don't have a programmatic way of creating that meeting.

G

In right, so you need to paste a url, which is why I was saying that I have already created an event, so I just created this one. So let me copy the link, because this is a live event. I want a lot of people to join, um so I have done this as a url. I can do description, I'm just going to copy paste this in my description and then you can see its markdown unicode is also supported, so you can have like a bit of formatting as well and then right time zone.

G

I have selected- and uh this means that I will need to replicate that so I'm just gonna go with this uh time so tuesday and then say like 10 two yeah. So by default it is, you can also set the default for a meeting. I'm just gonna go with this one, and then maximum number of participants is irrelevant here, but uh not irrelevant like if you wanted to constrain the even participants for this particular uh event. You can do that, so you can put like 20 and what that would do.

G

I will show you in a minute that it will basically close the registration after 20.. So although the live event can support like a lot of people, um your uh participation for this event will be limited to 20, and then uh you can go to the next. uh I think we I've not selected it. So this is a technical training.

G

Okay, so then this is super cool, which is that you can make this event public so that anybody in the or can see it or you can make this event private. So, let's go with private on this one and then you can start typing the name of a group so like let's say remote, I'm just gonna push it to the remote support, dev team. We uh support distribution list st's and teams, so you can search for either or just like the name of person um like I'm, not remembering any name.

G

Oh yeah, this one so like. I can also add the name of the person or, I can just add, uh like remote support dev. um I can also add like one more thing. uh Let me add another guide like just for funsies, and I can make this training mandatory for this group like one group, it can be made mandatory and the other group is not so.

G

This is also something that we can do and then, when we go to the next, this is a little nice preview of how this invitation is going to look like the beauty of this is that all of this information once and sent out to everybody um is available there right there in the meeting invite and then I can see as an event administrator that these are all of my active ones. I can take some actions on it as well like if I didn't want to do all of these uh invitation.

G

I want to take some time. I can save it as a draft and then, if I go to my drafts- um oh yeah, I'm sorry, I finished all the drafts. So basically you can do all of these actions in the three dot menu. You can also send reminders to people so by default. The app reminds uh five days before and one day before, so you will see these notifications popping up automatically in the people's invite calendar wherever you've shared this invite.

G

Otherwise you can also remind them. So if, before like that day, you want to remind everybody, you can send a reminder. You can also export the registration data, close registration before the due date or cancel the event, so all of these actions are possible. Now, let's go to the one side. So um this is the user view.

G

This is again as soon as the app is installed here. You will again get a welcome card for a user. It's really important that they can actually discover and explore all of these uh really cool events that your company is scheduling, um so I can actually go to discover and then I can go to discover events tab. I, as you can see sorry, as you can see, uh I have two meetings that I have just created. Both of them are mandatory.

G

uh This is not great for me, but the previous meeting that I created is. I had a 200 slot, so I register that is participant and then for this meeting that I just created uh since it is mandatory, um I could have chosen auto registration as well, so when I was making this mandatory, if you noticed um like if I go here and then go to edit event yeah.

G

So when I am going to this step, I can also automatically register mandatory uh attendees so that if this training is mandatory for these two they're automatically registered, but I just wanted to show you how registration works, so I'm going to click on registration here um as an end user and my end user's name is cameron white. So it also sends me a notification in the app and on the uh email as well.

G

So I will get like all of these details that there is a live event happening, and I can just directly save this that I'm going to be attending this. So this is really cool and something um as a huge ask from our customers, so that the notifications actually flow to different channels.

G

Now that I have done that, it will show that this event has been registered, so one registered participant here and then available slots 19.. If I click on it, I can again see all of the details.

G

um I can also cancel my registration if such a thing is allowed like if I can still cancel and then I can also see all of my events here, so the ones that I have mandatory appear separately so that I get focused attention there and then all of the events appear here um as a filtered list, where I can see all events that are happening in my company. I can also filter them as an admin or an end user.

G

Both personas can filter the events, so you can either filter them by say category, so you will see uh the filter done to be like technical events. You can filter them also by newest the coolest thing that I would like to also like pay a little bit more attention to. Is this popular in my network, so you can not only uh filter by newest, which is that which was the new newly created ones uh that got populated here in discover tab, but you can also choose by popular in my network.

G

So uh I I don't know if this is going to be popular in my network. Oh, it is okay, so this is also popular in my network because the the people in my peer group have taken such a similar technical training. So you can also tweak with this algorithm here. We are right now using people api to customize it to have like that peer network built in or that all of the members of the team, um whatever training they are taking, we recommend trainings according to that, so that type of customizations you can do.

G

And then, if you see your events, you can again see the ones that you have registered for and the ones that you have already completed. So this is, I think, about it. On the uh demo side of things, it's really cool the app works in. um Let me know.

E

G

So the app works as a as a bot and with a tab in it. uh The app also works in team scope. So, as I was showing you earlier here, I think this is a better example, so it is part of a team, so I can just go ahead and install it in all teams, uh as per permissions policy, you'll install it in one team and then last, but not the least.

G

You can also do the search and share parts just like shirts and share can be also done as a part of this uh scope, documentation everything I've shared. So thank you.

A

But really cool stuff. uh Thank you for sharing the links in the chat window, we'll collect them from there and and the the code was actually scheduled to get uh released on 20th of november or around about that. Okay, so manoy are we good? Are we ready to go yep thanks, sweet.

H

I'm sharing my screen: hey thanks everyone! So I'm here to present one of the solutions. So we participated in the microsoft team section in the 2020 in the second quarter of this year and we are the one of the top three uh winners. So as a two member team we built it and for the three weeks challenge we took it so I'm going to present at entire solutions here. So the subject was like the microsoft teams, uh the way of transforming the communications and how it's with a great play, a great workplace.

H

So to start with, I'm manoj mithal working as an architect and associated with the mind tree limited. I have with me my co-worker hi good good morning, everyone I am bharti langan working as a technical, aide and mind trainer.

H

This is the like credentials. What we have participated and we have received. So this is the place like we received at the third place as a mind tree organizations in this hackathon solution.

H

So moving forward what problem statement we took uh for this hackathon, so it was like the real time integration how we can do from the uh in the between the crowd and the sky. So that comes like what solutions you need to pick up. We have a lot of solutions exist in the market. The slack is there, so we thought. Okay, we have. Our teams and team has a lot of rich ecosystem around the m365. Why not take that one and build the solution around that one? So we choose mst.

H

So I'm going to talk about entire this, how we solve the business problem with that one. So this is a very holistic view and divide the business problem into the three sections and we consume most of the component, which exists in the team which we are going to customize. But the agenda is not to showcase how this tool we can use, but the agenda is how we can solve the business problem using that tool.

H

So, like I'm just talking about here, the communication sections, how we define the process sections, how to define the personal section so I'll just talk about more on that one and just showcase in the demo section how all these activity, what we have defined- and this is specific to the airline industry.

H

So as I have a persona which is uh some few crew members on the sky as well as on the land and they are having the teams on their any other device, desktop mobile or tablet, so how they are going to talk and how they can. We can solve their problems. So, if you see here, we have defined the teams with the specific to the airlines that having a journal channel- and this is the color coding if some is the out of box component- which we use and some we have built as a custom.

H

So there's as we're talking about airline industry for passengers, who is a special passenger as challenging person, is quite important so that we put it in the journal tab. So anybody can see whether the ground or the crew members as per their credit card, and then we have a section and the admin sections with the authorized persons they can have to the flight management.

H

So they can change their schedule and see the reporting for this particular, and then we have escalation sections uh that is again a one different channel so escalations like the person uh who's on the launch or in the airports or in the the flight uh he or she is not well uh somebody to escalate her to the respective team so to take the actions.

H

So for that purpose the escalations but component we have used as ms uh my msteam extensions here, I will showcase those one processes, one on the ground member, getting a lot of documents for doing their regular jobs as they are talking with the food industries. They are talking with the invoicings for that they are getting lot of invoices, how we can automate entire processes right. So for that we use the ai builder component to solve this problem of the processes and then, lastly, the personal.

H

So if I am a crew member, how I can solve my personal problem, how I can check what's my schedule and swap between the my co-worker, who is available if I am not well on the particular day, so let's go to the demo. I have a recorded uh six to seven minutes demo. I will quickly run it so this is my fictitious flight flight osmosis which our team we have created under that journal channel. So we have a special uh tabs we have created which have a special passengers and the challenging passengers.

H

This is spfx component, which we have built taking the data from external api dump into the sharepoint and designing the cards here. So we, the the crew member, can select it here. uh What the who is a special passenger in my flight is going accordingly. They can get the benefits and who is the challenging passenger in the particular flight they can filter and then get all the details which need more attentions and second channels.

H

I will move to the admin section here: admin sections uh we have where is the authorized person is going to assign to that particular channel. The admin person having their own dashboard, where they can click on the flight details. They will get listed down all the flights information, so we are going away from the email sections and they will get the notification directly from there if anything, change with enough like it's for internal crew members, so once they select any particular flight, come back here edit and then change any of the status it was delayed.

H

Now it's scheduled once they click on save, come back to the listings and the real time data is getting updated and accordingly, the notification also come using the ms flow to the particular post area of the particular channels. They will get the advantage for that again. We have a reporting and just a high level reporting, not quite rich here, but just showing the view how the reporting is going to work. So we have a flights here. What flights is going to happen? What type of passengers they have?

H

They will get a glimpse of on the very high level. This particular flight is having okay. This number of challenging passengers is number of the special passenger, so, accordingly, the services can be taken care within the particular flight. So once we move out from this sections now going to the escalation support, so this is a again one of the channel which the micro new member is having this particular support from the escalation. They will search any of the passengers from here. They will just check on their boarding pass.

H

What's the name of the person and search in our system, so those passengers, they will just make it out figure out. Okay, this is the name of the persons and pnr numbers ticket numbers and they will get more details again, it's coming as adaptive cards and they will mark it to the right doctor or someone who need to take action more on top of that, and once that person will log in they will get this card as a more detailed button is there, it has a deep linking to the different tabs.

H

What we have so doctors can click on the more details and he or she will get the more detail of the passengers. So what was his or her past medical history and what's their address and what flight they are going to take so accordingly, they can take more action now. Moving to the next section, if you see here, I logged in with the different users, I will pause it. I will just log in with the different users. So this is not that user, so this user is going to just talk it about here.

H

Okay, what's my weekly roster, so weekly roster, like my what's my weekly schedule, so he or she will get the detail of their weekly plan, uh what the task has assigned to him or her his or her. So they will get the detail once they click on the particular cards which is coming into the bot and they will get the more detail of the particular card. What's their flight is going to start? What's the given, the gate is going to open what's the hour and he or she feels not well click on the swap button.

H

So what the swear button will do it will post the notification within our teams using again using the ms flow, so the request has posted successfully when I log in with the different users again, then I will find in my post area some the request has appeared, so I'm just moving to the different one. So I will get the request. It will uh appear here in just a couple of seconds so here the that particular user is a different user.

H

He or she is going to accept that particular request as he or she will accepts the task will assign to that particular person and he or she will not get that particular task. So let's wait yep. It's came here so once this user say the accept swap request, then task is assigned to this particular person. So we can take this use case in a multiple way as a shift management happening in the organizations and we need to switch the shift and assign to someone else accordingly. Also that use case can come into the picture.

H

If I go back again to the that particular users who has raised the request and we'll see what the weekly task assigned to his or her that we will not get that particular task which he or she asked for the swap. So as we type here my weekly roster, what's my weekly plan so see the here, the task has gone from that particular uh queue, so the task is not there. So, let's uh there is another section.

H

If we need to search for the document as this entire ecosystem, we are using as a sharepoint as a back uh backend, so we just use a carousel card for the search. If users need to search any relevant documents with there, so can get it from there. Another section is a beverages industry for the beverages point of view, so it's just going entire touch free activity, whatever the beverage is left within our planes or in the my ground, crew member, and they want to knot it down whatever the food has left over.

H

So we have trained the system using ai builder, so once we upload any particular image so that image which we have taken by the mobile or which we have in system, for example, I took this image and that is a leftover component is available. So as soon as I upload, it will go to the models what we have defined into the ai builder and within a minute we'll get the response back. So what is the count is available?

H

So no need to not note it down on the paper and hand it over and send an email, we'll just post, that in post into the channel itself and the active team will get an idea what's the food has left over and accordingly, they can plan their capacity for the next flights or their next journeys.

H

Okay, the another section here is a private tab which we created. It's just a pnp control. We just took it from there and just deployed as per the need, and here in this worldwide news we have configured the news as specific to the airline, so this control is quite configurable available in pnp library. We just define. Okay, this is news specific to the pnp library to get the more feel it's a one common place. Everybody will get the response.

H

So has you I come back on the left uh beverages when you see here, the responses came in the meantime, how many cans I have and what the count of the can will get here, and this is get stored into the my file, folder structures itself, and this is the invoice processing. Basically, so uh when I'm getting the emails from under any of the vendor and I've defined the some rules and then based on the rules, the files is getting stored into the particular library.

H

Once it's getting stored into the library, then we are getting the notification in the post section itself and they are yeah here I am getting all the files which is getting stored and then post sections. We are getting notification. How many is processed uh invoices, how many spending invoices and again, having a button deep linking to the particular tab once I click it here, I will get okay. These are the invoices which has already processed uh in the system which we have done. We can get the more detail for that particular invoice.

H

If I go to the pending again, I will get how many invoices are pending and we can search it. uh Those one also yep so and at the main time, once it's processed. So this is a data expression. Again it's a list. uh Ms flow is using whatever the content has extracted using the ai builder and storing here, all the defined. What the trend we have done, our model, so it will just taking and just dumping the data here yep.

H

So that's all uh from my site, for this demo hope you'll get the more business use case in this one yep. Thank you. Thank.

A

You excellent yeah. Thank you. Thank you both for this one. This is a really really really really awesome set of cool scenarios for airline operations, so basically how how to use the microsoft 365 platform uh as the the model or the host for the airline operations so using bots and using microsoft, themes and storage and sharepoint, and surfacing data and file of that so really really cool stuff. So awesome awesome work on that one. I think a lot of the the people who are watching this video will be like.

A

Oh, that's, really, really, cool cool scenarios. Thank you manuel uh and thank you unity and thank you. Chris, for the create create create demos. uh Like typically we've been having the q a going on the side in the chat, uh so we should probably remove the q a in the end, because we are allocating always time that we don't have done on. Recording will be available in 24 hours in the microsoft resist five community youtube channel, so akms m365 pmb, please follow up uh us.

A

M365 general dave call the next one will be in november 26th. It is thanksgiving eve in the u.s, but because uh rest of the the world is that that day is a normal day. We're gonna execute that normally and the next sharepoint framework community call us in november 19th so a week from now and there's a lot of other calls available as well, which you might be interested to check them out, um they're all listed in m365 dev course, but that's it for today. So thank you, everybody for joining.

A

Thank you once again, chris niti and manoy on the demos, but that's it for now. So thank you, everybody for joining and thank you, everybody for being active on the community and please keep the feedback coming and we'll be definitely in touch.

B