Microsoft 365 Community Development, 22 Dec 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft 365 & Power Platform Development Community call – 22nd of December, 2022

Description

Microsoft 365 & Power Platform Development community call delivered on December 22nd.

Demos: Extend Microsoft Teams apps across Microsoft 365 (Outlook and Office) and Power Apps component library: Material design.

Releases: Yo teams - generator-teams – v4.1.0 GA, Yo teams - yoteams-build-core – v1.9.0 GA, Microsoft Teams Toolkit – v4.2.0 GA (VS Code), and Microsoft Graph Toolkit (MGT) – v2.9.0 GA, v3.0 Preview. Delivered 8 connectors, 1 script, 1 Teams and 4 Power Platform samples plus 1 conversation.

Please see the blog post for this call for project updates, news and events details. The host of this call was David Warner II (Microsoft) | @DavidWarnerII. Q&A takes place in chat throughout the call.

Agenda
• 06:46 – PnP .NET library updates - Bert Jansen (Microsoft) @O365bert
• 08:21 – PnP PowerShell updates - Gautam Sheth (Valo Intranet) | @gautamdsheth
• 10:15 – yo Teams updates - Rick Van Rousselt (Advantive) | @rickvanrousselt
• 11:31 – Microsoft Teams Toolkit updates - Vesa Juvonen (Microsoft) | @vesajuvonen
• 12:36 – Microsoft Graph Toolkit updates - David Warner II (Microsoft) | @DavidWarnerII
• 13:21 – Independent Publisher Connectors - Jocelyn Panchal (Microsoft) | @JocelynP_PM
• 15:16 – Microsoft Script Samples - Paul Bullock | @pkbullock
• 16:44 – Microsoft Teams Samples - David Warner II (Microsoft) | @DavidWarnerII
• 17:14 – Microsoft Power Platform Samples - April Dunnam (Microsoft) | @aprildunnam
• 18:29 – Together mode picture
• 19:39 – Extend Microsoft Teams apps across Microsoft 365 (Outlook and Office) - Markus Möller (Avanade) | @Moeller2_0
• 35:01 – Power Apps component library: Material design - April Dunnam (Microsoft) | @aprildunnam, Luise Freese | @LuiseFreese & Robin Rosengrün (EnBW) | @power_r2

Learn more
• See the full blog post for this call in the Microsoft 365 platform community blog - https://aka.ms/m365pnp/blog
• Download invite for the Microsoft 365 & Power Platform Development community call: http://aka.ms/spdev-sig-call
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

B

With the community, this is the Microsoft 365 and Power Platform development. Bi-Weekly call today is December 22nd, our last General development call of the Year. Everyone is here so excited. We've got a fantastic call-in store for everyone, all right so on our agenda latest updates on the community, we're going to see everybody get involved. Pnp.Net libraries, Powershell yo teams latest on Microsoft teams, toolkit just an update yesterday, Microsoft graph toolkit independent publisher, connectors. So many initiatives is fantastic. Then do we have some samples? You bet you.

B

We got a few script samples, Microsoft team samples, Power Platform samples and then what time will it be picture time everybody's favorite time together mode? And then we will see four amazing presenters today we're going to kick it off with Marcus on extending teams apps to Microsoft, 365, Outlook and office, and then we're going to see The Three, Amigos, April, Louisa and Robin on powerapps component Library material design, something brand new super super exciting. So let's first talk about your opportunities to participate in the community. There are a number of them.

B

The first thing is demoing a solution or a technical pattern. Just like you're going to see done here on the call today tons of opportunities for you to show off the amazing cool things that you're doing. uh Maybe you blogged about something and you want to share it with the community. We want you to share it. We've even made it easy on you. You can absolutely fill out a little form that provides an opportunity for us to connect with you and get you on the schedule.

B

There doesn't need to be anything, that's prolific or amazing, and if you do have something prolific and amazing, that's okay, too. So there are all kinds of opportunities for you to show off the amazing things. You're doing you can contribute on GitHub submit that sample that you might want to show off and, of course, provide feedback. We want to know what's working, what's not working? What would you like to see?

B

More of the only thing is we ask you to keep it positive so that we can ensure it's a safe and inclusive opportunity for everyone in the community? Now what are uh some of those initiatives and areas in which you can get involved? Well, we've got a number of videos within our community developer and Community Driven we've got a number of Open Source projects, things like CLI for Microsoft 365, PNP Powershell, which you'll see talked about today. We've got a whole lot of galleries, a plethora, even a cornucopia, a number of them.

B

It means a lot. Doesn't it okay? But you don't really need to remember all of these links. You only need to remember one little link for you to be able to take advantage of all this goodness and that is AKA dot, Ms, slash, M365 community, and, if you like, calls like this well guess what we have got plenty of calls for you, the first one is Microsoft 365 platform call, and this happens weekly on Tuesdays.

B

What's special about this call is its only Microsoft presenters, so that means you're going to hear from those program, managers, product managers about the programs and products that they're working on and the features and initiatives and where they would like feedback and want to show you the coolest new things. So definitely get that on your uh on your calendar.

B

The next couple of weeks are going to be just uh coffee and tea conversations, so you don't have to come in uh with anything expected to uh expected to learn just come in ready to talk and have some conversations it's a great opportunity.

B

