Microsoft 365 Community Development, 13 Apr 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft 365 & Power Platform Development Community call – 13th of April, 2023

Description

Microsoft 365 & Power Platform Development community call delivered on April 13th.

Demos: A SharePoint document generator as Microsoft 365 app as Microsoft Teams native app, Build a training request solution with Power Platform, and Using dynamic SVGs with List Formatting for SharePoint and Microsoft Lists.

Released: PnP PowerShell – v2.1.1, Microsoft Teams Toolkit – v5.0.0, Microsoft Graph Toolkit (MGT) – v2.10.0, 5 connectors, 8 scripts, 1 Teams sample, 3 conversations.

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
00:00 – Intro - David Warner II (Microsoft) | @DavidWarnerII
04:56 – PnP .NET library updates - Bert Jansen (Microsoft) @O365bert
06:54 – PnP PowerShell updates - Gautam Sheth (Staffbase) | @gautamdsheth
08:34 – yo Teams updates - Stephan Bisser (Solvion) | @stephanbisser
09:46 – Microsoft Teams Toolkit updates - John Miller (Microsoft) | @jmillerdev
10:54 – Microsoft Graph Toolkit updates – Gavin Barron (Microsoft) | @gavinbarron
12:14 – Independent Publisher Connectors - Jocelyn Panchal (Microsoft) | @JocelynP_PM
13:37 – Microsoft Script Samples - Paul Bullock | @pkbullock
15:40 – Microsoft Teams Samples - Bob German (Microsoft) @Bob1German
17:19 – Microsoft Power Platform Samples - April Dunnam (Microsoft) | @aprildunnam
17:54 – Together mode picture
19:00 – Demo - A SharePoint document generator as Microsoft 365 app as Microsoft Teams native app – Markus Möller (Avanade) | @Moeller2_0
31:48 – Demo - Build a training request solution with Power Platform – Phiwayinkosi Khanya Dludlu
43:36 – Demo - Using dynamic SVGs with List Formatting for SharePoint and Microsoft Lists – Chris Kent (Takeda) | @theChrisKent
58:09 – Closing

Learn more
• See the full blog post for this call in the Microsoft 365 platform community blog - https://aka.ms/community/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/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

A

B

Power Platform development, bi-weekly call, it is April 13th, my name is David Warner with Microsoft and I will be your host. Today. Let's take a look at the agenda. We're going to have a number of community updates across all of our projects, samples all of the opportunities for you to contribute and then, of course, we're going to get to picture time. And of course, what are we all here for at the amazing demos, Marcus is going to show off a SharePoint document generator as Microsoft 365 app as Microsoft teams native app.

B

That sounds like Inception to me, we're going to see some amazing stuff and then Kanya is going to cover, build a training request solution with Power Platform excited for that's the first one, everybody so make sure we give them a warm welcome and then, of course, who do we got? We've got all of our horse fans ready for who is our Warrior horse manager, so Chris Kent is back to show us amazing stuff. Let's talk about how you can get plugged in and take advantage of the resources of the community.

B

We have got Microsoft 365 and Power Platform Community videos. We've got a LinkedIn group for discussions. There are a number of open source project, expanding Power, Platform, Powershell, pnp.js, all the great things that are going to help you utilize, the technology that you love and then, of course, all of our sample galleries, teams, spfx extensions and web Parts Power Platform samples list, formatting, independent publisher, connectors, so many tools for you to take advantage of so don't hesitate. Now you see a lot of links on the screen.

B

Don't need to remember all of them, nope, not at all. Just gotta. Remember one thing: that's AK dot, Ms, slash, Community Home. That will give you access to all these amazing resources. You're going to learn more about today. Of course, you're on a community call. That means you love Community calls and we've got more for you to take advantage of the Microsoft 365 Power Platform is a weekly series with only Microsoft speakers that occurs on Tuesday.

B

We'll see a little bit more about that in a moment and then we've got a number of other community calls for you to take advantage of Power Platform. That monthly call is next week. It's gonna be live from MVP Summit, so we're excited for that and then of course, we've got the Microsoft identity platform office add-ins and the two sibling shows Microsoft 365 and Power Platform Community, which are on now and the Viva connections.

B

Sharepoint framework you can get access to all of these Community calls and add them to your calendar, which you should at ak.ms Community. Slash calls definitely do that today. Now you may wonder how can I present on these calls, because I see some people doing amazing stuff I want to show the amazing stuff, and you got amazing stuff. We want to see the amazing stuff did I, say stuff enough. I, don't know, I need to say some more stuff, so definitely fill out.

B

This form AK, dot, Ms, slash, Community, slash, request, slash demo: it is your community call. We want you to be empowered to show off the amazing things that you're doing it can be a demo, a technical pattern, a solution, a tip, a trick, something that you've learned to make your life better in the ecosystem of Microsoft, and we welcome you to do that. So definitely don't hesitate to fill that in. We will reach out to you and get you scheduled.

B

Now. Let's talk about that Microsoft speakers call. It occurs every Tuesday. The next is on the 18th of April at 8 A.M Pacific time we're going to see a trio of amazing demos on the topics of building a Microsoft teams called Q, scheduler solution for customers, introduction to Microsoft teams, toolkit V5, some new features and capabilities, and then we're going to see another Microsoft graph hackathon winner demo number trees that we're going to take advantage of and really excited for that.

B

That's been a really wonderful thing, so definitely get that uh call invite on your calendar, and you can do that with that AK dot, Ms, slash, Community, Ms, dash speakers, Dash call Dash invite okay. Now, let's talk about how you can get assistance help uh some assistance in working with the community sharing is caring is a program that we have started that provides Hands-On guidance now. What does that mean? It means that we're going to provide you together in a call Hands-On guidance on how to accomplish any number of things.

