Modern PowerApps Screen/UI Design- Beginner to Advanced

our apps developers are used to building apps that look like this when you can build apps that look like this and to show this is not a mock-up let's check it out we have a simple Inventory management app that shows the top rated product categories selecting a category filters the product view to show the top rated product in that category you can also view all records for both the products table and the product category table in our last video we learned how to build modern Galleries and many of you asked to make a video on how I built the UI we will learn that and more in this video [Music] we will learn how to create custom header components mobile menu bars custom buttons stacking galleries custom search bars and the updated way to create rounded background and drop Shadows sensation and the best fight about all this it was built using basic control only so no HTML controls yes yes yes yes but as you've noticed we use some custom f videos in the build no no no not to worry if you haven't watched any of my previous videos I will be showing you the most efficient way to handle svgs in your app with that being said let's get into the video Once In powerapps Studio the first thing I like to do is to set up my app colors in the apps on start property and store them in variables so I can use them wherever I need it and so I'll have one point of change and besides it's much easier to type primary color rather than typing RGB a14520525 anyway you get the point after every change don't forget to run the unstart function so you can get the latest changes the next thing I do is to select a theme that matches my design idea the most selecting the right theme can help you reduce development time for instance if you are making an app where the main color is reddish you select the Red theme and by default all colored controls we have a reddish undertone this means you won't have to change stuff like football field or border collar for each of these controls however if you are going for an app where the main color is greenish you don't select blue because you have to change the colors for every single control I know the next question is what if my color isn't available or there isn't one similar to it maybe you are using some outlandish color like turquoise or I don't know Sky jungle pink in that case just select any of the live themes because you have to set your colors manually anyway my disappointment is immeasurable in our case we'll just go for the light theme the next thing I do is to add in any images I plan to use on my app yeah I know you don't want blurry images but that doesn't mean you should be adding those HD ultra realistic hyper resolution images to your app who's going to start me those images have a high file size and then you go ahead and add 10 of them that just slows your performance I prefer to keep most of my images below 1mb and maximum 0 MB there are a lot of free image optimizers online so you just have to find that sweet spot between um image quality and size in our case we are just going to use two images one for the home page background and one for the header the next thing I do is to set up my custom SVG management I only do this if I plan to add in custom svgs in my app the most efficient way to do this is to have one point of call for all your SVG icons as I've said in my previous videos I get most of my svgs from icons.getballstrap.com as they have a huge variety of icons almost two thousand as at the point of recording all you need to do is to search for your desired icon scroll down to the copy HTML part of the SVD code next paste it in any text editor of your choice it can be notepad or any code editor then you replace the double quotes with single quotes the shortcut for the final replace functionality on Windows is Ctrl H for Mac users I assume it should be on command H once that is done you want to copy it and store it in a collection in the apps on start property The Collection schema is simply the icon name and the icon data sets the name to whatever you want and then paste the icon data we copied earlier then you do this for as many SVD icons are needed in your app to add it to your screen just add an image control and then in the image property paste this code the first part is static and the second part is where we're adding our icon data so we look up to our custom icons collection and then where icon name is equal to our icon name and then adding the icon data by default all bootstrap icons are black but we can customize it however we want quite easily on the bootstrap website you will notice that each SVG has a few property which is set to current color all we need to do is to replace that with whatever color we need so in our case we use the substitute function and then we can add any color by using the literal name or an rgba code in our case since we have set up all the app colors we can just using our variable this way we can have one icon and multiple colors we can even add conditions for example if this item is selected with blue if not the sky jungle pink hey that's pretty good so this part is coming in post-production but basically Microsoft recently put out a new patch that now allows users to upload an SVG file like a normal image file you're joking I'm not exactly sure when this patch was released because I recorded this video some weeks ago well I haven't released it yet stupid guys so let's check it out all you need to do is to click upload select your SVG file and that's it to add it to your app just reference it normally and that's all you can even use them as background images and they will be HD regardless of size because they are vector and vector graphics um so that doesn't mean that all I've explained so far isn't still relevant that um that method still gives you the opportunity to have multiple colors for just one icon and since it is in text format you can also store it in the data source to relate it to a particular um record for example category a has this icon category b as this icon and so on so anyway let's get back into up here now that we are done with our preliminary work it's time to cook first we need to lay out our page look into our design you see that we have four sections one for the other next for the product categories next for the inventory and lastly the mobile menu bar we are going to add a non-responsive container for each section if you are building a responsive app you would use the responsive containers instead but for this video we are keeping things simple once we've added them we set the height of each to be as desired once we've done that we also need to rename each of the containers to help us work formatting it later next we add a background image to our home screen make sure you set the fill to a color similar to your image this is because images sometimes takes a few seconds to load this will preserve your apps look even while the image is loading next we begin adding in our controls we start with the header since the header is something you will use on multiple Pages it is smarter to build it as a reusable component that will have one point of edits so we go to our components Tab and create a new component and name it header components next thing we resize it so the width is the same as the max width of our app and set the height to our desired height in our case the height is 80. so if you are building a mobile app the max weight is about 640 but if you are building a wide app which is the tablet form factor the the width will be about one three six six so next we're adding a horizontal responsive container make sure it fills the component by setting the width and height to that of the parents so the reason why we are using the responsive container is because we want to leverage its padding functionality so here we set our desired padding in our case we are going to set 30 on the left and 30 on the right next we add our logo so this is an image control make sure the flexible width is off and then set your desired height set the height to fill the container by using stretch and set the mean height to zero next we create a component property to store the logo once we've done that we can then use this component property inside of the image control so you do that by saying header components dots header logo so depending on what name you give your components and your property that is what you put inside of the image control you can then set the default value for your property in our case we just select the logo that we uploaded earlier one style is done we need to resize the image control to be as desired first you make sure that the flexible width is set to off and then you can reduce the width as needed for us we are just going to leave it at 150 for now we can change that whenever next we add another horizontal container inside of our current container this is for our other navba items you set the alignment to stretch the mean height to zero and now we can add in our items first is the user image so we add an image control and resize it accordingly we then set the alignments to Center you make sure the height take 60 percent of the parent height and lastly turn off the flexible wave also set the width to be the same as the height so you can make it a square next we make sure that the Border radius is greater than half of the width of the control so we set that to 50. lastly we set the image property to user dot image let's also give it a border color of white and set the Border thickness to two since we are building a mobile app this much is enough for us but if you are building a tablet or a web power app you have more space to add more components in our last video we added a label for the name and another icon to do that you add in the text label reorder if resize it as needed I usually set the height to stretch and the minimum height to zero and then I turn off the flexible width and set the width to be as desired next you do some formatting on the text however you want it to be displayed once you find with how it looks you can also um optionally add in a separator between your components I usually use the rectangle control for this so you add in the rectangle control set the width to about to set the height to about 80 percent of the current height and make sure the alignment is set to Center then we can copy paste our existing label we order it to be at the starting point and I will change the text to help you can set the width to be as desired lastly let's add in an image control for our icon we we reorder its position turn off the flexible wave set his width and height to 30 and make sure it is vertically centered inside of our container and lastly all we need to do is add in our icon data you can do that directly within the component or set a custom property for it so that it can be controlled from outside the component this is because you might have a situation where you want to make the icon have different colors for different pages so here we just create a custom property I'll call it help icon we set the data type to image and then on the image we set its image property to the other components dot help icon so that will get whatever image we add into that component next we can set the gap of the components to 10. so this spaces out our control rows within that um what's it called container you can then add whatever function you need to the unselect property if you want it to navigate to a screen you create a screen property and add it so lastly we'd add the components to our home screen all we need to do is set for the name I'll just go to the custom section and then we select our header components and then in the help icon we paste the code for our icon if you don't understand this part please go back to the chapter on SVG management as I've said before this file isn't needed since we are building a mobile app so we are just going to delete all of the other controls apart from the user image next let's give it a 20 pixel space from the top I usually do that when I'm developing responsive mobile apps this is to make sure part of the app is not cut off by the front Notch and with that the model header is done so let's move to the next section nice looking back to our design you notice that this first section has a padding of 30 on both sides so you can add in your components or controls rather and position them manually but what I mostly do is that I Leverage The padding functionality of responsive containers so you are adding a horizontal responsive container make sure the width is that of the parent and set the height to be as desired next you set the left and right button to be as desired in our case we are setting them both to 30. so next inside of this container adding a non-responsive container you make sure the flexible width is turned on and set the minimum width to zero set the minimum height to zero and set the height alignment to stretch and now if you're adding any controls inside of that container you notice that you can move it around however you want but it doesn't get into the padding that you've set next we add in two text labels inside of our container and you resize them and change the text as needed we then format the look of each of them so make sure to always set a distinction between your headers and subheaders you can use different colors different font weights different font Styles and so on so let's also rename our container so they can be more descriptive and now that's done let's add in our custom button first we're adding a non-responsive container we set the height to be 65 percent of the parent height and make sure it is vertically aligned in the center by setting the Y property to this formula let's just add a new field to help us while formatting designs next reset the heights to be as needed and position it horizontally towards the end of the print container so next let's remove our fill we also want to add in a border thickness of two set the Border color to white and then we are going to add in a border radius and Border Shadow the Border radius is going to be 15 and for now let's set the um drop shadow to regular and if we play it you can see the drop shadow effect next we add in a text label we set the width and height to be that of the parent and let's do some general formatting so we set the font size to 15 set the um text set the text alignment to Center set the weight to semi-bold set the color to white and lastly let's add in an image control for our icon so we set the height and width to 25 and make sure it is vertically aligned by setting the Y properties to this formula and make sure you also position it towards the end of the container next we increase the right padding on our label so we can see the full text and lastly let's add in our icon data so if you don't understand this part please go back to the section on SVG management so now all our visual components are done the next thing is to make the button clickable so first we add in a button control so we set the width and the high to be that of the parents you clear the text says the fill to be transparent set the Border style to none and then set the hover color to a very light black so to do that you just add in rgba zero zero zero and 0.1 last part is the opacity control and then for the field for the Pressed view you want to add in the same code but you can increase the opacity to 0.3 or 0.2 and then you can put in any actions for the button inside of the unselect property in our case we're just going to leave it blank for now next we're adding our Gallery so since we want this to have an effect of scrolling into the screen we are not going to set any padding so we're adding a non-responsive container resize it as needed and then we add our Gallery control so the gallery control we are going to use is the horizontal Gallery so we set the height to without the appearance we change the template size to be 75 percent of the screen's width and we set the x property to 30 and set the width to prevent the width minus 30. so looking back to our design you notice that the gallery has two base sections with the first section also has three different sections so next we add in a horizontal responsive container we set the width and height to the parents template width and press template height and make sure the X and Y values are set to zero next we delete all of the other controls since we are not using them next let's set the Field property of the container to White and set the opacity to 50 percent to do that just make sure that the last parameter is 0.5 next let's increase the template padding to 15 and let's add in our data source so next we turn off the scroll bar since this will be a mobile app but if you are developing a web app you might need to leave the scroll bar there so once that all of that is done we set the Border radius to 25 and set the drop shadow to regular and that gives it a nice pop-up or card Effect next let's add in two non-responsive containers so if you notice your containers are showing up outside of the print container just make sure you toggle off and on the flexible width and then it will be aligned inside of container properly so that is just a power up Studio bug hopefully to be fixed in the next part absolutely not so next let's set the minimum width of both items to 50. and we want the right container to take up one third of the total container so we set the field portion to one and set the other one to two so next let's change the Field property of our right container to be a transparent purple so now we can begin adding our com our controls so starting from the left side we're adding a non-responsive container we resize it as needed adding two text labels one for the category name and the order for the product count so we then format both of them as needed and we give them both a left spotting of 30. now we are done with line one let's go to the second line next let's rename all of our containers to be more descriptive so we copy paste our first line and rename it to line two and let's delete one of the labels and then set the text of the second label to the full name of the category manager next to make sure it fills up the height of the print container and next you want to add in the image of the category manager so for that let's first add in a non-responsive container we set the height and width to 40. and make sure it is 30 pixels away from the end of the print container by setting in X its X property to this formula foreign next make sure it is vertically aligned inside of the container by setting the Y property to parental height minus 0. divided by two next let's add in an image control make sure it fills the container by setting the width and height to that of the parents so next we add in a border thickness of two to The Container we set the boiler color to white and set the Border radius to 40 so it can be circular next in the image control sorry in the image property of the image control you paste this code here so this code checks if the comment user has the profile photo so if they do it displays the photo else it remains blank so make sure you've added the Office 365 user's Connection in your app for this to work next we want it to display the user's initials if they do not have a profile image so to do that let's add in a label we set the width and height to be that of the parent and let's change the text to two letters for now and then we change the color or better still just our primary color next let's add in this code to the text property so this code takes the first letter of the user's name um of the user's first name and the first letter of the user's last name so next we all we only want this label to be visible if the user doesn't have a photo so we copy our original condition from my image control and then invert it inside of our label so you can just add in the exclamation mark or use the not function both of them work either way and you can then see the label is only visible for users that don't have a profile image next let's resize the label first we set the width to the X property of our image container so it ends wherever that container starts and we need to change the alignment to right so we also want some separators between each of the lines so we add in um we have a rectangle for this we set the width to 95 percent of the parent width we set the height to two and since we want it to be aligned to the right of the content now we set the x property to prevent the width minus of the width and next we copy paste this rectangle and put it at the bottom of the container so we set the Y property to friend or height minus 7. height next let's copy paste line one rename it to line three and reposition it as needed so first we will delete one of the labels and we then let's reposition the other label to fill the height of the container we change the text property and reformat as needed so next we resize it to create space for our icon so once that is done we add in our image control set its width and height to 25 align it vertically inside of our container we set the x property to 30 and then let's add in our icon data so if you don't understand these parts please go to the section on SVT management so next let's start work on the right side of our container so we are going to add in a circular progress bar here so first we're adding a non-responsive container we set its width to 80 of the parent width and then set the heights to be the same as the width next we position it in the center of the container by setting the X and Y properties once that is done we add in an image control make sure you fuse the width and height of the container so then we add in our data to render the progress bar so if you don't understand what is going on here I explained it in details and provided the code for this in our Gallery design which is um Gallery designs video so I'll link it up here and you can check it out but in summary all we are doing is rendering an SVG and I've done it in a way where you can provide the exact progress values and rendering colors for the components in our case the progress value is the average rating of this category the average price rating of this category the base Echo color is light gray and the value second color changes depending on the rating so if it's less than 40 it will be reddish if it's between 40 and 70 it will be yellow and if it is above that it's green so next we just render it how we would um render a normal SVG next you want to add in a text label that shows the actual percentage of the average rating we set the width and height to that of the parent and then sets the text value to be the average rating percentage and then we can reformat the colors and Styles as needed so let's also um change the right containers to take up only 30 of the full width of the parent size so rather that I need to take in one third so to do that let's change the field portion to three and set that of the left container to seven so you will notice that the positioning of some of our controls have been deformed and this is why I mostly advise you mathematically position um and size your controls inside your app so let's select the image control of the circular progress bar and set the width and height to print the width and then appearing the height so now that is done let's add in a separator between the nav bar container and section two so to do this just add in a rectangle set the width to be about 95 percent of the width of the parents and set the height to about four so that'd be like four pixel thickness and make sure it is positioned in the center horizontally and we vertically position it at the bottom so next you set the color to white and give it a 50 opacity and that looks clean yeah boy so let's also add a little bit of space between the nav bar and the navbar container and section two and yeah that looks much better next let's add in our filter so we sorted based on the product average rating and use the first n functions to pick only the top four and next we want this to also be clickable so let's add in a button inside of our Gallery but outside of the container make sure the button fields in the galleries template with and template Heights and then make sure the button is transparent we also remove the text set the border to none and um similar to what we did for our custom buttons we set the hover field to a block with 10 opacity and set the Press field to be the same but we about 30 opacity and lastly let's make sure the Border radius is the same as that of our containers and now let's test it out so on click of a button um you can say whatever code of functionality you need to be for us we're just going to keep it to select the parent okay and now to the third section first of all let's make the background white and then let's add in some border radius on the top left and top right so 30 should be okay for now so let's copy the category header from our second section and paste that in our third section since they have the same look so let's just rename the container and change the text so the text of the subheader depends on the selected category in the first section so if no category is selected we just want it to display the the top 10 products or if a category is selected we want it to show the top 10 products inside of that category now let's increase the height of the container as you can see the header and the subheader are Overland the button on the right so let's make sure that both of them stop where the button starts so we set the width for both labels to be custom BTN underscore one dot X so now let's change the coloring of the custom button so first we change the Border color of the container to our primary color and then we also we can also change the label and icon color to be our primary color next let's add in our Gallery we'll add in a vertical gallery and select our data source and then we want it to start where section header stop so we set the Y value to the Y value over section header plus the height of our section header next we set our width to parents the width -60 so we can have 30 padding on both sides so we set our x value to 30. lastly we want to we want the height to take up the remaining space of the container so we just set it to parental height minus self the Y looking to original design you see we have two sections side by side and in the first section we also have two sections stacked on top of each other now we are going to add in the layout for this design first we're adding a responsive horizontal container and make sure it fills the gallery template by setting the width and height to templates to the template width and template height of our Gallery then we add in two non-responsive containers for the left and the right section if you notice one of your containers is outside of the canvas just toggle the flexible width on and off so it will realign properly next let's set the minimum width for both of them to 50 and then since we want the right side to take up 40 percent let's set the portion to three the few portion to three and since we want the right side to take up 40 let's set the portion to three well I'm out man I think it's tripping and then we set the field portion of the left side to seven now this part is optional but if you look at our design you notice that the gallery lines seem to stack on top of each other and for this we will need a separate container to replicate this effect so back to our Gallery let's add in a non-responsive container this time make sure the width fills the template width of our gallery and then for the height we set the height to template height to the gallery's template height plus 20. and next let's add in a border to the container so we set the Border thickness to two and then let's set the Border let's add in the Border radio so we want the top left border and top right border to be 20. then let's change the fill color of the container to White and then depending of the intensity of your the stacking effect you set a drop shadow so we are we are going to set it on semi board for now but if you want it to be more pronounced you can set a higher level of the drop shadow now you notice some of the border is being cut off outside of the gallery so let's reduce the width of the container by four and then set the x property to two so we have enough space for the border on the left and on the right which corresponds to our border thickness so this this is a mobile app we are building we are going to turn off the scroll bar but if you are building a web app you might want to leave the scroll bar on so next let's move in our responsive container into our stacking container so we cut and paste it make sure it fills in the galleries template size and not the parent container's size so let's change the height and width respectively now let's change the template side of the gallery to 100 and also set the mean height of our left and right containers to zero starting from our left section we're adding a non-responsive container for the first line and then adding two labels inside of that container we then format the look of the text labels by changing the fonts font size font rate and color once that is done let's copy the whole of line one and paste it first let's remove the items inside of our container and then for this second line we are going to add in um an horizontal progress bar so I did this I did a tutorial on how to do this step by step so check that out if you haven't already on the right side we are going to add in a text field so this is similar to what I did in the in the gallery designs video however instead of using a button for the rounded background and I used a container but everything else stays the same so check that out if you haven't so let's also rename our containers to be more descriptive and lastly let's add in the filter logic to the gallery and let's test it out a great success now moving to our last section for the menu bar container let's add a few color to white you also want to put um some separator between the third section and the menu bar section so let's add in the rectangle set the height to two set the width to be the point width and we set the color to your light's Gray so let's also give it a drop shadow because we want to give the floating gallery the effect of calling it from inside of the screen so the higher the drop shadow the more the overlaying effect um so we set the drop shadow of the menu bar container to extra bold let's also change the drop shadow of the floating gallery to extra mode now the layout of the section is done let's act add in the actual menu bar so this part is actually very easy to do this all you need to do is to click on the insert button and search super cool menu bar and add in the menu control and that is all so let's move to the next page I'm joking so that is actually a custom component so I will teach you how to create this step by step [Music] before that if you've at least learned something in this video please hit the Subscribe button I like the video thanks so let's first delete the previous components and let's create a new one we set the name as menu bar so let's set the height of uh let's say that I to our desired height so for us let's say it's to 70. next we add in a horizontal Gallery let's say the data source to an array of four items for now and then we make sure the gallery fills the entire component so we set the width and height to that of the parent next let's change the template size to solve the width divided by four this is to make sure that each menu item will have the same size it is static for now but we'll change it to be dynamic later so depending on the number of menu items in the gallery that will determine um how many um menu items inside of the control now inside of the gallery let's add in a non-responsive container and delete every other control so next you want to make sure that the container fills in the galleries template size so we set the width and height to parents to the parents template to it and the template height respect respectively so the next step is optional but if you want there to be some left and right padding you can set the x property and then set the width of your gallery now case you set the x properties to 30 and set the width of the gallery to print the width -60 so that will give um let's see on each side so that's why I got 60 from so if your left side was 10 20 you would subtract 40 so there'll be 20 on both sides anyway so now let's add in our image control that will display our menu icons so we set the width and height to be that of the parents and since we want this to be fully customizable from the app screen we are going to control the menu bar contents with a components property so another advantage of this method is that you can import this container sorry import this component into any of your other apps and then you will need to make changes to the component itself just modify um the component property which is the data coming into the components and then your menu updates um based on that so let's add in a new custom property we'll call it a menu data and set the data type to table so next for the gallery we are going to connect it to that property so we set the data source to your menu bar dot menu data so menu bar is the name of the component mailing data is the name of the property so um that's the format of the um property so next let's um customize the schema of the custom property so each record will have four columns so the first one is the menu name this would be for remaining designs where you want to display in the name the next one is the menu ID the menu ID is just a simple number column that we use to track the ID of the current selected menu item then the next on page navigation this is to store the screen that you want to navigate to Anytime a menu item is clicked right and the last one is the menu icon so this will be the icon that you want to display on the menu item so the reason why we are using text for that is because we are going to be using custom SVG icons but if you want to use like system icons you will just need to initialize an icon inside an icon inside of that column so you can just put any of the available icons like icon or home icon dot trash and yeah any of those and that would initialize an icon variable but the menu icon let's just go ahead and copy one of our initialized svgs from our app next let's copy and paste this about four times do you represent the four different menu items and let's just also change the menu IDs next we add in our icons to the gallery but in place of the SVG text we just use this item dot menu icon and then we add in some top and bottom padding next we need an indication bar at the top of our icon so we add in it's optional but so we're adding um a rectangle we set the height to four and makes the width about 60 of the container and then we Center it using a trusty formula the idea here is that we want each menu icon and indicator to have a different base color and then a different color when it is selected so let's add in a few custom properties for each color and since we are um dealing with svgs we also need to add in text versions of the color so now that is done let's set the values we want the base color let's add the default values so we want the base color to be light gray and we want the selected color to be blue all right so let's add in another property to track the current selected menu item so next we want the indicator to only be visible when it is active so to do that we set the visible property to this formula it checks if the menu ID of the indicator is equal to the current ID of the components so if you change the default value to three you notice the third menu is now active and if we change it back you see it goes back to the first one so next let's set the colors so starting from the Icon we use this formula to substitute the colors it checks if the menu ID equals the currents the components current menu ID so if it does it sets the color to your selected icon color which is blue else it sets it to our base icon color which is gray and um let's do the same thing for our indicator so since it is not an SVG icon we can directly edit the Field property and add in any conditions if need be also if you want to add many names all you need to do is to add in the text label reposition it as needed and then set the text to this item of menu name but since we aren't using that I'll just um go ahead and delete that for now but these are since we're not using it anyway so yeah now the visuals are done let's add in functionality we're adding a button make sure it is first in the gallery we clear the text make the field transparent and then let's set the Border radius to zero let's also set the hover field to a very transparent block and do the same thing for the Pressed field and that looks clean um next we set the on select to navigate to this item Dot Page navigation and depending on whatever is in the menu data to navigate to that page so now let's add the menu I um the menu to our screen so once we've added it make sure you've used the the container we set it to the set the width and height and once it is added let's set our selected icon so selected icon property to our primary color then let's configure the menu data property we go to the on start property of our app and add this code so this creates a collection um custom navigation and it is based on the schema that we set inside of our menu components so you see the menu names the ID the page navigations which is still just screen one for now as you only have one screen currency but we'll change that later and then finally the icons which we reference from our custom icon selection so don't forget to run and start to get the latest changes so now all that's left to do is to add this collection to our components and then you notice the change immediately so let's duplicate this screen to test out the navigation functionality so we rename this page let's delete the content and let's set the background to right next let's set the menu the current menu ID to two so the second menu items the second menu item will be the one that will be highlighted on this page and then finally let's change the page navigation on menu item 2 to products page and let's test that out nice and um yeah one more thing if you want the menu um if you want the menu bar item with to be dynamic based on the menu data you need to edit the template size so instead of dividing by four just provide the number of items just divided by the number of items in the in the menu data property and if we if we delete the last item in menu data you will notice that the the menu bar items have been repositioned accordingly so this will help a lot if you are building um responsive apps cool so now let's build the product speed so for the products page let's first change the background from a white to light gray and then we set the navbar container background to White so this is just to give it a bit of contrast between the sections so next let's also change the divider from white to a dark gray let's say the highest to two and make sure it fills the appearance width so if you jump to this section and you want to know I created enough but just go back to the section um on the header components so next let's add in a new non-responsive container and make sure it fills the parents with then we can just copy the category header from our home page let's delete the sub header and make sure the header feels the height of the appearance next let's resize and reposition the label and the putting container as needed then we set the background color of our custom button container to our primary color which is blue and then let's also reposition the icon as needed and also change the icon next let's change the text also you might also need to increase or decrease the label pattern to fit your needs and for those building responsive apps just to use a responsive container now the header section is done let's move to the filter section first let's add in a horizontal responsive container and resize as needed in the gallery designs video we left the container transparent but now let's make the background white just for some contrast all that's left now is to add um the future controls so let's start from the search bar first let's add in a non-responsive container we set the alignments to stretch and set the mean height to zero let's also set the mean width to 200 for now and then we insert a text input control we set the width and the height to feel the appearance and make sure the X and Y property is set to zero let's also set the Border radius to zero and the Border style to none and let's clear the default value and add in hint text we can also reduce the font size as needed next we want to add a line under the text input so let's do that let's just get a rectangle control we set the height to 1 and set the width to feel the appearance we also set X to Zero and Y to print the height minus zero the height this will make sure the line will be at the bottom of the container next we want to add in a search icon so we add in our image control make sure the height feels the height of the parent and then set the width to about 30. then we add the SVG data for Ike for our icon so the idea here is that we want the icon to show if there is no text but once the user starts typing um in the control the icon to be cleared so first we make the text input padding Dynamic by adding this code so if the input is blank we set the padding to 12 else we set it to 5 plus icon width so then we also make sure the icon is only visible by it's only visible when the text is blank unless you divide in this formula so let's test that out oh next let's give the main filter container a top and bottom pattern of 10 so just so everything is well spaced then before we add in our next filter control let's add in a separator to do that let's use the rectangle control and set the height alignments to stretch set the mean height to zero and let's set the width to one then let's also add 15 pixel gap on the main filter container so this will make sure that every item inside of that respective container will have a space of at least 15 pixels between each other you can also change the Hoover field and press fill of the text input to match your app I'm just going to use a light gray the next filter components we'll add is a combo box so we set the items we said that I the height alignment to stretch we set the mean height to zero we set the mean width to 200 for now and next let's just style it to fit our app so first we set the Border style To None we said the font size to 15. Let's also change the chevron background to transparent unless it's the Chevron field to our secondary color let's also change the text placeholder and with that we are done with the with the filter container you can add as many data controls as needed but in our case we are just going to use just these two since it's a mobile app and there is no more space here all right so the let's move on to our Gallery then moving on to the gallery let's add in a non-responsive container for the section let's resize it we set the background color to white and add a 30 pixel border radius on the top left and top right let's also add an extra bold drop shadow lastly let's duplicate this page as the third page will have a similar structure so let's do some text changes and let's update the many components to reflect the current speed we also need to update the pit navigation in the apps on start property next I'm just going to copy and paste our gallery from our Gallery designs video and the one from the home page of this app so if you want to see how I built the the products Gallery just check out the video I did everything step by step and you can follow that and the the only update now is that I use containers with border radius for rounded backgrounds instead of button so that's an update and yeah cool so we also need to add in navigation functionality to our home page buttons so let's add that and we'll also use a screen transition because why not and yeah let's test the altar [Music] so we have all I've shared in this video you should now be able to create modern uis in your powerapps instead of all those boxy power-ups that's pretty nice we don't have to go there I mean you're not wrong but you didn't have to say it I mean this should give you more ideas on how to build your power wraps so if you found this content helpful please like the video and subscribe to the channel and until next time bye [Music] [Music] thank you foreign

Channel: Tolu Victor

Views: 64,302

Keywords: Powerapps, Gallery Designs, Design Ideas, App Design, Powerapps Gallery, UI Design, Power Apps, Modern, Modern Controls, Powerapps Gallery Tutorial, Powerapps UI

Id: dNGlFA6yNvg

Length: 51min 31sec (3091 seconds)

Published: Thu Jul 27 2023