Then we've got our Microsoft identity platform office, add-ins, the Power, Platform monthly call, which just happened yesterday, our M365 or Microsoft 365 and Power Platform development uh call which you're on now and then we've got our Viva connections and SharePoint framework call next week that official official last call of the year so tons of opportunities for you to get involved and join. These calls get them all on your calendar. That's right that Arrow right there, one thing AKA, dot, Ms, slash, M365, slash calls will get you all.

B

The recurrent invites that you need and talking about that platform call next week, we're gonna, see uh just the coffee and tea opportunity so come in uh we'll have some opportunities, we're going to use some new q, a tools to allow you to ask questions and vote the questions up that you want uh it's a great conversation opportunity. We had a really great time this week.

B

Everybody got involved and was able to collaborate together, AK dot, Ms, slash, m365-, Dev, Dash call now you're going to see all kinds of opportunities to get involved and you're going to wonder how do I do that? Some of these areas are a little confusing. uh Well, sharing is caring is here to provide you that Hands-On guidance. What is Hands-On guidance? It means that we are going to get into a call with you and walk you through how to do things like submit your first pull request.

B

Github can be frustrating and scary use terms like fork and blame and raw. What does all that mean? Well we're going to explain it to you. Not only are we going to explain it, we're going to show you and we're going to work along with you to do things like your first pull request, how you can get more involved, how you can present better on these calls how you can submit to the sample Repository.

B

We are absolutely here to help you and work alongside with you and not just tell you how to do it, but do it with you, and these are safe space. They absolutely are not recorded, so you do not have to feel fearful of asking a question that, maybe you think everyone should already know we're going to work right alongside you to make sure that you feel confident and equipped to do all these things.

B

So, as you can see everybody's celebrating at the bottom, so we're going to celebrate together as well somebody's pulling our leg right now. All right uh you can get access to the upcoming sessions at ak.ms sharing is caring and, of course, it's been a big buzz lately, our recognition program. This is a program that we started in connection with credly and it is super super exciting. What it provides is the opportunity for you to be officially recognized for the amazing work that you are doing. What does that mean?

B

It means that you're going to get badges. These are the same badges that you get when you get Microsoft certified. So these Community recognition badges are going to sit right alongside the badges that you you earned. When you got certified, it's going to show that you're, making a difference in the community in an official and credited way. You can share them on LinkedIn, associate them to your LinkedIn profile, share them on Twitter print them out, send them to the family on your cards.

B

It's a great way to say, hey, I'm, doing stuff and it's a great way to show the community, as well as your bosses and your clients that you're making a difference- and we know that makes it diff makes a difference for you in our industry. So we want to officially welcome you and contr or recognize you and there's no cost at all.

B

We just need you to opt in AK, dot, Ms, M365 recognition and we're making a whole bunch of new changes working with some of the program, leaders and initiative leaders in our community yesterday and gonna see some new badges coming out in just the next few days, so get excited for that I'll even plug that Powershell did I, say Powershell a new Powershell bench.

B

Yes coming soon and of course, you still have a few days left for the season of getting so definitely contribute anything through GitHub over the next few days, whether it be a documentation update and you can get this one time season of getting badge- that's only available in November and December so exciting stuff. Now, let's talk about some Project Specific updates uh and we're going to start with pnp.net libraries and Bert.

C

Thank you, David uh for the pmp.net site. We have our two libraries, the framework one and across the gate, which is the newer one.

C

um What happened there uh framework site uh uh Paul previously Network on the documentation framework, so starting documentation sites for framework uh we're still looking into folks wanting to help their write articles around how the usbp framework- and so, if you want to do that great on the cross Decay side, a couple of small things happened: there was a bug fix from Schumann uh around the pages API and then I did some work on enabling you to get a file by a link.

C

So if you have a sharing link or whatever link pointing to a file in SharePoint, throw it in you get the file reference back, so you can start working with the file really easily, no matter which site collection is really matter. You just get the file, so that's really good. um One thing to call out is a usage.

C

We didn't work on kind of uh updating our users, dashboard, I, would say uh and just to call out for for the net libraries we have 35 billion requests a month, which is a lot uh really a lot, and if we look at historically, we tracked this from 2016 just sort of.net site. We crossed one trillion requests so imagine like 1 trillion, requests issues by PNP components from 2016 on until now.

C

So that's just a massive amount of requests, sir and the usage keeps on growing as you see in the graph, so meaning this means people are using it and the same applies to Powershell as well. I think got them. Let's move to Powershell.

D

Thanks thanks Bert um I I, don't have the updated numbers for the Powershell request, but we also did cross 140 million command executions per day, so that translates to around four or five billion requests a month um yeah uh about pnb Powershell, pnb Powershell, it's a Powershell module that you can use to connect to various Microsoft 365 services like SharePoint, planner teams, Azure ID and lots more uh what's new, we added.net 6.0 support, so it is now available in the nightly. Builds. Would absolutely love to have your feedback around that? uh Do.

D

Let us know if you find any issues as well, uh we'd like to have that fixed before we make a more General release for that. um What is improved here is in the pnb field command. Let uh you we now. You know support at uh showing of The Field inside a property pane so a lot. Sometimes there is a in the SharePoint list. We have the property pane when you click on a list item and now using this command, you are able to support, ensure that that particular field is visible in that property pane.

D