B

We've got a number of topic sessions that we have built programs and sessions for their safe space. You do not need to worry about them being recorded because they are not so it's a great opportunity to ask any and all questions and we're really looking to scale this by the way everybody trying to get in a place where we can have these scheduled at all times, but we're looking for those who might want to help about who might want to help Proctor.

B

So, if you're a volunteer, maybe an MVP, that's looking for some more credit or wanting to get more involved in community contributions. Please reach out to myself and Hugo. We are looking for some that are willing to help out uh providing us opportunity to scale these sessions, to ensure that everybody has an opportunity to learn more about how they can contribute, and once you have contributed, we want to recognize you for all the amazing work that you're doing, and that is how we're doing it with the recognition program.

B

This is a program, that's powered by credly, that same credly. That offers you those badges. When you get certified, we have them too and they're easy to get. You just need to contribute to the community in a variety of ways, and not all of them are code based. They could be blogging. They could be speaking like our amazing speakers today.

B

We do need you to opt in and register AK dot, Ms, slash, Community recognition and we'll track all the work that you're doing across all the GitHub repositories to make sure that you're rewarded for all of that. All right now, let's jump into some Project Specific updates and we're going to start with Bert.

C

Thank you David. Let's first start with celebrating uh some releases like if the Friday before the previous meeting, we finally released the version 1.9. Of course, decay.

C

Nice audio effects pretty suitable, great, so 1.9 from PNP girls decay with the several uh larger, smaller updates. uh The main updates are actually on the admin side, around handling uh API request, discovering add-ins and ACS principles and so on now course case getting kind of feature complete. So we don't see major big new things there, but if you still have questions things to, if you want to get added, let us know and we can discuss them and then take them forward.

C

Let's move to the next new release, PNP framework, one as you always raise them together and the framework is at 1.12, mainly uh smaller improvements, the fixes for the most part in the provisioning engine, because that's what folks are still using a lot all right. Moving on to the next one and that's kind of our overview now, um to be honest, I've been on a pretty long, Easter break, so I didn't do much there.

C

So if folks did great, BRS have issue spending, so uh I will process those over the coming weeks for the next meeting. So besides the least nothing that much really happened, uh but one thing to call out is our usage. I think we in March got like a new all-time high on the number of requests, so 44.4 billion requests done using.net libraries so by 150, 000 plus tenants. So that's a lot so yeah I think usage is growing and more features are coming. Then, let's move to Goten for the Powershell updates. Thank you all.

D

Thanks thanks bud, so yep close on the heels of release of pnb framework and PNP core SDK. We also released the PNP Powershell p 2.1.1 y 2.1.1 because it was Friday and we kind of made a small mistake so yeah uh anyway, Friday's deployment, so long story short uh 2.1.1 is out uh what we did with this release is we dropped support for Powershell, 5.1 and Powershell ISE, so we would encourage folks to use the Powershell 7.2 or later versions um yep. Besides, that, we've also been slightly busy with updating the set PNP commandlet.

D

So we have added support for Loop and OneDrive configuration parameters, as well as the new slightly newly released functionality related to request files as well, so all of them are available with the latest nightly builds.

D

uh We also improved the invoke PNP graph method so that you can use that to you, know, download a file or download output or get the stream get the file content as a stream as well, and then there was some slightly minor regression with the grant PNP Azure ad app site permission, so we we use that command, let to set permission. The selected sites permission and then there was just my other regression, so we fixed that, and all of that is out with the latest nightly builds.

D

um We also hit a new all-time high usage record with 40 000 tenants using it and 44 billion requests coming in this just this one month. So yep, that's pretty much from our end. um What would you David.

B

Awesome, thank you got him. Let's go to Yo teams with Steven.

E

Thank you, David uh I hope this time my microphone is working. As last time, I was kind of in the mute hell, yeah um yep same same as Bert. We have been on a longer Easter break, so nothing much new happened, um we're still on version 4.1.0, but uh what we're currently looking at is to improve our talks.

E

um So we really want to work out uh tutorials and usage guidelines for folks out there um to give them an idea and yeah some help and usage uh guideline on how to use your teams and what to do with it um and also we want to emphasize on the contribution part of it. So if you are willing to help us let uh grow and extend your teams, we definitely um be happy to have you as a contributor and welcome you, um yeah, contributing and and improving your teams.

E

So, if anything in mind, you want to improve just file an issue or send us a message on GitHub, and we definitely uh like to hear from you thanks.

B

Awesome thanks Steven all right. Let's move on to Microsoft teams, toolkit.

F

uh So this week, not so much is going on as far as availability, but next week is our 5-0 RC. uh So looking forward to that some some things to call off for there. If you haven't been following along is um you now have support for Dev tunnels?

F

So you have another alternative um that is supported by us to uh debug Bots, uh and then we also have better validation to help you catch problems before you publish the team, so you can get all the stuff that teams would normally do, but you can get it in your Dev tools, so you can catch all sorts of stuff that prevent errors.

F

There there's autocomplete uh now in suggestions just to give a little quality of life for doing our 5.0 stuff, and we have samples that support code spaces, there's some improvements, spfx and that's all on the changelog. So you can take a look at their uh working with those tools and we have some new actions for running scripts, so you can make it a little easier for controlling things and I'm hoping to demo.

F

That I was supposed to do that last hour this week, but I got sick, so Logan to demo that next week on the platform call and of course plenty of bug fixes. So that's all I got for you thanks.

B

Awesome, thank you, John excellent hope that gets better for you all right. Let's talk about MGT I think we got Gavin on the call today.

G

