Power Apps Design: Make Your Power Apps Look Better With This 1 Tip

what's up everyone april here welcome or welcome back to my channel where we talk all things the power platform in microsoft 365. in this video i'm going to share with you one big thing that you can do to make your powerapps look better instantly stick around and you'll see what it is so what's this one thing that'll instantly make your power apps look better it's pretty simple it's stop using the defaults this is the one thing that a is not only making it a dead giveaway that the app that you're running is a power app but b it's making it not look the best and you'll see this in many different areas so all of our galleries for example they have a same standard look and feel you have a blue horizontal line across and you have this blue arrow and same thing for a form control we have a very thick blue square border around all of our input controls and this blue shading on our drop downs and all that and we have the good old open sans font for the default font so one thing that i try to do in all of the applications that i build in powerapps is first to align my colors and themes and fonts and all that with some kind of brand standard so if i were wanting to revamp this timesheet gallery here the first thing i would do is change this background color to a color that matches my brand standard and away from this blue so i can adjust the fill property here in the lower right hand side and rather than using any of these standard colors that we see from the color picker i'm going to go straight to this custom option and i'm going to put in my own custom hex code so let's type in a new value here and we'll see that i get changed to a microsoft teams ask purple next thing i'll do is i'm going to change my font so if we look at this label control and click the drop down we see that the default four fonts when you add controls in is open sans and if we click the drop down we see all the other fonts that we have available to use now a big tip here is we're not limited to using only the fonts that we see in the dropdown we can actually use our own custom fonts and it's pretty simple to do so when i have my label selected if you go into the properties drop down in the upper left hand corner you'll see an option for font and if we look at what's in there it's font dots and then open sans so we can simply not use the font dot because this is all the default fonts available to us so we can remove that and in double quotes we can just put in the name of the font we want to use so maybe i want to use a font called brush script empty and you'll see as soon as i put that in double quotes it changes my font and that might not be the best option but i just wanted to show you a font that is distinctly different so you can see the difference there the only important thing to know here is you want to make sure that you have a web safe font as your backup so even though this can accept custom fonts you do have to have those installed on the computer for those to work so make sure that you always are using a web safe font for this and i'm going to change this because that's not very readable back to another font like calibri or something like that and then we see that gets updated so so far we've changed the color and the font now let's look at how we can address the look and feel of this gallery to make it look a little bit better the main defaults of the gallery look and feel that are making it not look the best is a horizontal line that's breaking up the individual items and this icon here that's designating how we can open up the item so on this separator which all it is is a rectangle control we can actually adjust the height of this so i'll go over to our properties pane and in the height property you see it's set to one right now let's just change that to say 100 and now we get this nice big rectangle that we can say drag up so i'm just going to take this and i'm going to drag it up and have it kind of cover the whole gallery then what i'm going to do is we're going to go over to our properties panel again and we're going to change the color of this to transparent so then it kind of just disappears but we're going to open that back up that separator 3 and now we're going to add a border around it so you see the border value is set to zero let's add a border of say two and for the color let's make this a grayish tone maybe this gray right here and then we'll just make a few tweaks to the width of this so i'm just going to kind of drag this here and drag that a bit that way and you'll see where i'm going with this we pretty much just added a box type effect with some of the out-of-the-box controls inside of our gallery so it's starting to look a little bit better here and i'm going to actually move this i'm going to click on it in our tree view and i'm going to click the three dots and we're going to go to reorder and we're going to send that to the back so that our text and our labels are in the front and then i'll just drag these around a little bit and kind of move them from the edge and that's already starting to look a little bit different a little bit better the next thing that i'll do is i'll replace this icon here and i'll use something else there's quite a few built-in icons as you can see here but what i like to do is use custom icons there's a site called flatikon.com where you can get a ton of free icons to use inside of powerapps so let's just search for an icon called maybe details because that's really what we're wanting to do in the galleries we're going to open it and get more details so kind of like this one this is pretty common in web design for an icon here so i'm going to download the png and to use this we're going to go back over to powerapps and we're going to click on our media tab and we're going to click upload and point to that icon that we just downloaded now we're just going to click and that will add that into our gallery and we'll just play with the width and the height a little bit so i'm going to shrink this down to about 35 by 35 actually it's a little too small let's try 50 by 50 and that looks a little bit better and so we're going to replace that with this and we'll put that say maybe in the upper right hand corner now let's move over to this form control this is another area where we should tweak some of the defaults to make it look a little bit better i think some of the defaults with the text inputs really make this look a little bit dated personally i don't like the thickness of the borders of these text inputs or the color so one of the first things that i would do i would come into these individual cards and i go to its border property and a lot of the times i'll change the border to one instead of two and then in the color i'll click on that and you'll notice since this is a form control we do have to unlock these cards so it's one little extra step so that we can make some of these styling changes but once we do that now we can override the border color the only difference here is it's using a formula to dynamically set the color so it has error handling built into this control so it's going to have a border of a red if this is missing required information otherwise it's going to inherit the border of the parrot so if i wanted to override this i can put in a color say like gray and you see that instantly updates and makes it look a little bit better the other thing that i'll do a lot is i'll play with how this input looks i might do a rounded corner we can do that by clicking on the input control scrolling down on the properties pane and you'll see an option for border radius the default on this is 0 but we can add say a 20 to that and then we get a nice rounded corner effect for our input and there's another important thing to look out for in the defaults here and the inputs is when we hover over them you see it has this blue shading when you hover and a different blue shading when you actually press into that so the blue shading is on around the border itself and inside of the control this is another area that you probably want to tweak so that the default matches your brand standard so how we do that is in this input that i changed here if you go into the properties panel in the upper left hand side you'll see three options for hover border color hover color and hover fill hover fill is the background shading that's going on so if we click on that property you see it has an rgba value here so i could override this say to a light gray instead and when we do that now if you see if we hover over that field it's going gray instead of this blue color and then we can just do the same thing for the hover border color changing that to whatever we want so i might do a dark gray here so already looking a bit better and also you might want to adjust the height of these controls i find that they're a bit tall so sometimes i will shorten them just a little bit to give them a more modern feel same goes for the different types of controls we have so here we have a drop down and you'll see that that is colored in that very stereotypical blue for the drop down so we can change that value i'll show you how to do that by clicking on our drop-down control and we'll need to go to advanced and unlock the card to make this styling change then we'll go into the upper left hand corner in the properties panel and we're going to look for a property called chevron background that is this blue background showing here on the drop down so i'll show you another way that we're able to put in colors if in the properties panel you want to put in a hex code we can use a function called color value and then in quotes we'll put in that value here close out the quotes and close out that parenthesis and you see it changes my color there and finally to control the shading of the items itself from the drop down we're going to go to our properties pane and you see we have a property called hover fill so that is this light blue and let's just change this to maybe a light gray now if we play that again so we have our nice hover and then when we hover over these it's a basic light gray color one more default i want to show you that you want to override here for your drop-down controls specifically and that is this whole text that says find items ideally i always try to personalize this based off of the drop-down control that i have now this is called placeholder text so to override this in our dropdown controls we're going to go to our properties pane and select advanced and this is what we're looking for here input text placeholder we're going to override that and instead of saying find items make it a little bit more descriptive so this field is called bill to so i might put in search bill two and then of course we wanna do the same thing with our buttons this is the standard look and feel that we get in powerapps for our buttons so we wanna make sure that we go in we're overriding some key things like we've already did throughout the app so far with changing the color to be a different color changing the font so i might change the fill this button to match that purple color we've been going with and i usually adjust the border radius here as well either making it more square or even more rounded i personally kind of like the rounded effect for my buttons there so a border radius of 40 looks pretty good to me so again this might seem like a very simple concept but it truly is the biggest way to make your power apps look better so with these concepts that i just showed you you can make a power app that say looks like this this is a conference scheduling application that i built to mimic the experience that you see when registering for ignite if we didn't have this big powerapps ribbon at the top which quick tip you can hide by adding and hide navbar equals true into your url then you would never know that this was a powerapp the session scheduler screen is using a lot of those design concepts that i just mentioned what you're seeing here is actually gallery i've completely customized the look and feel of the gallery got rid of all those horizontal lines the next button and all that i did the same thing for this input you see i got rid of the typical blue border i changed the hint text and the hover fill and these are actually buttons which i've customized as well i've gotten rid of the borders and i've changed the color slightly and same goes for this desk reservation app i started by overwriting all the defaults that we see in the application to really customize the look and feel well that's all that i have for you today hopefully you liked what you saw in this video if you want to see more design tips like this check out some of the other videos that i have on design thanks for watching and i'll catch you in the next video you

Channel: April Dunnam

Views: 6,126

Keywords: powerapps design ideas, and making pretty galleries, power apps design ideas isempty and making pretty galleries, powerapps design examples, powerapps design tips, powerapps gallery control, powerapps gallery search box, powerapps dynamic menu, powerapps dynamic position, powerapps, power apps, April Dunnam, Power Apps, power apps ideas, power apps tips for beginners, powerapps beginner tutorial, best power apps ideas, powerapps beginners, power apps tips, Power Apps Design

Id: vh9X2cwmzAQ

Length: 12min 39sec (759 seconds)

Published: Wed Oct 13 2021