uh Besides that we improved the PNP 10 command by adding a bunch of properties and also improved the PNP data rows to site template commandlet, so that supports overriding of the existing list items when you use the PNP provisioning template here. So what next uh we'd absolutely love to hear your hear from you so uh feel free to chime in on GitHub discussion and feedback and also do raise the issues if you face any of them. So yeah thanks over to you, oh yeah, before I go hand it over to David.

D

uh We are handing out the Gridley badges, so yeah absolutely keep an eye out for them as well. So thank you David over to you.

B

Awesome The, Crowd, Goes Wild, very excited for those badges I know everybody is so excellent. Thank you, Adam. Okay, let's move on to Yo teams and I. Believe Rick is gonna, walk us through this yeah.

E

Yeah Stefan's not feeling well uh so, what's new, we added the support for the Manifest versions. 1.14 1.15 was a little bit harder than normal, because there was I had to figure out what they were doing actually. So it was a different one and we also did some minor fixes as well and we're preparing a new release. I still have to merge the full request from the founders too and I see that the package downloads are a little bit down, but that's normal. It's the end of the year.

E

I think people are getting ready for the holiday season. So from my side, I want to wish everybody happy holidays as well, and we are already ready to start producing all small EO teams tutorial, like really small videos to get you started, because we noticed that well yeah, while we in it and using it a lot, it might be a little bit complex to get started for people.

E

So we really need to start on those little small teams, video themes, videos so and for the rest, if you want to help out or fix some bugs or it helps, the fun is starting. The visual code Visual Studio code extension- if you want to help your mouth, then just visit our GitHub page and just apply for what you that you wanted to help out back to you. David.

B

Awesome thanks for that's exciting Visual Studio code extension can't wait to see that awesome. All right next up is Microsoft teams toolkit, uh and this is going to cover this.

F

Yep, so the latest version on Microsoft teams toolkit was released yesterday, so 21st of December as a holiday gift for those uh who celebrate this time of the year and there are a new dashboard tab template. So basically, you can see the picture on the right, which is the the preview on the template, so you can actually start by creating or getting a starting point, uh which is looking like that also there's a step-by-step guidance, individual Studio code to assist you to create the Microsoft resist five testing Dev developer tenant.

F

The latest version also scaffold shipment framework, 1.16 versions of the SharePoint framework Solutions on the visual studio site. The latest version is still 17.4 and that's the one which was released in the early November, a lot of stuff in the pipeline and a lot of improvements and continuously new versions coming out in the new year as well. But that's pretty much in here. If you find anything, please report them in the GitHub issue list. Thank you for that.

B

Awesome thanks besser all right, moving forward to Microsoft graph toolkit or MGT. As we all know it. uh Seb is out today, but there's always opportunities to interact with MGT. uh It is the way for you to utilize Microsoft graph in uh the simplistic manner that we all like to just plug in things. uh There's all kinds of samples to utilize MGT can be used inside of existing web parts that you can use from the community as well things like the react, content query web part.

B

You can insert MGT components in there again if you're looking to get involved with uh graph. It is one of the easiest ways to start implementing some of those graph components for you that you don't need to write yourself so definitely check it out. There's always help wanted. There's good. First issues. You can see all that at AKA, dot, Ms, slash, MGT and AKA dot, Ms MGT issues all right. How about some independent publisher, connectors.

G

Happy holidays, everyone and what an exciting holiday treat of an announcement that we have here in case you have not heard the connectors ecosystem has surpassed a total of 900 connectors deployment, freezes be damned because we are still pushing ahead. We are on the road to a thousand, but back to our regular content. We are actually a bit past. 900. I made this slide yesterday morning, just for it to be made Incorrect and out of date by the evening time, because our fantastic team was able to publish even more.

G

We have added eight new connectors from independent Publishers since two weeks ago, despite the holidays, while other teams and products might have a lull, our Publishers, our community and our team does not slow down. With all of these amazing contributions, we are now at a total of 220 IP. Connectors I would like to give a shout out to two new contributors, Iona and Ahmed across the entire connector ecosystem. We are now at 912, total connectors, including power, automate power, apps and Azure logic, apps 18 more than an hour last session two weeks ago.

G

This is the second highest growth quarter. In the history of connectors, since all the way back to 2016, with 80 connectors certified since October, 47 of which are from independent Publishers like yourselves, I, would also like to give a huge shout out to the MVP of MVPs Troy Taylor, who has submitted his 100th connector into our ecosystem. So if you see him, if you catch him on Twitter, give him a shout out for this huge milestone. Please reach out to me.

G

If you have any questions, if you think I can help to start your connector building experience check out our repo with connector requests. Links will be in the chat. Thank you, everyone and happy holidays. Handing it back over to you. David awesome.

B

And fantastic work, everyone that is, that is just that's. That's Applause, worthy right, I think excellent over 900 excellent, all right. Let's talk about some more opportunities for you to get involved script samples, one of my favorite with Paul Bullock.

H

Thank you, David uh script. Samples is a a repository where you can share your uh Powershell scripts or Flash scripts with the community. So we cover like tooling for things like the Microsoft graph, PMP power shelf CLI for Maxwell 365 and to be fair, it's unlimited I can expand the site to include more types of tooling within this. If you have a sample you want to share and don't know where it fits.

H

um We have a new uh sample, so this is from uh Casper Larson. So this is the extraction of configuration of a PMP search results web part and then being able to apply it to other site collections. Super super awesome also to remember. We do have a badge that's going out so remember to opt into the program in order to receive that you get this nice lovely badge and we are working on the 2023 ones at the moment.