So we have just shipped out v 2.10.0, as our latest stable release. uh A few accessibility fixes, a couple of new minor features, uh one indirect for a direct us from a customer um needing to control some font sizes on a very specific place, which was awesome, um they've already used that to roll out a proof of concept for another customer. So it's really cool to see that out in action, we've got V3 preview one out now, please try it give us feedback. We have an oak, a known issues, issue open.

G

So if you find things in there, please let us know if something just doesn't feel right. The only way we get better is, if you tell us we're doing things wrong.

G

um uh We're really excited about this V3 release. uh We hope to have it shipped in the next month or so. Yeah we've got our samples repository growing and we've even got our first Community contribution in terms of a an end-to-end component in review at the moment, so graph toolkit keeps rolling. Thank you.

B

Awesome awesome thanks Gavin for the update great to have you on the call. Let's move over to Joss on Independent publisher, connectors.

H

Hello: everyone um we, as always have updates in the world of independent publisher, connectors and I, actually just want to share that. The listed connectors here are indeed some of our newest deployments, but super late last night that 981 number actually switched over to 993 total connectors across power, apps power, automate and Azure logic apps, so I would not be surprised if by the next time, you guys see me in two weeks we would have crossed over into that 1000 threshold. I am super duper excited we have in in status and scraping.

H

B is two new independent publisher connectors, as well as some additional ones from first party Microsoft and verify Publishers, Microsoft search, Fresco reports and smart com, doc gen. If you cannot get enough of connector content, please scan that QR code and the link will be in the chat to participate in my connector Labs call where we talk about connectors and other Power Platform products as well. The key parts of this call which, which will be next Wednesday. It will actually be right before the Power Platform Community call with David.

H

Again, we will be demoing a WhatsApp connector made by University student in London, as well as learning more about dataverse business events. Hope to see you all there links will be in the chat. Thank you. Everyone.

B

Awesome, thank you. Josh. Let's move over to script samples with Paul Bullock, hello,.

I

um So script samples is a repository where you can share your Powershell scripts or bash scripts with the community. So we now have 184 scenarios 240 scripts, so these uh scenarios that are made of potentially one or multiple scripts just to be clear on that. um So the tool sets that we we support is pretty much unlimited. But the focused around the Microsoft graph, PMP power, sharp Management, Shell CLI for Microsoft 365 and many many more and these samples do get uh integrated into the micro solution. Sample Gallery as well.

I

For that sort of increase exposure, we've had um a new set of contributions, some wonderful contributions, so we've got some PMP Powershell scenarios. So, for example, SharePoint life list item version, history, retriever by Michelle, rosinski we've got download, SP kgs, uh so there's the SharePoint framework packages from the app catalog by Matthew SRP, um get content usage within a site.

I

Collection by rational, apply a SharePoint Json view formatting by the national app uh we've got getting get getting those checked out files and the Tenant using search for Casper Larson, another sample from ganache snap for emptying your your SharePoint online recycle bin. um We've got some updated scenarios. There's two here, um because there was um uh some and some enhancements made to existing scripts uh for both CLI and PMP Powershell by villaras libutus for resetting your file, permissions uh back to the inherited state, which is super super cool.

I

So thank you very much for those contributions. You're absolutely awesome. We've got guidance on the site and to get started. If you wish to contribute- and also you can reach me on uh multiple forms, so LinkedIn Twitter uh to contact me if you need any support and remember um you know your contributions, do get recognized as part of the recognition program so claim your badge, but this is opt-in. So make sure you sign up for that. Thank you. Everybody.

B

Thanks Paul, you are awesome. Thank you. uh Bob German, on Microsoft team samples, hey.

J

Thanks so much so um a couple, quick announcements before I talk about the sample of the day, which is that we do have if you are an isv building software for sale, and you want to monetize that software uh by putting it in the team's app store. Oh, it has to be a teams app, but that's a great way to get more people using your app. um We there's a form in the upper URL in the upper right of the slide, showing how you can get free support from the team's ecosystem team.

J

If you are monetizing, your app also there's some great videos to check out on the bottom there on teams Outlook in Microsoft 365 development. But the main point is another amazing amazing demo sample by the one and only Marcus, Moller who's going to be showing another one of his great uh samples. In a few minutes. This one allows you to upload files and convert them to PDF in SharePoint uses the Microsoft graph for conversion. But what's so amazing about it? To me, is that it's our very uh it?

J

Well I, don't know it's probably the second one, but both are from Marcus. It's written in c-sharp with teams toolkit for visual studio 2022. So this is something that not everybody knows about that. There is now an awesome way to build apps for net developers, and so um please check out this sample. The URL is on the screen and please go ahead and use the team's toolkit there's a there's, a great way to get started. So thanks so much and back to you, David awesome.

B

Nice job Marcus and thank you Bob for the update. Now, let's move to Power Platform samples with April Dunham.

A

Thanks David, so we don't have any other new samples to highlight uh this week, but we do have some of the backlog that we're going to go in and process there. So we're having the future. But we would love to see your Power Platform samples, anything from powerapps canvas, apps model, driven, apps components, connectors of course, Uh custom functions, power, automate flow templates, power, bi virtual agents and all that would love to see your samples.

A

You can go to aka.ms forward, slash Power, Platform Dash samples to get those added, and we will highlight them next time on the call by.

B

Two days awesome, thank you. Excellent work, all right, optional, picture time, everybody. So, let's get those cameras turned on Vesta will take over the screen and we can wave to the community.

K

Yep absolutely- and let me get the picture in here, get good. Now, it's pixel precise. We have 50 seats in a room, Bob you're, trying to show something which says hiding you don't do that.

K

It's trying to you're trying to be too clever a few more seats free on the room. Very much it's free few more, a few more I can see a cat on the table as well. That's always good. They are like that. It's a large cut by the way. uh Let me actually put the camera on as well, and let's do the the capturing three two one and we'll do a capturing out of this. So thank you, everybody for joining good to having a call.

