Microsoft 365 Community Community Demos, 22 Dec 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Power Apps component library: Material design

Description

In this 20-minute developer-focused demo, April Dunnam, Luise Freese and Robin Rosengrün deliver an overview on a Design Toolkit Initiative - prescriptive guidance around UI principles for Power Apps. Review UI options for makers – ugly/bad/good, material design, what/why component libraries for Power Apps, and introduction to the first library with 16 components, template, proper documentation and 5000 SVGs. Download component library and template app then build your app, use mix of standard and component library controls, change app style easily in OnStart Property.

This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on December 22, 2022.

Demo Presenters
• April Dunnam (Microsoft) | @aprildunnam
• Luise Freese | @LuiseFreese
• Robin Rosengrün (EnBW) | @power_r2

Supporting materials
• Tool - Material Design | https://m2.material.io/design
• Tool - Power Apps Design Toolkit | https://github.com/pnp/powerapps-designtoolkit

Learn more
• 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

A

To go over a little bit of the background, a 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.

B

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 Louisa I'm, an independent Power, Platform consultant based in Germany I, have an MVP in Memphis 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.

C

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, my third language is SVG and you'll. Find me on Twitter under power under bar R2.

B

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.

B

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

B

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.

B

But maybe you guessed it 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 an outdated and inconsistent design and some of these out of the box controls really lack of functionality and pleasant, full appearance, but also functionality.

B

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.

B

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.

B

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 consistent, looking feel in my apps. So let's imagine and I hope you still have that usual power up picture in mind. What?

B

If our apps look a little bit more like that, what if we really had just like this, you previously clicking 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 micros now rebuild all of that, but just consume those components. That would be really nice right.

B

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 helps with like more apps running on that, not even a fluent UI by Microsoft.

B

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?

B

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.

B

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.

B

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.

B

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 type for you as a maker is less than five minutes. So you import the component Library. You start from the template app.

B

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

C

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.

C

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.

C

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

C

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.

C

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.

C

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.

C

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 Central's 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.

C

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.

C

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.

C

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

C

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.

C

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

C

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 um material design, icons included right here, and it's in a data source was imported as an Excel table.

C

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 field button from an outline button. The SVG icon also changes the color because you obviously don't know what all these things are called.

C

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

C

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 on runtime to a dark 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.

C

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

C

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.

C

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

C

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.

D

Robin April Luisa. Thank you. uh This was uh 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.

D

So, let's work together.

A