H

If you want to contribute to script, samples by all means either put an issue in the issues list on the GitHub repo or reach out to me via Twitter. The same handle is is is on LinkedIn as well. If you prefer that social media platform, so by means, but I also want to wish you all the happy holidays from me and uh just to say, thank you for everything, you've done for the community, absolutely awesome back over to you. David.

B

Awesome thanks Paul I love the one centralized location for all scripts for helping your day-to-day life, so I love that little tagline just need one that forces my kids to clean the room and we'll be in business, so good job thanks, everybody all right. How about some Microsoft team samples, uh no new samples to show up, but we did want to show off the sample app of the week. uh This is a meeting tab that records everyone's name, so they can pronounce them correctly.

B

uh I know that it's something that I think is really really cool, because I usually put your names horribly. So it's very nice to help me not sound like a uh which is quite often but excellent check it out. You can see more at AK dot, Ms, slash, M365 samples and, of course, there's always opportunities for you to contribute and we'll see a little more from Marcus later today and next up, Power Platform samples with April Dunham.

A

Oh thanks David, so we have a few new samples in the Power Platform repo here. So one is an injured body. Part selection, Gallery app. This is a pretty interesting use case for our canvas app here, showing how you can have kind of selectable objects with inside an image just like different types of the body and see what they are and what they do. Another one that we have is the Microsoft graph toolkit people picker.

A

So how to use that information to create a custom people picker there and then a couple of power, automate samples as well one to copy SharePoint Pages between sites and another to set dataverse lookup. So a good variety of samples that we have there in the repo definitely encourage you to submit your samples there to aka.ms forward, slash Power, Platform, Dash samples, and also we have a Power Platform sharing is caring session coming up. So if you want to get started learning how to submit your samples there, that's coming up, January 10th, don't know!

A

If you have anything else, you want to say about that. Coming up there, Dave.

B

Nope yeah just get signed up. Thank you, April. Absolutely uh we're gonna have a fantastic session there, uh just after the New Year I'm kind of curious with that injured body. Part selection. If we're going to see the use case of that go up as people try to start taking down those lights and stuff like that over the holidays,.

A

B

Right, yeah absolutely see we're here for everybody all right. It is fix your time, so Odessa is going to take over the screen and record. Everyone feel free to share your camera. If you'd like to show the community how amazing you are yes,.

F

Indeed, uh one second, once I get ready to go again. You are in here and let me put you in this screen, so we will see who's on the screen. You'll see a few Christmas people in the room. That's good! That's good! We still have few seats in the room. I will I'm not recording it. Let's wait for a few more people, because we do have quite a lot of people in the school which is really really cool.

F

I guess we are starting to be maxed out, so I will put the recording on unless there's an hand, waving we'll cry back if animation out of this again, so thank you, everybody for joining once more and more time. Thank you for being with us in 2022, and we are looking forward having you with us in 2023 as well. Thanks, everybody awesome to see you in these calls. Thank you. Everybody keep the feedback coming cheers! Let's get back to your daily awesome.

B

Thanks Mesa and looking great everybody great to see everybody here all right, let me share up my screen again: get this ready and and drum roll. We got our amazing presenters today. We're gonna start out with Marcus and Marcus is going to show us how to extend teams apps to M365 Outlook in office Marcus. Take it away.

I

B

I

Right looks great: okay, just want to give a quick intro on how to extend teams apps to Microsoft 365 across apps, so to use uh to reuse them and Outlook and office. I am reusing a sample which the die-hard audience of this kind of cards might remember from a different technical scenario, but uh come to that in a minute. First I would like to quickly introduce myself for those who still don't know me.

I

My name is Marcus Muller I'm working as a Microsoft 365 developer expert for Evernote in Germany I'm, a Microsoft MVP since nearly thoughts, it's a bit more than 12 months. If you want to get in contact with me, try to reach out I'm still on Twitter or you can use my blog and contact me there over my articles and comment if you like, as you might know, from my different presentations, I already like to start directly with the demo.

I

So what I would like to show today is how to save Full mails, so not only the attachment, also, but the full mails to Pilot teams or OneDrive and even mark them as safe, so that you do not do it twice or different times. This scenario is taken from an older idea: I think it was two and a half years, three years back when it was an option to use Outlook add-ins in SharePoint framework, which was a bit of net worth I.

I

Think um but I try to reuse this now in this sample and why I try to use this I will come to later, because I see something at the Horizon there as well. Okay, let's start with first demo, what we need is a team's personal app. We have several ones here and what we are talking about is the main storage app.

I

The main storage app will show us the most recent, uh very simple, the most recent match. We have an Outlook and uh we can pick one and we can press save and then what we open up is our current available Microsoft teams. We can go to One browser that go into the general folder go into any subfolder. You will be prepared here and save the mail yeah.

I

This is still demo here, um so this was I think I have to get rid of it, but uh nevertheless, I can show you directly that I'm getting the ID of the give mail. Let's check the result.

I

If you remember, we were in the I think it was. The retail team run General tap in the files folder in the PMP demo coil, and there we have a mail from a few seconds ago. We can open that up.

I