K

Once again, hopefully we'll see you in the in-person conferences, with a lot of happening this spring as well. I can see the cat jumping around thanks. Everybody awesome stuff good to have you in the call really really cool.

B

All right, let's get back to our regularly scheduled program, we're going to kick off our amazing presenters, we're going to start with Marcus and it's going to be about a SharePoint document generator as Microsoft 365 app with Microsoft teams native app Marcus. Take it over.

L

Okay yeah today, I want to show you um if you have a document generator. This is the second time because last week, I was already presenting a similar app in the SharePoint framework version. But today we are talking about a real teams application, um but it's still usable across various Ram 365 products, and we have some additional capabilities.

L

Of course, today, quick intro about me, my name is Marcus Miller I'm, a Microsoft 365 developer expert for abernard in Germany I'm, a Microsoft MVP since 2021, and you can reach me on Twitter or via my blog and quick ratio, and also an introduction into the different scenarios for those Microsoft 365 across apps. We can render the same app or slightly different on various products, but it's only hosted once and we can do this. For instance, with a personal app and last week, I showed you how to do this with spfx and today.

L

I want to show you how to do this with a team's native, app I call it this way, because it could be either your teams app or teams toolkit app and additionally, what I can show you today and I. Never I will concentrate on is that we also have the capability of search based messaging extensions to enrich our compose box in either teams or Outlook, and this is where I will introduce to the document generation Revenue process.

L

So let's kick the demo off and only very quick I will show you something similar and last week last week, I was presenting you, the spfx office generator today, I show you this one in teams, it's slightly different, because here I'm, using the out of the box available fluent U I react. North Star controls instead of the normal, fluent UI controls last week, and then I quickly enter some dates here.

L

Come on, but also Enterprise same lag here. You can also manipulate it. That way, we have a great T and we have a description. We don't make it too long today, because we want to quickly rush through here. Kick this off document is generated, a link is there. I can already also directly jump over and show you that guy here, it's our pnp4 demo um not yet visible in work, but we can see our metadata here. We can also quickly open it here.

L

Our local web access does not show the metadata and I'm skipping today open it in word um there you in what desktop app you will directly see the metadata included as well.

L

We can render the same app in Microsoft Outlook there we have an app button. We have our offer creation, your team's version- and here we have this same app and I skipped to add another document, but I will quickly show you the third option.

L

This is in Microsoft 365 there. We also have apps and we also have our personal apps here- the spfx version from last week and the offer creation your teams from this week- and this is the document generator now, let's jump and therefore we can close this um now, let's jump to the second capability, the search based messaging extensions. So when we have installed the app and also added the app to a specific team, we have search based messaging extension here or in fact they are there. Even two. We have the review and the publish ones.

L

Let's start with the review thing and let's maybe pick a document from last week. We can pick it and we have it here as an Adaptive card. What's jumping over a bit.

L

And this is already no. This was the review dock. Sorry I picked the wrong one. Let's simply do it again come on.

L

Let's take that one from today we have to send the message. First, then we cut this in a reviewed state and with universal action model of adaptive cards, it's directly updating and showing up the review date. We can also quickly check the metadata here there. We have also our review date, which was just ended um during this process, the same Works in Outlook.

L

In other, we jump back to our mails, and here we can create this in a new mail. So we have in our compose box. We click apps. We find our your teams generator and now I show you also. Maybe you haven't seen this so often. I was also not aware of that. This is possible.

L

Till I take checked it out here we have the possibility to even have two search base or more search based messaging extensions, so we can switch here from the review one to the publisher one and for this process, I directly classified my documents as review, and this is currently in public preview. So I have to send it, unfortunately, to myself, because I'm the only developer preview user sent the message to myself.

L

Should occur, my inbox yeah, then I can click on publish this takes a bit longer because publish is not only at metadata modification. Normally. This should work in a way that it's a updating the file, also as a PDF wondering what gets wrong here. At least we have a submit date here we have an offering submitter and what might get wrong here?

L

What I, also try to do is no, that's also fine, so wonder where the error message comes, but this is also what I wanted to achieve that I not only set the document to publish in the terms of metadata I also want to have the final PDF document, and here you can also see the metadata inside I'm using a simple Office document template here.

L

Of course, this can be done much prettier than I did these were the capabilities to show you today and here the additional ones in terms of adaptive card and Publishing, which is not possible that way with SharePoint framework, so I couldn't show it last week, but now, let's flip and quickly, introduce you how this gets realized. The first thing once again, is the SSO part for the tab. Application um I already showed this slide a while ago, but I want to stress this once again when you achieve SSO in a teams.

L

Tab, please please do everything you can in the back ends or server side. So the only thing what you should do client-side is get a bootstrap token, which is only the identity token and then shift it to the server together with information. What you want to do, and finally only retrieve the final result- and this is what I'm doing in my tab application so like generating the dock here.

L

So once again, do not do anything else, client-side what I'm additionally doing here I'm using behind the scenes, because I'm coming from the SharePoint framework sample as well I'm using behind the scenes most of the things I'm using SharePoint, rest API, and it's simple. It's quite easy, also available that you use teamstop SSO with the SharePoint rest API instead of Microsoft graph, and what I'm doing here is I'm simply retrieving the site domain from my context and then I'm constructing from the site domain.

L

The scope, so I do not have a graph microsoft.com default or something like that. I have a yeah, Marcus, Miller sharepoint.com, all Sites right, something like that scope and then I directly get a token which I can use against the SharePoint rest API.

L

The second part is the the SSO for the bot, which is lies under the messaging extension, um and here I want to quickly introduce you what happens um for the sign in the sign in is handled with the bot together. Therefore, you need to establish a graph connection which you see on the right side in your Bot there. You have your client secret, your client ID and your token exchange well, which is the the endpoint URI and also the tenant ID, is necessary in this. Here.