There is our mail and it's stored or archived there as well yeah, but this is a simple Microsoft teams application, but it is not really related to teams there because mail is involved. You must not start in teams, you can also start a OneDrive or SharePoint or whatever you can think about. So, let's see how we can act with the exact same app from a different perspective, let's jump to Outlook. Therefore in Outlook we also have an app button. We have the mail storage app here.

I

It's already installed it's already there, and what we can do now is what you can see here at the right side: yeah, um it's a little uh storage icon, so I already recognize hey. This mail is already stored somewhere when I try it again, I get a more deeper information about that.

I

I already started somewhere in my system. Now, I will cancel it here, because I only want to do it twice and therefore we can directly jump to the third option. We have to use to reuse the same app. Once again, we can go to office.com, which will become Microsoft 365 apps in the beginning, and here we have also some apps, and here we have some standard apps, but also our main storage app same rendering.

I

Once again now we can start with a big mail, for instance, and save that one and what's different here now- is now I'm, detecting that I'm, not in teams anymore now I'm in office in uh in in Outlook. It was the same. This is my scenario that I'm using not teams as storage location anymore, if I'm outside teams so yeah, now I'm using OneDrive.

I

You can detect this from my yeah, where we fantastic folder names, go to the PMP call Demo prepare to your Pros, save the mail once again shouldn't take much time, let's check it and go to our OneDrive.

I

And there we are- and here this takes a bit time of loading, but this is on purpose. You might have seen the fire size in the OneDrive folder there. We have a very big mail. This is also for demo purposes, because it's an essential when you store files, um you have to distinct between small files, smaller than four megabyte and big files, bigger than four megabytes- and here this was my I think- was my biggest shot last year out in the wildlife.

I

Nevertheless, that was my demo. Let's talk a bit about the backgrounds. What do we need to get this up and running? It's quite simple: we need a TN static, personal tab application. You have seen that it's essential that you use the team's manifest to wrap around the app with version 1.13 or above.

I

We also need the teams JS, SDK, 2.0 or above for instances. We can also use the detect. Where are we yeah? But we'll see this uh in a couple of minutes and to have that or up and running, for instance, when I'm working as always, it's uh the Yeoman generator for teams. Here you need the version. Four.

I

uh At least because this uh supports all the uh things above so the Manifest 1.13 I think was even a version earlier, but the team's JS SDK 2.0 is only available since version 4.. The scenario was quite simple, but there's much more and you also know not really uh yeah bound to the Yeoman generator for teams or teams, native apps or I call it in general. So here is only a very small scenario that I'm showing I'm, showing a personal app realized with teams app or in Yeoman generator or could also have used.

I

The team's toolkit also yeah, and this is what I'm reusing inside teams, Outlook or office.

I

This shame would be achievable with SharePoint framework, for instance, yeah there's only one downside, I, don't like too much SharePoint framework here in this case, because I might deal with really big file sizes and then I would have a client server ping pong uh with a SharePoint framework, while I'm in a teams. Application I have my backend, which does all the things for me foreign.

I

But what is also available are so called search based, messaging extensions. They can be realized in teams since I. Don't know a couple of years and since recently, also in Outlook, so we can pick cards from your search results and put them directly into an Outlook compose things, I'm, currently writing or working on a sample using that you can also realize, uh with SharePoint framework and teams in parallel in teams is uh the action-based variant of messaging extensions.

I

This is a bit more ritual and I'm really really praying for this to come to Outlook as well I already covered. What do we need for the Manifest yeah quite easy?

I

We need the version 1.13 and that's all static, Tab and the scope personal nothing else is needed.

I

The second thing is what we can do and what I did you remember that I was storing either to teams or to OneDrive? Is you can detect in your app which kind of host which kind of Microsoft 360 price product I'm running in yeah, so I might either run in teams or what I'm doing here is, if I'm, not in teams in Outlook or in a default way, then I use a different component. Then I use here my OneDrive component, um while I was using um sorry all right.

I

Yes, my OneDrive component and teams I would use the teams component yeah and uh just to add this, it's not in the code side here, but this sort option we have if you want to detect it specifically, is also office at the third pillar. In the scenario, what I was also using the sample for is to illustrate how to use a single sign-on because, of course uh doing some graph calls in the back end.

I

They will need single sign-on for this and why I'm doing this in this way, um I'm showing here so I, try to do as much as I can on the server side. Only so the only thing what I need to do really on client-side is get my initial bootstrap or ID token, which represents the user. It's already authenticated inside teams or office or Outlook, and then I directly call my backend operation and the backend operation. Does all the additional thing for me: I have to exchange the token through an access.

I

Token, therefore, I might need a secret for my app registration. All the things only available on backend side I do not return the token to client-side I directly call my third party API in this case My Graph things and what I finally only do and what only reaches the client once again is my result. Nothing else so question would I do that on client side as well.

I

No I wouldn't do it if I can prevent and I've seen samples, also on Microsoft site. Unfortunately, who are doing that we are sharing the access token on client-side and so I do not appreciate that I mentioned they say. My demos are showing you different. uh My my small digest uh mail, where this is a big uh picture map, so we have to distinct or we can distinct in the code if we are using. If we have a bigger mime content length so bigger than four megabyte, then we need a resumable upload session.

I

If not, we can simply upload it. Of course you can do the resumable upload session, which I'm showing on the bottom here. So I press create a section and then I can push my slices yeah, the first 320 kilobytes and so on and so forth. I could do that as well for smaller males, then I would save a lot of code yeah, but I, wouldn't uh yeah I would try to the simple wherever I can.