L

I use a graph scope for this by the way- and this is a a connection which you establish in your Bot configuration and then code. You try to receive a token response, and if you do not have one, then you send back is simple window which looks like this that the user has to sign in and consent this app man. This happens most lots of times. This happens.

L

Only the First on first usage, what's important to achieve those teams, applications and then extend them as Microsoft 360, fives apps I cannot stress this enough is we need to have a teams manifest version, 1.13 or above and then in the first part. Here we have our simple static. Personal tab called offer creation. This is the document generator I showed in the beginning, and additionally, we have our compose extensions, which is here in terms. This is search based messaging extension, which is, on the one hand, of a review part and on the right.

L

It's the offer published part and those are search based, messaging extensions. It's um yeah! You can notice this by the type which is query here last, not least as I showed two demos now today and last week, and to compare this a bit some general considerations on this. Why we would this or that one um especially um for the front end part.

L

Of course, SharePoint framework is simplified in terms of in terms of Hosting, but it's client-side runtime only so you do not have a backend and it's also simplified in terms of authentication, but it can be a problem because the authentication is more or less owned by Microsoft, because you have to use a service principle which comes from Microsoft and not every tenant administrator or not every company, especially zero trust scenarios. This is a problem. Do not allow this at all.

L

They have Azure ID policies which prevent this sometimes, and then you need to switch to a back-end version where you have your own application, registration and use, and there the teams apps are much better and much more comfortable. But when you use this backend to switch back to the hosting, of course, you need to take care for hosting. You need to establish an Azure app Service, uh something like lists.

L

You need to take much more care for deployment processes and so on, and these are considerations that I would take into concern when deciding which way to go When developing those kinds of apps. Last, not least, my resources.

L

It was a longer series but mentioned here, two blog posts out of my series on that app, um the GitHub sample in the PMP repository also available since a while already and the general Microsoft documentation, as always on Microsoft, 365, apps and starting with the overview, and that was from my side. Thank you.

B

Awesome Mark is very well done. I know this is a fast demo, but really hit it home. So thank you very, very much all right. Let's move into our next presenter, puree and Cosi is going to show us how he built a training request solution with Power Platform, and it is his first demo everyone on this call. So, let's give them a warm welcome. Take it on over my man.

M

Hello, everybody, uh it's a pleasure being here to join you guys. Let me just stream a slides, so how about me my name is I'm an I.T student at DT, which is the Japan University of Technology in depth and uh kwazulu-natal South Africa.

M

um My powerapps developer I currently have three power: app certifications to my name, the pl900 to pl-100 and the pl200 on the low code Enthusiast. uh Since last year, I made a getting introduced to powerapps platform, I loved it from the get-go. So last year we had a boot camp on campus. We were I, got introduced to powerapps and we were required to solve different problems using power apps.

M

So my problem, uh the one I had was I, had to automate a approval flow for training request in a company, so problems that were faced with this company employees had to fill to manually. Fill in the form for forms could get lost. There are approval process could take ages because the approval rules attempts even forget to approve those requests and, lastly, uh makeup statistics, because the data was just papers and all that it was hard to get an overview of how many training requests were made in the company so going forward.

M

uh This is just some of the part of the business requirements that requires required to fill uh an electronic capture of training request by employees, team leaders when it is to use form uh approval of training, request by department manager and Learning, and Development managers, confirmation of training, bookings, attachment of booking details and feedback to the requester and, lastly, statistics, training requests.

M

So my solution, uh part of my solution, I, had a canvas, app or automatic flow for the approval flow and, lastly, Apple bi Dash product or which I will demonstrate to you guys in a minute. So my power mechanics app, uh consists of a form that allows users to save those forms this draft and can pick it on and submit them for approval.

M

It allows users the ability to attach supporting documents for their training requests and it allows uh users to capture requests for individuals and groups, so this is just a sample of the power automate flow or what it has two right, including notifying the requester, in this case the user uh on the status of their request and also the power bi dashboard uh I had to show statistics and, namely the number of training requests submitted, faces, completed the cost versus uh the cost or value of training, request, submitted versus completed and a number of people trained per month and year.

M

So it's time for the demo, I'll just switch uh to my app. Let me just go back so this is my canvas app. uh It is some sort of dashboard at the bottom, where you can see if you have any trust, rejected, requests, approved, request and submitted requests. You can see all this data in real time listening to database table where everything starts so I'll make a simple request: oh enter my training provider.

M

Oh saypl, 200 8.

M

M

Should be better than this that date, but if I enter an entity that is greater, that is that date out. You will no longer give me that error and everything will proceed is normal, so here I have to enter the training course I'll say 5000.

M

You can type in the scenario individual booking now right now, I could choose to upload a file not to upload a file, but I can just load a file.

M

So this is my document of submitted, benefits accurate, something which is beneficial like.

M

So here I have a choice: I could choose to say this is a draft or, if I turn this toggle on I close up. The request in this instance I, want to submit the request for approval after I've submitted. My request I now see that the number of requests submitted has increased, which means ifo and I go into my request.

M

Site and I can see the currently submitted request here, which is actually pending, which is zoom out to be which is currently pending, as you can see with data, and they can go into details to view all the details and I still have my document here. So what should happen now? Let's just give it a second. An email should come true. Only department manager, side, we'll just reload yeah.

M

Very large, as you can see, I have my tech. Camera right here and I also have the request here. So this is basically an Antarctica in Outlook, so the manager over here on this adaptive Academy view the details of the training request, download the request to the return request file once again.

M