I

So this is where I'm distincting between smaller and bigger file sizes here and the last thing is- you might have seen that I'm detecting that I already start a mail yeah, so that I do not do it twice or that I can prevent this. Potentially, how do I achieve that yeah? Of course, I could have a database or SharePoint list in the background and write down every mail I already started yeah, but would make sense.

I

The easiest thing to achieve this Microsoft graph, open extensions with Microsoft graph, open extensions I can simply adjust any kind of simple metadata of my choice to Microsoft graph objects such as my mails, so I could even write a shoe size of the author of a male to a male. If I would want to that's quite easy, simply yeah, you have to have a name, a unique name and write this as a extensional property.

I

That's an alternative. This is the schema extensions. This is a bit more robust and you can also query for males. Then, in this case you cannot so I cannot retrieve all my mails of my inbox that are already saved. That's not possible. I can only get an additional information if I have a mail. I can ask a do. I also have an extension or not okay, but this is how I was uh getting this up and running. That I was already remembering hey.

I

This may got start somewhere else already, that's all for my site, as always, some resources about the show on content, so I have a blog post about that. The code is already shared as a PNP sample. There's some Microsoft documentation around this M365 apps and I also wrote an article on the PNP block about the different scenarios. You remember the table, for instance, I was showing uh this is what what bit more illustrating and just as an outlook for the early 2023 I, will come up with another sample who will show all the missing things.

I

So how will show not only how to realize it in teams, but also the same in SharePoint framework yeah? We will also realize such an uh the research-based messaging connector, and uh this is what I'm currently working on and stay tuned for this and see you in one of the next calls. Maybe for that to demo.

B

Awesome Marcus really good job I mean always always you do amazing work, uh but really love how you show the scenarios and you well documented and identified the what and the why and the where you're doing it. The code really great job uh super super stuff. Can't can't wait to see your next sample as well. So thank you for sharing that and putting it into the repository everybody. You can get that the links are in the chat as well, so great job Marcus. Thank you, you're rocking it.

B

Thank you all right now, let's move into our next Trifecta of presenters, April, Luis and Rudolph or or is it? Is it Robin or I'm, not sure, uh but they are going to show us about powerapps component Library material design and we'll kick it off with April who is leading the team in this initiative so April, if you'd like to take it on over yeah.

A

Thank you David, so I just want to take a few minutes here, not too long to go over a little bit of the background and bigger picture before Louise and Robin go into the demo. So what we're demoing today is really part of a bigger initiative to offer some prescriptive guidance, around user interface principles for powerapps.

A

So we have white papers and learn documentation out there related to improving the performance of powerapps, which is another big topic, but we don't really have the same for UI from the UI side. There's all kinds of material already out there that talks about UI and how it relates to application development, but nothing really specific to how you can apply these Concepts, which is exactly what the powerapps design toolkit that you're seeing here is designed to try to solve.

A

So the overall initiative or goal with this initiative is to provide a place where you can go to get information about user interface principles and how you can apply these principles to build accessible and consistent power apps. So one of the key elements of UI designs we mentioned is consistency. So, as you can see, we have a screen here. We can learn a little bit more about consistency and what it means, and some of the implications of that one of the ways that we really give this consistency inside of our powerapps is by leveraging components.

A

So the process to build components that match a particular theme or design standard can be a bit cumbersome. So we thought that one of the good ways to kind of have a lot of impact here with this design. Toolkit initiative would be to offer a series of component Library kits which follow different UI styles.

A

So our goal with this is not only to provide some additional documentation and guidance around user interface design, but also to give you a place where you can see the art of the possible for UI design, the powerapps and take it a step further by offering you those component libraries that you can plug and play into your powerapps to improve your design. So what we decided to start with this is a design toolkit related to the material design standards and that's exactly what Luis and Robin will be demoing for you today.

A

So I'll turn it over to them to show a quick demo of how this works.

J

Okay, so um this is material design for powerapps, a small Christmas gift for those who are celebrating from Robin uh AKA Rudolph and may um very very shortly about me so high for everyone who does not know me: uh I'm Lisa I'm, an independent Power, Platform consultant based in Germany uh I'm, an MVP in uh MP3 self-development and business application. I love stickers at coffee at the number 42, and you can find me on Twitter at Louisa, Fraser and with me today, is Robin Robin. Would you like to introduce yourself.

K

Yeah sure um I am a low code, enabler or Advocate at embw and I speak German English and, as you will see in a second myotherapy language, is SVG and you'll. Find me on Twitter under power under bar R2.

J

And we found material design which you will just like show off in a few minutes, but the very eventually ugly truth of powerapps is that so, when I look at powerapps that my customers built before I consort them, they look like that, and that is just like. It feels a little bit unelegant, uh not to say ugly. So um maybe you agree here with me that that is not what we would like to see in powerapps, but unfortunately that is the Ugly Truth.

J

So um options for makers are first, the bad option is just like yeah. We would just like live with that look and feel, and with those um default styles of the controls, um and whenever we need to have something that is more complex, then we would just like try to copy paste that from previous app or maybe just like a colleague can share something with us and we feel like this is really bad and it does not really work very well.

J

Second option that a maker has is the ugly one. We could just like literally change every single property of every single control, which is just like super painful, and then we would just like have some reference controls, so something that we styled in a nice way, maybe on a hidden screen and then copy paste. The hell out of that, so that we can just like have a nicer look and feel in our apps. But maybe you guessed it.