Okay, download the chain request file if I want to then they could either approve or reject the request. So, as you can see, I can read out all the teachers. I entered the amount, uh the calls I want to study in the training provider and they start and end date and the type of booking that I'm making. So if the department manager rejects without adding any comments, it will bring back a response telling them that it should add in comments.

M

As you can see, please get comments in order for them to be able to reject this request. But in this scenario, I wanna approve the request. So every comments.

M

I wait for you to submit now my response has been submitted, then I have I can go to the Learning and Development manager is pay. uh The initial approval flow that the company had before. So let me just wait for this to a lot. They can see it just came true, and the development manager can also see the same details.

M

So uh in order for this request to be approved, both the department manager and the Learning and Development manager have to approve this request, so in this, in instance, I'm gonna approve, but also, if I try to reject without adding any comments.

M

It will give me the same error.

M

As you can see, but if I approve I, don't need to add comments, I can just submit and just close this.

M

And once just that is done as the request that I can check my emails, real quick.

M

As I can, as you can see, uh I get a notification for every step that was taken. As you can see, the chain request details. This is a comment that was made by the department manager, a learning development team making comments. Hence it is uh blank you use it, so it also tells me that my training request for the PO 200, who has been successfully submitted. This notification comes through after submitting the training requests.

M

So after that, if you go back to my app and it just changes or go to approved, give it a second, you can see that my training request was approved and I can read through I just approved and yeah so from here as part of the request, uh it has to be a power bi dashboard, where you can view the statistics of training requests in the company. It's an interactive dashboard, meaning if I click, uh because, let's say approved, uh just give it a second.

M

The data will load and change and show only oh can you requests that have been approved by click on submitted, which is because it's just been submitted without any approval process of without being rejected. I can also see the same thing and over here on my filters. I can adjust the air the dates as I want and it changes the data accordingly, as you can see, the charts have changed accordingly and it can clear all the slide.

M

The data that I can also filter using the department in this case since I only have one Department in my example, which is just the IT department and click on it. But if I click on the plug Department, it's gonna reload and shows me data like this, which is that uses inconclusive.

M

So that was my app I'll. Also just demo, one feature the saving as a trap feature so going back to my app I. Could save this job see.

M

That's the date.

M

Add date, the training cost s and you've just enter the benefits.

M

Which this time set up to attending the toggle on to submit just save you to start and once I've saved I can see. I now have a draft I got back to my request. Actually, I click on my drop tab. Give it a second to load. uh Let's go back to my I, can see him about I dropped request here and I can modify it to receive it change a couple of things.

M

Maybe, instead of PL, 600 and I, can save the changes now you can see here is my changes have been updated and also I could submit if I want to submit uh this request for approval. Let's accept this and click on up this request.

M

Since my request has been submitted and you know, download kicking uh the power automate flow again in the background. uh Thank you for your time. Ladies and gentlemen, Ah that's what I do showcase you guys today.

B

All right, if you were kosi, thank you so much really great job. Welcome to the call thank you for sharing that with us excellent work, uh I'm sure that those in the chat would like to ask some questions so we'll let them do that and have an opportunity later uh for lack of time, we'll move it over to the one and only.

B

Take the stage.

N

All right, let me share this. Your screen, you guys, let me know when you see it: oh yeah, I'm, Chris, exciting list, formatting uh things and stuff perfect. Okay, so we head over to our classic uh uh Warrior horses site and we're definitely not beating a dead horse with this joke. Oh my gosh, that's hilarious! All right! Moving on all right. uh What do we got so the uh the horses as we don't?

N

They do uh Wars businesses and businesses over here and as a part of that, you know they manage uh what they do in the battlefield here in office 65 as we all do right. So if we head over to our targets list, this is a list where they're trying to determine you know what are the most strategic targets to uh to attack uh in the upcoming quarter.

N

All right, so we've got a list for that and what they've done is they've decided to kind of score these on uh six different kind of principles that make these things more or less attractive uh to be a Target, and so we've got all those numbers that made them giant just so we could see them and that's exciting. uh Just so.

N

You're aware, under the hood I named all of these uh score, one score two score three score: four score: fives, six, um just to make things easier when I'm writing the format here in a moment. But what would make this easier to read right now? We've only got uh what five items here if we had a whole bunch, this gets really hard to determine any kind of value out of this right, especially if the scores aren't all even like I've got them right here for our testing purposes.

N

So what I wanted to show is how we slap a radar column on here. Oh just kidding, there is no radar column. Oh no I'm, just kidding it's all the rules, we're gonna make one ourselves. So what I thought would be interesting is if we take a look at what is the process to make a format? uh That's considered a little more advanced, so we would do a dynamic SVG right. So an SVG is a scalable vector, graphics.

N

It's something that is fully supported in this formatting and by fully supported I, mean I've, got the Bare Bones in there and it's good enough for what we're going to do today.

N

But what I want to do is kind of clear it up, because sometimes people look at the end result and think that's way too complicated for them to have ever done so. I just wanted to go through an example of how I might create one using some tools and we'll slap it all together. So let's do it so. The first thing I'm going to do is I like to start with my svgs.

N

You can always download svgs from a variety of sites, but for this one I'm just going to draw it in a free tool called inkscape. So this is an open source tool here and then, if you're not aware, svgs are just XML documents right here like this. So I've gone ahead and just saved this blank SVG over here. So we can see what is being output. Okay.

N

So let's take a look here. So if we want to create a radar chart where I want to plot all six of those uh scores, I need to create a polygon so we'll create a polygon. I've got my six corners already selected here and I'm just going to drag one of these out. That sounds ooh. This created this as horizontal as possible.

N

I'm just going to use the uh the bottom there to that is so beautiful, perfect, okay, so now I'm just going to take this giant thing, I just made uh right and we're going to go over here and we're going to uh oh I forgot to tell you I've already done it, but very important for this is we'll go into your preferences and we're going to make sure we go to our input output and we want our SVG output and we want to make our password format.

N

Absolute that'll, make more sense here in a little bit, but just keep that in mind before I forget to tell you that there you go all right so now, we've got a exciting uh I, don't know what you call it: a stop, sign type shape, yeah hexagon, that's the one all right!

N

So we've got one of those and we want to put this kind of in the middle, uh so what we could do is we could come to our align and distribute menu right there, we're just going to hit relative to the page and boom boom, we'll put her in the middle. So let's make this a little bigger. So we don't need to see that this, the XML right now I'm going to copy this thing, because I want a few more of these all right, so I'm going to copy I'm going to paste it.

N

It goes there I'm going to Center that one to all right and then I'm going to scale that one you notice, I, don't have any fill and I've just got the stroke. That's kind of the default in here.

N

If yours is not the default, you'll just want to pick that, so what I want to do is I want to transform so I go to my object and I go to transform, so I can get this and I can scale it, and for this we're just gonna and again this part is less important, but I think it's good to see. Let's scale that proportionally all right and apply that so now we've got a smaller one and let's paste another one on there, all right. Let's go ahead and scale this one to 50 percent.

N

All right so we'll apply that and let's uh align that one as well, and then we come back over here. Let's do one more just for fun all right and we'll put this one at 25 right. You could vary this. This is just for uh what we're trying to do.

N

Let's go back over here and let's enter that one as well, so wow wow, wow, okay, so we've got this that's great, and if we were to save this, let's go ahead and save that, and let's get that back to that side view where we can really uh see. What's happening here uh now we can see, we've got these complicated paths that got added one for each of those shapes they've got these transforms in them all this extra junk.

N

We don't care about and they're all grouped here and I mentioned earlier, that, while we've got SVG support, it's a bit Bare Bones and so one of the things we want to make sure is we're always using paths. So if you end up using an object, like we add labels to our chart, which we're not going to do for time here, you'd want to convert those into a path and so on.

N

But then the other thing is we, don't we don't have any support for transforms, so we want to get rid of those and get rid of these groupings. So let's do it. So the easiest way to do that is I'm, going to select everything and I have an extension which I'll link to at the end here, which you can install in here, modify path, apply, transform and all that's going to do is going to go through those paths and ignore that and that's an exciting error and it's going to remove those transforms.

N

So when I save this right now you just see we just simplified that dramatically. These are now drawn absolutely so these are the points we want to draw our shape in don't worry if that doesn't make any sense, we're just going to cut and paste those things so yay all right. So now we've got that there now. The last thing I'm going to do is remove this grouping, so we can do that by editing the XML structure.

N

So we expand that group oop and we're just going to make this window a little bigger there. We go all right, we're just going to move each of those out get out of there. What are you doing? That's just silly right there we go, get rid of that and we'll kill that guy and if we save that now we see boom. Now we got rid of that group. That's great, and the last thing we want to do is make sure that this thing is centered correctly.

N

So we're going to go document, properties and I'm going to say resize the content, all right, that's going to make that whole document. That way, that's going to make our view box, but the way we want and we're going to save that now. If we wanted to go a little simpler here right, we can go up here.

N

We can just save as and we're going to choose instead of an inkscape we're going to choose a not optimized, because that's going to get rid of our absolute path, so we're going to plane, I'm going to hit, save and yeah replace that sucker boom all right. So now we've got an even simpler SVG right that describes this okay. So now we get rid of inkscape bye. We don't need you right now. uh What we're going to do is want to use this now.

N

This is not a Json format, so how am I supposed to make it work magically right? Well, good news! We have an exciting tool over here. If we head over to AKA dot, Ms slash list, hyphen formatting, uh we end up at this beautiful site and at the very bottom here we've got those tools link if you click that we have this kind of hidden tool HTML to formatter.

N

This allows you to paste HTML or css in both and output that as Json now you you can't always just take it directly right, but it gives you a lot of the way there, which is awesome. So if I grab this guy all right, let's copy that sucker boom and paste it over here in the HTML and then we're going to hit run all right and that's going to generate it's basically going to map all of these things into the special syntax.

N

We need we're going to hit copy on that and let's head back over here so now, let's just go ahead and apply it to this column for funsies all right, advanced mode, and let's make that a little bigger all right.

N

Let's paste that in and preview that oh, we got an SVG, that's starting to show up all right, so now we're getting somewhere now, there's some extra stuff here we don't want we're just going to get rid of like, for instance, we don't want debug mode that always get to add it with the the tool and I don't want any of these Styles I got to add it to the individual paths I'm going to get rid of all those bye-bye see ya.

N

This is why we didn't really care about the stroke, color or the stroke width, because we were just gonna, take them away, and if we preview that now, what have I done right, don't worry. uh What we've basically done is we've taken a default fill, and so, let's get rid of that, so let's add a style to our SVG right. So, instead of style, oh, let's be careful where we hit our tabs enter all right and we're going to hit uh fill in this case.

N

We just want to transparent all right, and then we want a stroke, color right and unsurprised. We call that stroke all right now we're going to call this. If we just said red right, we can see there, we have a red stroke, that's exciting, but we could go even better or if we say this magic phrase of current color with a capital S the lowercase c, a Capital C, then we could pick up whatever we have as the font color right. So that means that we can use cool things like attributes.

N

Oh gosh cancel there and we're going to enter and we're going to type in class and we're going to do something: fancy like Ms font, color, neutral primary right. So that way we're using a theme color- and we do that because we use the current color it gets picked up. Boom boom boom. That's exciting! You know we can change the size of this thing right. So we can say uh width on this is where it's going to get huge. So we can see it 400 pixels and we're going to say our height.

N