J

That is painful as well, because I promise you, you forget one property and then you just copy paste your box around your apps or it does not really look nice um in the first place as well and as a result we get just like really in outstated and inconsistent design, and some of these out of the box controls really lack of functionality and pleasant, full appearance, but also functionality.

J

So there is just like stuff that does not really work out of the box, and this also means that makers who are supposed to come into places like to solve their business needs and the first and more cost efficient way will then need to reinvent the wheel over and over and over again, which is not the purpose of bringing in low code in the first place.

J

So that does not make any sense, and then we see just like a lot of differences across apps, just like maybe Robin works on something in his style and I work on something and my style, and maybe skill level variety as well, and then we end up, which is like apps, where there is no consistent level of design or intuity to um to use them.

J

So we needed to have just like a better option and then there is of course, a good option uh for a maker, and that would be using a component Library and a template app, so that I really get a consistent, looking feel in my apps. So let's imagine and I hope you still have that usual power up picture in mind. What if our apps look a little bit more like that?

J

What if we really had just like this, you previously looking text input boxes, what if we had just like beautifully designed screens and what, if we provided guidance on how to achieve that, not by letting macros now rebuild all of that, but just consume those components. That would be really nice right.

J

So um we came across material design, material design. Is the design system supported and maintained by Google? You may know of that. So if you have an Android phone or if you use any Google applications, the design system that that is built on that is called material design and it is super widely adopted. So there is no design system in the world that has just like more apps running on that, not even a fluent UI by Microsoft.

J

uh It is really really great documented, and this is what I really love, because that means for me, as developers to say super easy to then adopt this, because it is documented and what I love about it. It cares about accessibility first, and this is something that is really near and dear to my heart. So we wanted to make sure that everything that we built is accessible to everyone: okay, So speaking about a component Library. So maybe you're not familiar with that. So what is a component Library?

J

It is a centralized repository in an environment for components which means it's a special kind of application that holds all my components or the components that I want to have in that component. Libraries library, because of course you can have several component libraries and then these app maintain a dependency to that component library that they use, and that means that makers get alerted when there is a new version or an update on a component available.

J

And this means that we really have a nice purpose, because makers can now easily discover new components and they always use the latest version of the components.

J

And we have that famous single source of Truth, which we always like to have, and that makes it also easier to maintain, because we have just like this one place where the components sit and live uh where they will be um developed, and we do not just like spread that um across several apps and then makers would just like consume those components in their applications and always use the latest version of them.

J

So um Robin and I have a little gift for you and the gift is 16 components in the component. Library um a template, app proper documentation around 5000, svgs I think Robin will tell a little bit more why we need 5000 svgs and the beautiful thing about that is the setup time for you as a maker is less than five minutes. uh So you import the component Library. You start from the template app.

J

There is so you need to change one to ten values depending on how much you want to customize that, but at least change one color value so that you can match your color scheme and then you're, just like really ready to go and if you're now just like excited and want to see that in action. This is your turn. Robin.

K

Yes, I will take over in a second, let's share my screen, and this is just where Louisa left off. um We downloaded our component Library solution, which also includes a demo app, and then we downloaded the template app, which is an MS app file, opened that app. If you don't know how to do that, it's also in the documentation and just take a quick look and then we imported the component Library components into this app.

K

We have to do this manually afterwards to link it to your component Library, so you can also update it later and then we are here with a not completely empty app, but this will be the template app. You should start every project from um and now we're gonna start building really quickly get an app bar top. These are our library components.

K

um This is the top app bar. You probably saw in Louise's slides already, and then we want to build a responsive app. So this is not from our library, but uh no I want to add here containers please use containers, and especially the horizontal and vertical ones if you want to build responsive apps. So, let's get in a horizontal container right here and don't use this pixel values but use relative values like parent.width and parent dot, height minus itself, dot y to fill out the rest of the screen. That was wrong.

K

So now we fill out the rest of the screen. Now, let's get a menu going right here and the menu is called a navigation a draw, but it's the site menu. You know from probably many different apps and then we want to compare the standard controls to the component Library controls. So let's bring in a more containers container number one and container number two So. The plan is, on the left side, go to standard components on the right side, our library component.

K

So let's bring in a button a text, input and a slider and just compare them. Let's Center it a little bit. We see how easy this stuff is when using containers and on the right side. Again we want a button.

K

Then our library text input and our slider and again we will Center those to take a quick look and the first thing you probably noticed. We have no Microsoft blue right here, no Microsoft light blue, but we have this beautiful purple and how does that work? um Let's take a few seconds to appreciate what central Hawk has done for us all and he started two or three years ago.

K

Introducing the the template system showed us how to um how to set up templates and get these colors from the beginning and have variables instead of absolute values and have one dedicated place like the OnStar property, where we can change these values and that's what I did just right here and everything that is in there and we learned from from Essentials templates, but we wanted to make it a little bit easier. Like Louise said, we only wanted to provide um I think it's 12 values. Now you can change.

K

Let's look at the OnStar property and these are the values we have to. We have to alter and I want. The dark blue. My company uses as a primary color I want a different font, but I don't have the actual font um right here, but let's take a this one that is really close, little bigger font size and we have more of those bubble buttons with a larger border radius. So, let's change that run our onstart again and, as you can see, everything changed right here.

K

This template works with a the standard, powerapps controls and it works with our component Library controls. So it's really easy to mix and match. You don't have to only take our controls because we couldn't provide any controls and some controls are so special. Like a combo box, it's not really easy to rebuild all the functionality in a component Library, so a mix and match take the best out of the standard controls and mix it with our component Library controls to achieve great results.

K

We have this one um one place like the OnStar property to set everything up and um yeah have really easy. It's really easy to change it later on.

K

If you took the wrong color or want to apply theming for another company or something- and let's take a closer look at the first component component, Library component- that we provided- and this is the button like I- call them one button to rule them all, because our philosophy around all these controls are, you have some variety and some different features you can you can use, but it should be really easy to use them and really fast to set everything up.

K

So, for example, if I want to make this button into an outline button and the fluent UI controls try to do this, but didn't really set exceed here, you can do it just one click and you get an outline button. An outline button with box Shadow doesn't look too good, so um switch that off and if we want to include another SVG icon topic, I really care about um there is this SVG icon property, where you can basically put all the SVG code in you want all the icons you can find on.

K

The internet will probably match in there and the colors are already handled for you, like you, see, there's no fill property. There's no color specified in here the Hub used to be white when it was a filled button. Now it's blue when I change back to to purple as primary color. It's purple, um but Louise already told us. We have also 5 000 material design, icons included right here, and it's in a data source was imported as an excellent table.

K

um So we can look up against this data source. We will Design icons and if we want to include a star right now, then we type in Star and select SVG path, and then we have a star in here. If you want a cooler Star, then we choose the dev star, and this may be my favorite icon. The desktop variant looks really cool and and again, as I said, um going to a fill button from an outline button. The SVG icon also changes the color because you obviously don't know what all these things are called.

K

We change to the icons Tab, and this is also in the template not as a screen to use, but as a reference screen to just go through this stuff. So if we look for a star, then you will find the Death Star right here and some variants. Okay, you so you can see how it looks in primary or secondary color and there's also another reference. A screen Sancho does this in his templates as well, some demo color screen color themes and let's take a green color right now with rectangles, no rounded edges.

K

Let's look again at our first page and you saw everything changed just with one click just defined redefine these 12 properties on runtime. You can also use this with also a dark theme in here. You can check out, so you could change online time to a duck theme or to a high contrast team. So um many many possibilities to set this up. That's it from the template app. So let's click really quickly, through this design, demo app to wrap things up um again, just giving you.

K

uh So you should use this app open it in editor mode and see how we set everything up. So you can just copy this or get some ideas from here, probably to get creative and use the site menu like this, probably and.

K

um Just the different buttons, the input controls that are provided like these two variants of the text input or the slider a new checkbox. This is that is customizable with SVG icons, a nicer toggle and a generic input frame where you, this is just the normal control, and if we select power bi, then we have an error property right here, so a central place where you can store an error property, also pretty nice different ways to interact with your user.

K

Just like a classic dialogue, a snack bar what it's called in material design, a banner you probably already know, or a side sheet. You also know from from other designer Frameworks, have some mobile, dedicated components like this time. Picker, which uses some SVG was really fun to build this thing and really challenging and another menu variant and again the icons theme, icons screen and the themes screen.

K

So that's it from the demo. I hope you like it and I really really hope you use this to quickly build really really beautiful and performant apps, so giving it back to David I. Think yeah. Thanks for listening to us absolutely.

B

Robin April Luisa. Thank you. uh This was a wait for it, amazing, just really fantastic stuff, everybody uh I know the community is just so excited for everything and to see where you can go with this really fantastic job. I think it just comes with its own little sound effect needs to have its own little magic wand, sound effects so uh really fantastic, job, excellent work uh and everyone. This is an opportunity for you to get involved too, so uh really really excited there for all the opportunities that are uh extended to all of us.

B

So, let's work together all right. Let's wrap up the call today, uh I think we uh definitely want to give a round of applause and on some cheers to our amazing presenters, Marcus April, Louisa and uh Rudolph Robin uh got his little red nose in here on the demo slide. Thank you vesa a lot of fun, excellent, all right. uh Where can you watch the replay of this because we know everybody's going to want to take another?

B

Look at all those um amazing components: well, you're going to be able to watch it in 24 hours on the Microsoft Community YouTube channel. You can subscribe today at ak.ms, M365 videos. You will not be able to download the video in the chat, so please don't try. It's only available for those that are in Microsoft it'll just lead to tears, but you can get happy tiers if you go subscribe to the YouTube channel and you'll get alerted as soon as it's available so be on the lookout for that.

B

You can also follow us on Twitter at Microsoft, 365 Dev and at m365pnp. That will also let you know. As soon as it is available. We will be posting on those social channels. The next M365 General Dev and Power Platform call January 5th, win 2023 wow just around the corner. We got one more call left in 2022, VB connection, SharePoint framework December 29th next week, at this same bat, Time same bat channel. So we hope to see you there. You can access, invites as well as direct links for all the calls at AKA dot.

B

Ms, slash, M365 calls. Thank you. Everyone I hope. If you're taking time off, you enjoy the rest of the year with your friends and family, uh you are amazing contributors, please rest and relax. We appreciate all that you're doing and cannot. Thank you enough for being the amazing contributors you are so thank you all have a great rest of your week.