It is also 400. Pixels, oh got extra colons everywhere colon City all right now, and that made the uh the whole box bigger, but it didn't actually change the scaling right and that's where we're going to use something called The View box.

N

So we added to our attributes here view box and for this value this is what's going to do some magic scaling for us, so we just head back over here all right. We just grab it right out of there. We just need that view box exactly as inkscape made it for us boom and we'll put it in there view box, and we preview that now it scales appropriately and let's just scroll that away and I made that huge design, that's cool all right!

N

So now we've got this wow, we drew an SVG and if that's all, you wanted to do mission accomplished right, uh but if we want to make this thing Dynamic, which we definitely do, that's what we're going to look at now, all right. So the idea is these values should map right on here and to make that a little easier. Now, this one's only got these few lines. So this is fairly okay to see.

N

One thing I like to do, though, especially when working in any kind of form, I think it's complicated or lots of children um is I like to add comments. Now, your first, you might look at that. Go the comment. Oh my goodness. How is that possible? Well, the the way it's possible is any property that doesn't actually use is just ignored, so you can add anything you can call it whatever you want. I called it comment. I'll just make it obvious what I'm doing, but you don't have to call a comment.

N

You can call it uh Toby's special notes, I mean even if your name's not Toby, that's totally a possibility for you all right, so we'll say ring three ring two ring one and we'll say the inner ring ring is zero right. So that's where we want our values. These are values from zero to three, and so that's how we want to plot those. So that makes that a lot easier to kind of figure out where we are on things again, just to prove doesn't change. Anything doesn't break a thing now.

N

Let's add our Dynamic one all right here, we go. Oh man I'm almost out of time, so what I'm going to do is I'm going to do is very, very quickly and then we're going to move on from there. So the idea is, if I were to paste this right and I call this uh scores.

N

We'll move on I can make this into an expression I just with an equals when I start building this as a string so really I'm, just going to be building this by string, concatenation and I could do a series of if statements and copy each one of these individual coordinates down now again I'm out of time, so I am just going to jump ahead and grab one that I already did instead of making. You watch me cut and paste everything paste and let's preview, that okay.

N

So what we did was that thing is we wrote a series of if statements and what you didn't really get to see is if you use the the control F here, you could help yourself by highlighting things right so everywhere you need to see something right is greater than or equal to three. uh You can use that and that can be really really helpful in sorting through what gets to be a lot of text on the screen.

N

Okay, so there we go now we have this and it previews that so now we have this exciting thing here. Let's save now, one of the things I didn't mention is that these formats actually randomize when you click on them. That's uh so I can randomize the values here, so you can just so you can see the uh that it is drawing it dynamically right. So that's pretty cool. So the idea is, we took it from inkscape.

N

We ran it through our HTML to formatter to make that easier as a format, and then we customized it by just doing Simple string, manipulation and uh one other thing I'll mention here. We don't have time for it, but I will show you that this could be done. The exact same type of thing in powerapps, so I have a component here and you can see I've just got the SVG and I'm doing with switch statements here, but we're doing the exact same thing and that allows us to have a component. That's Dynamic right.

N

It has its own properties here. So we can say this is a one instead and it'll redraw here in powerapps as well. So you see same principles all over the place. It's very exciting, all right, let's wrap it up with some slides all right, prepare an SVG use that absolute path make sure you use view box only pass, so all the other fancy stuff like text or circles.

N

All that needs to be converted to paths before you import it into the list formatting again using a tool like inkscape, that's pretty straightforward and use that fancy current color and there's is the tool I use. Those are the tools very exciting, feel free to add those comments. Any extra properties are ignored, so it doesn't have to be common.

N

So if you're just trying to track like hey this, is that even if it's just while you're doing the uh the development of the format I find that extremely helpful, because if I look at it a week later, I won't remember what that is either all right. So finally, here is the links. So this is the link to inkscape. If you want to download it again, it's free it's open source. Here's an extension, you literally just download two files, I'll put them in your uh your app data folder and there you go.

N

That's it for me. Whoa.

B

Awesome, thank you. Chris always entertaining a jam-packed shortened session, but we appreciate it uh giving us everything from yep.

B

Chris and I will be the uh the Daft Punk at uh the upcoming conferences, so you can look forward to that. Thank you. Everybody for your contributions. Chris took us through colon city, which is the capital by the way, all right done with the jokes Marcus by winkowski and Chris kin. Thank you for your demos today excellent job. Now you may all want to continue the conversations with them. We have that opportunity for you. We have our community called conversations feature. These are dedicated form threads for each of these demos.

B

You can interact and collaborate with our presenters and others who might be interested in what they presented can use the QR codes. You can use the URLs. We will put them in the chat, absolutely go and engage with them, even just letting them know that you appreciated the hard work that they gave today. We also want to know if you are liking. These calls so give us your feedback rate. The call content provide us with what you're liking what we can improve on.

B

We absolutely want to hear more from you and ensure that these calls are something that you're all enjoying and are set up to be something that you want to attend every single week. Thank you. The recording will be available in 24 hours on the Microsoft 365 and Power Platform Community YouTube channel. You can absolutely subscribe at ak.mslash. Community videos do not try to download it from the chat thread in teams.

B

It will just end in sadness unless you are a Microsoft employee, so definitely go subscribe and you'll be alerted as soon as the newest video drops follow us on Twitter m365pnp, as well as updates on LinkedIn AK dot, Ms, slash, Community, slash, Li, the next M365 Power Platform bi-weekly call April 27th two weeks from today same bad times, a bad Channel and, of course, the sibling BB connection, SharePoint framework April 20th at 7am, zip time as well. You can always access them all, get them added to your calendar, AK, dot, Ms, slash, Community calls!

B

Thank you, everybody for being the best part of our day and keep up the great work we look forward to seeing you have a great day.

A