Modern PowerApps Gallery UI Design Tutorial - Beginner to Advanced

this is a default powerapps Gary design still being used by developers and this is the modern Gallery design built using powerapps and just to prove this is not an image from figma or photoshop here is it in action you can filter by text or select values from a drop down and that's just one or three Gallery designs I'll be teaching today oh my God we will start from a beginner level Gallery with a basic table View and a few cool display elements and we move to an intermediate level Gallery with a tile view that uses a minimalist design and lastly we work on the export level design and this is for those with 10 to 15 years of development experience huh I'm joking all you need is basic powerapps knowledge because I will be explaining this step by step we will learn how to implement Modern Display elements like text Fields horizontal progress button circular progress bars and even the cool multi-user profile image or initials if no display picture we see in most native apps today pretty sure that's not the name but if you know the name or you have any cool names please let me know in the comments below anyway since we all like easy builds the best part of these galleries is that they were built using basic controls only so no HTML control however we use some svgs in the second and third Gallery design don't worry I will be showing you the easiest and fastest way to add SVG icons into your app as well as where to get them from with that being said let's get into the video before we get started let's understand the data model that will be used in this video we have the Construction Products table in dataverse which as its name implies contains all Construction Products and its respective details now let's have a look at the underlying columns the product ID Products name and company name are all text columns logo is a URL column storing a link to the logo of the company product description is a multi-line text color products price is a decimal column price rating is a whole number column with a max value of 100 to store the product's price rating percentage product quality is also a whole number column ranging from one to five and the review state column is a choice column storing the current state of the product review process now let's hop over to the PowerApp Studio to build our galleries I've done you the quality of doing the preliminary work so we can get right into the gallery build but just a brief overview we have a simple header here with a logo and a profile image on the next row we have the page title and description as well as a button to map some functionality and lastly we have the filters row which contains all our Gallery filters and a button to add a new product I understand this might not be so simple for some of you so if you want a separate video where I go through this step by step please subscribe to the channel and let me know in the comments below and I'll work on it as this video is also a subscriber request from one of my previous videos now to the gallery build the first thing to always do when building galleries is to decide on the wireframe looking back to our first Gallery design you notice darker background on the table header the white background on the gallery body and the routed edges and even the outline so let's add that to our screen so firstly we are two non-responsive containers to our screen one for the header one for the gallery the first two are responsive containers and the third one is a non-responsive container and this is what we are going to be using we set the height of the first gallery to 50 and we set the height of the second gallery to as big as needed then we rename the containers the next thing is to add in the background and since we want a rounded Edge effect we have two options the first one is to use the HTML control but we won't be doing that since we are trying to keep things simple we are going to use the button control since it has the Border radius property so starting from the table header container let's add in a button then resets the button width and height to be the same as that of the parent container so to do that we change the width property and the height property to the parent and then we make sure it is positioned at the top left corner of the container the next thing we need to do is to remove the text and then we change the color to our desired background color so we go to the peel property of the button and change it the next thing is to add the Border radius on the top left and top right and remove the Border radius on the bottom left and bottom right and to do that we just go to the respective properties so on the top left we leave it as 10 the top right we leave it as 10 also but then the bottom left and the bottom right we set that to zero so if you zoom in you will notice that part of the border is being cut out outside of the container to combat this all we need to do is to change the height and width of the button to make sure it fits inside our container so we set the width to parents the width -2 times self dot border thickness so that will take the Border thickness from both sides and save and subtract it from the entire width of the parent so there will be enough space to show the borders we do the same thing for the height once that is done we position the button in the center of the container there are two methods to do this the first method is the manual method where you drag the button to the center of the container the second method is for developers that like to boost their ego by doing everything with code to do that all you need to do is to set the x property to parental width minus self the width divided by two and set the Y property to parent dot height minus cell the height divided by two and then if you zoom in you will notice that the borders are now being shown correctly the next thing is to make sure the hover field of the button is the same as the Bill property of the button so on the button we go to the hoverview property and set starts to self dot fill so when you hover on it it doesn't change color now that is done all we need to do is just to copy and paste that into the gallery container so now that it's in the gallery container we just need to change the field from Gray to White and then we switch the Border radius properties we set the top left and the top right to zero but then we set the bottom left and bottom right to 10. then if you want no space to be between the first container and the second container all you need to do is to set the Y property of the gallery button to zero so this way they are touching each other then we also change the Border color to be a slightly darker shade of gray so it can stand out from the rest of the background so to do that we just go to the Border color property and change it so so the next thing is to begin adding our components so starting from the header we're adding a horizontal responsive container this will help with the grouping of labels later on you make sure the container is inside of the table header container and then set the width and height to be that of the table enter container and to do that we set the width and height to parent the width and parent dot height respectively and also we make sure that it is positioned in the top left of the container to do that we make sure that the X and Y values are set to zero so now that is done we can begin adding our labels for each of the table columns next which sets the flexible width to true and leave the view portion as one for now we can also leave the minimum width as 150 and then we make sure in the Align to container we set it to fill the height of the parent container by selecting stretch then we copy and paste this as many times as needed one for each column in our table now that it is in there we change the text property to our column names now that we've set the name now that we set the names all we need to do is to format the labels so we select all the labels we've just added by shifts clicking all of them and then we set the fonts as needed so we are leaving us as open sounds we set the font size to 10 we set the font weight to semi-bold and then we make sure that the padding the left padding is 15 just to give it some space on the left and lastly we set the color property to be as desired secondary color is a variable that contains an actual color value this was done so I won't have to add in the colors every time I need it you can do this by adding the variable on start of the app so we go to the unstart property and sets the and sets the color after every change to the unstart value we need to make sure to run the unstart function so update values all across your app so to do that you click this and run the unstart function here the next thing is to add in our gallery into our container so we select the vertical gallery and add it to our container we make sure it's positioned in the top left by making sure the X and Y property is set to zero and the width and height is set to the parent width and parent height next we delete all its components apart from the separator then we change the template size of the gallery to 50. and then we add the responsive horizontal container similar to what we did for the headers you make sure this is positioned at the top left by setting X and Y to zero and you make sure the container fills in the gallery template by setting the width and height to parent the template width and parent.template height respectively now going back to our reference Gallery you notice that for some columns we have just simple text while for some others we have the combination of controls what we will do is that for the text columns we will add a simple label and for the other columns we add a non-responsive container to group all the combination of controls now you select the container and begin adding the elements so in the company column we have a combination of the circle for the company logo and then the label for the company name so all we're going to do is to add in a non-responsive container for that column you make sure the minimum height of the column is set to the same as the gallery's template size so our galleries template size is set to 50 here so we make sure that this container also has that same height and leave the aligning container as stretch so then for the next column which is product name we add just a simple text label there so what we're going to do is to add in a text label make sure to select the parent container first before you add in the text label now let's add in the text label you set the height to 50 and leave the Align as stretch set the flexible width to true and leave the field portion as one for now so then you just copy and paste this as many times as needed for your gallery so now I've copied and pasted the controls a couple of times for each of our columns what we need to do is to select on one and click on Ctrl a to select all toggle the flexible width on and off to make sure that everything is flexible and then set the minimum width to 150 for now this can be changed later and what you notice is that it now aligns with our headers so one thing to note is that whatever values you set for the header should be the same you set for the column so in the header for company name if we set the field portion here to 2 for instance we also need to set the column to two so that they can be aligned easily so this is the advantage of using containers for your table galleries now I'm just going to set that back to one for now now that we've added the wireframe of our Gallery the next thing we need to do is to add in a data source and a data source for this Gallery is going to be a Construction Products table as we've explained earlier in the video so starting from the text column since they are easier we select both of them and give them a left padding of 15 similar to what we did for the headers and then for the product name we change the text to this item dot product name and for the price we set that to this item dot price if concatenated the dollar sign with the text function we manipulate the price to look like a decimal value next the formatable text columns by selecting both of them and setting the font size to 9.5 setting the font weights to semi bold and then the fonts color to a different color and then we move to the other columns so starting from the company name we have the company logo and the company name in the container so to do that let's add in an image control we set the height of the image control to take up 70 percent of the parent container's height so to do that we say parent dot height times 70 percent next to make sure the width is the same as the height of the image control so we set the width to self dot height next resects next we set the x property to 15 to match the 15 padding that we give to the header and next to make sure that the image control is vertically aligned in the container so to do that we set the Y property to parents or Heights and to do that we set the height y property to parental height minus of the height divided by 2. now the image control is in there let's add in the text label for the company name so we're adding a text label and sets the text property to this item dot company name we make sure that we make sure that this takes up the full height of the container so we do that by setting the height to parent dot height and make sure the Y property is set to zero next we change next to change the width to make sure it is properly set inside the parent container and lastly we format the text to be similar to what we did for the other text columns we do that by setting the font height font size to 9.5 and the font weight to semi bold then for the image control let's add in the image we set that to this item dots company logo and since we want it to be secular we need to add in a border radius you just need to make sure that the Border radius is bigger than half of the width oh you just need to make sure that the Border radius is greater than half of the width and height of the control and now you can see it is properly circular and lastly for the label let's increase the left pattern from 5 to 10. so the next column is the review state column and we're using a text peel to display this value the first thing we need to do is to add in a button control into the container next we need to make sure that the button control takes up 90 of the width of the container and 60 of the height of the container next to make sure that the button is centered in the container so we do that by setting the X property to parent.width minus self the width divided by 2 and the Y property to print the height minus of the height divided by two next we clear the text property and make sure the Border radius is 10. the next thing is to add in a text label you need to make sure that a text label has the same Dimension and position of the button control so to do that we set the x property to button y button 9 the X we set the Y property to button nine dot y set the width to button 9 the width and set the height to button 9 dot height so you notice it now takes the four dimensions and positions of the button next we add in some left padding on the label so for now let's leave it as 30. we can change that later and let's add in a little bullet on the left side of the label so to do that we insert a circle change the color of the circle to any color for now and then set the height and width of the circle to be 15 and 15 respectively now that we've added the circle let's change the button name to text field BG just for it to be easy to reference later and now for the circle we set the x property to text pill BG dot X plus ten so that moves it to 10 pixels away from the starting point of the button and then you make sure it is vertically aligned inside the container and similar to how we've done before we just say parent.height minus self the height divided by two next we need to make sure there's 10 pixels of space between the ending point of the circle and the beginning of the text so what we do is that we modify the left pattern of the label and now let's reduce the size of the circle a bit so now that it looks nice and clean all you need to do is to begin formatting the elements so starting from the text which is the label we set the font size to 9.5 and set the font weight to semi bold and next let's change the text property to this item dot review stage and finally since we want the text field to have a different color depending on its value we change the color property of each of the elements so starting with the label we go to the color property and paste in this formula so what this does is that if the review stage is not started it gives it this color if the review state is in progress it gives this different color if it is awaiting approval it gives this color and finally if it's completed it gives this color one thing to note is that things are original column is a choice column we need to convert it to text before doing the switch and that is why we did this now we do the same thing for the circle we go to the field property and paste in that same code so for the background we go to the field property and paste the same code but we need to fade it so we can see the actual values so we use the color fade function to do that so color paid and then we make sure it fits by about 80 percent I mean close our brackets now that is done we need to change the border to be the same color as the text so we paste in our original code inside the border so for the Border color property we paste in our original code there and that is how you implement a text field now moving to the product team column what we need to do is to add in a gallery so we select the container and add in a gallery to that space so it has to be a blank horizontal gallery we set the width to 100 for now and set the height to parental height so you can take the full height of the container and make sure the x is set to 15 to match the left padding of the header we also change the template size of the gallery to 30 for now and we set the template padding to zero so now we need to add the data source to the gallery so since this column represents a one-to-many relationship we need to add that value as data source of our Gallery so in the data source of our Gallery we say this item dot users and next we add in the image control that will display the profile image of the respective users we make sure that the height is the same as the width so we set the height repairing the width sorry next we need to make sure that the height is the same value as the width so for the height we set the value to self the width next we need to make sure the image control is vertically aligned inside of the gallery so to do that we set the Y property to the parent or template height minus cell door height divided by 2. and lastly for the gallery we need to turn off the scroll bar so in the scroll bar property then we make sure the Border radius is at least bigger than half of the width so let's just set it to the same size as the width so it can give it a circular fail so next we add the user's profile into the image control so to do that on the image property we paste this code here so what this does is it checks if the user has a photo and if it does have a photo then it gets the profile picture and adds it to the image control this is because if the user doesn't have a photo and you try to insert it into the image control it gives an error so we use this condition to combat that before that we need to make sure the Office 365 user's connector is added to application to do that all you need to do is Click add data and search for the connector Office 365 users and then you add that to your application so now that is done let's add in a border around the images so so for the boiler thickness let's say that to T and then the Border color let's say that to White next we need to add in an object that shows the initials of the user if they don't have a profile photo so what we need to do for that case is to add in a container so we're adding a non-responsive container and we make sure that the container has the same position and dimensions of the image control so we set so we set the x property to image 9 the X set the Y property to image 9 that's why set the width to image 9 dot with and set the height to image 9 dot height now that is done let's add in a circle inside the container we make sure this circle also has the same border thickness and butter color as I made control so we change that to two and make sure the Border color is white next we set the width and the height of the circle to the parent width and height this is to make sure the circle always fills the container and lastly let's add in a text label we also make sure that a text label fills the height and width of the container so we set the width to parent the width and we set the height to parent dot height next we set the font size to 9.5 and set the fonts weights to semi board and let's change the text for now to two letters just to see how it looks inside of the circle and we can see it looks fine all we need to do is just to Center align it and maybe reduce the size to nine so it's a little bit smaller and it can fit it better all right then we change the color of the text to White so next we need to make sure that these two letters match the initials of the current user so to do that we leverage this code here so this takes the first name of the user and takes the first character inside that name and then for the last name it also takes the first character of the last theme that is why we are using the left function here and as you can see the values have changed accordingly so now all we need to do is to show this container only if the user doesn't have a photo so then we just Leverage The leverage the condition that we had before here so we can copy that condition here and paste that condition in the visible property of our container and lastly we invert the condition so it will only show if the user doesn't have a photo so to do that without adding an exclamation mark at the beginning to inverse it to invert it so next since we want the images to validate each other a little bit we need to reduce the template size accordingly so we select the gallery and reduce the template size by about five so we change it from 30 to 25 so now they overlay each other a little bit next make sure that the image control is above the container so we move so we so we reorder it to be above it so we bring it to the front next we need to add an element that shows the Overflow of the users inside the product team so to do that all we need to do is to just copy the container that contains the initials and paste it outside of the gallery but still inside the production gallery then we change the visible property for it to be always true and then we change the text property to you some value let's leave it as plus one for now then we position that container to be at the ending point of our gallery you need to also make sure it will always be vertically aligned inside of the gallery so we change the Y value to parents the height minus self the height divided by two lastly you need to decide on how many users you want to display before truncating it in our own case we want to show at most four four users and then add the others to the Overflow elements so what we are going to do is that in the text property of our label we change that to reflect it's accordingly so this counts the number of items in our gallery and subtracts it by four and then concatenate the plus icon to the plus text to it so the next thing we need to do is to make this container only visible if there is an overflow so what we do is that on the visible property we paste this code here so it checks if the number of items inside the gallery minus four is greater than zero so if it is greater than zero then it will show the container else it won't show the container then let's just rename the containers so that it can be more self-explanatory so we call this overflow container we call this initials container so lastly since we want the items inside the gallery to Overlay each other by little bit we reduce the template size of the gallery by 5 pixels so in the gallery we reduce it from 30 to 25. and then for the Overflow container we also reduce the X property by the same amount that we reduce that of the template size so in the X property we reduce that from one one five to one one zero and lastly let's change let's do some formatting and change the colors for the initial Circle we need to change the color so on the color property let's just change that to our primary color for now ideally you would want different colors for different uses but for the purpose of Simplicity in this video we are just going to leave it as the same color or raw but if you want a detailed video on how to implement this functionality please let me know in the comments and I'll work on a video on that with that we are done with the product team column now on to the price rating column we are going to represent that data with a horizontal progress bar and to do that let's first add in our label that will display this the percentage you make sure the height is set to the height of the parent so parent dot height and set the Y property to zero make sure the width is about 35 for instance where you can say that wherever you need it to be and then we are going to move it to the end of the container and for the text property we're just going to change that to this item those price rates in and then we concatenate the percentage sign with it let's also format it similar to what we did for the others we set the font style to semi Bold and the font weights to 9.5 let's increase the width a bit yep so that's fine next you need to add the horizontal progress bar so to do that let's add in another container a non-responsive one this time and let's set the heights of the container to about 20 for now and let's set the width of the container to repairing dot width minus the width of this um label and nip of the label is label 16 and then we say parental width minus level 16 dot width and then we need to make sure that this container is vertically aligned inside its parent container and to do that let's just change the Y property to parents the height minus cell the height divided by two next we need to give you a base color and let's set that to a light gray and so the last part is just for us to add in a rectangle inside of this container you make sure the starting point is zero and we make sure that the height is the height of its parent container so parents dot height lastly we want the width of this colored rectangle to be a function of the percentage so we are going to change the width to this formula so we are going to take the parents width and multiply it by the price rating divided by 100. next let's reduce this the height to about 10 yeah that looks better and then lastly since we want the color of the rectangle to be a function of the percentage so if it is less than 40 we want it to be red if it's between 40 and 70 we want it to be um yellow if it's above that up to 90 we want it to be a light shade of green and if it's above 90 you want it to be a darker shade of green so to do that we change the color property of the colored rectangle to this formula so we say if the price rating is less than 40 set it to this value if it is between 40 and 70 set it to this value if it's above 70 but less than 90 set it to this value and if it's above 90 which is for the rest set it to this value and now to the last column in this first Gallery which is the price rating we are going to display that using the rating control let's add the width to be 60 to be 80 of the width of the parent container so we say parents the width times 80 percent and then for the height we set that to 60 so parental height times 60 percent lastly since we want it to be positioned in the center of the container we set this to parent dot with we set this to parent the width minus self the way divided by two I set the Y to parental height minus seven of the height divided by 2. so next we want to change this color from dark blue to the golden color that we see on the rating so in the rating Field property we just change it from this value to this value so two five five two one five zero one so that's the gold color and with that you are done with the color so the next so the next part is for also adding an extra column on the left on the right that will serve as the column for icons and whatnot so first of all in the header let's add in another text label but then we remove the value of the texts and in the flexible with property we leave that as off and then we set the width to however big we want it so for us I think 100 should be okay and then inside our gallery and then the and then inside the container and then inside the con and then inside the responsive container for our gallery we add in it's another container that will serve as an icon container and this time it will be a non-responsive container we set the minimum height to 50 so it can fit inside very well and then we switch off the flexible wave and sets it to be the same value as what we set earlier and that's 100. and then we can add in our icons inside this column and just to make things easier let's rename all of these containers to reflect its respective columns so now we've rename the containers to be reflective of their columns let's also change this to the actual column name so that's product quality and for this we want the default value to be this dot product this item let's produce quality and lastly let's just add in an icon here and with that we are done with the first Gallery design all that's left is for us to add in the filter conditions into the items property of the gallery so our text filters and our drop down filters can work on the app so if you just test that out let's say crawler and then okay yeah let's go to the next one nice before that I want to talk about the sponsor of today's video wait a minute no one is sponsoring the Channel with 99 subscribers anyway if you've at least learned something in this video please hit the Subscribe button alright so now we've created the blank template for us to begin the second Gallery design so the first thing we want to do is to add in some sort of separator between the filters and the gallery and let's do that by adding a rectangle let's just resize that and reposition that as needed and we set the height to one next let's add in our gallery we want it to be the same width as a filter so everything can be properly aligned all right so now that is done we want to delete everything from the gallery itself since we are not going to be using any of its components and then since we want a rounded background for each of the gallery elements let's add in a button so we can leverage its border radius property we said we need to make sure that this fusing the template python template width of the gallery so for the width property we send that to parents the template with under height to print the template height next we need to position it in the top left corner so we set the X and Y properties to zero next we clear the text from the button and change the background and change the fill color of the button to White next let's increase the rub count of the gallery from 1 to about three and let's give it a template padding of about 15. or 15 is too much let's say 10 10 is all right now let's set the template size of the gallery to about 270 seeds can be big enough for us to add in our elements okay and now we can begin before that let's remove the border on each of the buttons so in this control here we select none for the border so the Border doesn't show anymore and we also need to make sure that the hover field of this button is sends to the self dot fill so it won't change color anytime you hover run it okay so now we can begin adding our components but before that let's add in our data source we select Construction Products in this Gallery design for each tile we are going to have six rows of data so for each of those rows we are going to add in a non-responsive container and inside this container that's what we put in our different display elements so let's add that so first let's add in the container make sure the container peels the width of the um make sure the container fills the templates with of the gallery so parents the template with and let's set the height to about 50 for this one so this is line line one and one underscore container so let's just copy and paste this a bunch of times next let's position them exactly how we want it so now that we've already added our containers let's begin adding the display elements to them so for the first container what we are going to add is a text field of the review stage similar to what we did in the first design I'm not going to go through the process of creating it again but I'm just going to copy and paste that container here so going to The Container I'm just going to copy the whole review state container and paste it here inside of the line one and then we resize that as needed we just need to make sure that the height is the same as the height of the parent container so if you if you skip the video to this second design now you want to see how I built it you can just go to the chapter where I talked about the text views and you see how I built it there all right so now for the next level here we are going to be adding the product name and we can also actually just copy no we don't need to copy that let's let's not be lazy let's add in the label here and let's say this item dot products name we're going to change the fonts type to later and set the the fun tweets to semi board now we want there to be at least a 20 pixel spacing from the left of the foreign pixel padding on the left so let's change the padding left of this text label to 20. and for the review state container let's increase that a bit just to make sure that there is enough space on the left of the there is enough space on the left of the elements we need to make sure that the label is also the same height as its parent so we say parent or height for the label unless reduce the size of the second line line two let's reduce it to about 25. then we can go to the next line so the next line we name that to line three and let's add in our elements so for this line we are going to be displaying the product ID and the company name and Company logo so first let's add in the product ID we're going to insert a text label here put it on the extreme left and give it a left padding with about 20 make sure the height is the same as the parent height and make sure the Y value is set to zero so that it can view the whole container next reset the text property to this item the product ID let's also concatenate and hash key to the value and let's change the fonts where its font size to 9.5 let's change the font weight to semi bolt and let's change the color to our secondary color let's reduce the size of this to about 60. now you can always change that later and then the next thing is for us to add in the company logo and company name on second thought let's increase the size of this to 11. next let's add in a container that will display our company logo and company name we need to make sure the width is 50 of the total weight of its parent container so we say pairing the width times 50 percent and let's drag it to the extreme end of its parent container and then we set the height the the parent height so parent dot Heights so rename this to company display container now for this display elements we are going to display it similar to a text field so we can actually just copy this text Bill all the elements inside of the container and paste it here and then we can modify it from here first of all the the first things we need to change is the text color so for the label we don't want it to be conditionally colored anymore we just set that to Black and then instead of this circle we are going to replace it with a um with an image so let's delete this for now and let's add in an image control that will serve as the [Music] um logo now let's add in the logo so we say this item dot company logo now since we want this logo to have a rounded rounded field let's increase the Border radius to about 10. and then since we want it to be within the pill itself we need to change hdb about 80 percent of the Peel's height so the pills background which is the button we're going to use that to modify the height of the image control so on the height of the image control we say the text View background dot height times 80 percent and then we want that to be positioned vertical to be vertically aligned inside of the container so for the Y property we use our formula that we've been using so parents the heights mind yourself the height divided by two and lastly we want the width to be the same as the height so it can be a square so it can be in a square format so we say self dot height so next we want to position this image on the right side of the text views background so we can either do that manually or mathematically so let's so on the X property of the image we use this formula so we say the text field background dot X plus the text views background with then minus self dot with and then minus whatever pattern you want to give it to give to it so you might be wondering why I'm always using formulas all around the app for things I can easily move so this helps especially when you are building responsive apps or if you plan to use some of these functions sorry some of these display elements in other places around your your app similar to how we copied the text view from the original gallery to this place if I manually positioned it then when I copy to this place I will have to do some repositioning again but if you but as we've based it on a mathematical formula it will always be aligned properly that being said let's set the let's set the label here to be left aligned and give it a padding a right padding of about 30. so the padding writes should be 30 and let's reset the padding left to five okay 30 is not enough so let's say about 40. 45 looks better and then lastly let's change it from the review stage of the company name okay we can also increase the height of the text field background from 60 to about 80 percent of the parent height okay 80 is way too much let's say um 65 yeah I think I think that looks I think that looks better okay and then for the background color so for the view color we were using this um custom color and let's just change that to gray so color the gray dark gray is not looking late let's say a lighter shade of gray and let's remove the border around it by selecting none okay that looks neater for this image let's change the heights to be about 70 since it's 80 is looking kind of choky or 70 percent okay so now that is done let's go to the next line so that's line four so on this line what we want to add is just a simple text slip text label that contains the description the description the product description so we set the width and height to prevent the width and parental height make sure it is set to zero the X and Y and then change the text property to this item.description product description yeah and then the left pattern let's say the left button to be about 20 let's reduce this font size to 9.5 set the font rate to semi bold and we set the the color to a secondary color okay and that looks that looks neat so let's resize this so for and then for the label we need to make sure it is stop aligned so there is a vertical align property here that winds change from middle to top so it is aligned at the top in this next container that's line five we are going to add okay we actually going to need one more container so let's copy and paste that let's change that to line six so in this line we're just going to add in the horizontal progress bar that we used in the first Gallery so I'm just going to copy and paste that from there so we copy the whole you copy the whole container and paste that inside of our new container here but we don't want it to take the full width so we reduce the size a bit and let's change the X property to 20 so it has a left padding and let's reduce the size of this container so need to make sure this one it takes the height of the parent so parents dot height next we need to add some sort of divider between this line five and line six and we so we can just copy the divider we created earlier and paste that in here so let's resize this CB here and then we increase the size of the last container to just take the the remaining space so in this one we are going to add in the the team view whatever here on the left and then on the right you have the rating so let's copy that from my initial gallery okay so let's see what's wrong oh there's nothing wrong actually so now let's just resize this a bit so we need to make sure it takes the full height so parents the Heights and then we reduce the size so we need to change the width of this one to be 30 as we said it before so it can take a bigger space and then for the initials also to increase the width to 30. so yeah so that takes the original shape and then for the and then for the rating let's also just copy the whole container and paste that inside of our gallery so this one should also take the appearance the height but we should resize it to be on the right of the the right of the gallery all right awesome and with that that our second Gallery design done so every other thing you can just do some theming so if you don't want the scroll bar to show you can just like remove the scroll bar from the from here so it won't show on but then they can still use their scroll wheel to show to scroll through the valleys okay just one change let's reduce the width of this separator to take only 90 percent of the parents width so parents start parental width times 90 and then we make sure I didn't do that well times 90 percent and then we make sure it is vetted um horizontally aligned wait what oh parent.template with since we are within a gallery actually yeah I was wondering why it's not working but anyway you also need to make sure it is horizontally aligned inside of your gallery we are still not done we need to add the icon that will serve as the edit icon on this style View so since we want this to be a custom icon it should be on the line one right yes line one so inside of the line one container let's add in another non-responsive container and then we set the height Superior Window height and we set the wave to be the self the width so we want it to be the sorry the self the height actually since we want it to be the same as the right and then we just drag it to um to the end Okay so in this one let's add in it button so in the button we want the we want it to take 90 percent of the height and 90 of the width so prevent the width times 90 percent perendot's height times 90 percent let's clear the icon let's clear the text and let's increase the Border radius to be more than half of the width so let's just say um serve the width actually so it it can be no let's not do that it's going to be harder and let's just increase this to about 45. so it can be a circle let's set the Y property to zero okay so on second thoughts let's reduce this to 80 percent and the height also to 80 percent next you need to vertically and horizontally align it inside of the container so we just say um parental width minus Save The Wave divided by two and we did the same for the height for the Y that will be height okay so now let's change the background color to a light gray unless sets the Border radius sorry the Border color itself see a secondary color since there is a dark shade of gray all right so let's also let's also set the self.hover to be the same as the field so let's set the buttons over fill to be the same thing as the um fill so that'll be this will be self dot fail okay so now we're going to add in an SVG icon so to do that what we need to do is to First add image control and since we want this to fill the container we just set it to parents to height and parental width so that'll be the width and height of the image control okay next you need to get the actual SVG icon that will be used inside of this image control so I recommend you get most of your icons from icon.getbushtrap.com because they have a huge variety of icons and they are easily implementable in powerapps so all you need to do is to search for the particular icon you need so I'm just going to search for a right icon and select this one then all we need to do is to go to the HTML property here and copy the the whole the holding and copy the whole elements actually now that we've copied the SVG code all we need to do is to replace the double quotes inside of isvg code with single codes so you can use any text editor to make this change so I'm just going to paste that code here you can also use notepad and then you and then you do a find and replace on all the codes so here we just need to hit Ctrl H and replace the double quotes with single codes and click replace so and that's so and then we copy this code again now something I like to do on apps where I'm using custom icons is that I like to initialize all my icons in the unstuck property of the app so I can just call that anytime I need it you see all the custom icons I'm using inside my app here so it's a collection called custom icons here I have the icon name and then I have the icon data where I paste the SVG code that I copied so in this last one I've added the next icon the next icon that's the icon name and this is the code that we just changed now so we swapped all the double quotes for single quotes inside of this this is because um it has to be enclosed in double quotes so to prevent error we swapped all of them out now we are going to reference this collection and this icon wherever so you can reference it on any page you need to reference it so just know that after any change to the unstart property you always need to run the OnStar function here to get the latest changes so we click on the image control here and paste the following code inside of the image property so this is the code I used to embed SVG icons into your app so this one is a static code that doesn't change at all and then you just need to encode the URL of the SVG with us copied so we look up to our custom icons collection where the icon name is equal to next icon and then we get the icon data and then inside of the SVG code if we go back to the bootstrap website you will notice that all icons have this property called fail current color so then we can just replace this current color with whatever color we want to display inside of our app so here you can see I'm substituting current color for secondary color text so this is a text variable that I also initialized on start of my application and this is the value here so you can use any colors out any so you can use any colors that you want in your wrap here so now that is done let's just give it some left and right padding so it can be a little bit smaller yeah 10 is okay so now we've successfully added an SVG icon Installer app that is fully customizable and lastly we need to add in another button above the image control so that will be what is being clicked to perform any action so we can just copy the bottom layer which is the button and paste that again on top so what we do is that for the fill we set that to transparent so you can actually see what's beneath it and then the hover color so the overview actually so we go to the overview property and sets that to a transparent block so rgba 0 comma zero comma zero comma 0.1 so let's say 0.2 so zero comma zero comma 0.2 so you see on Hover it's change color and then depressed fill we change that to similar to what we did for the hover but we change that to a higher opacity 0.3 so it can actually um reflect when it's been clipped and then you can add in any functions you want here to be unselect of this um of this um top layer of the button with that we are done with our custom button and I think the only thing that might be left might be the alignment of the gallery itself in respect to the filters container so I don't mind if things are not too straight but if you really want them to be aligned together you can always do that on your own but I feel this is okay so on to the next Gallery design now to our third Gallery design it is not a new design it is similar to our second Gallery design since they have the same structure but we are going to use a few different display elements so first of all let's just duplicate this screen and rename it so the first change we are going to make to this Gallery is that we are going to move the rating container from Line 6 to line five so let's copy the whole container I'll cut it and paste it inside of line five and then we remove the price rated from there move it to nine six so we're going to paste it here so let's realign the items so first of all we move this one to the less by 10. so now for the price rating we are going to change it from a horizontal progress bar to a circular progress bar and we're going to move that to the extreme right so let's move that to the right of the [Music] um container all right so the next thing let's just um let's delete let's delete that and let's set the width of the label to parent dots with to appearance the width and we set the X and Y property to zero and then finally we Center its and then for the parents container itself what we want to do is that we set the width to be the same as the heights so we say self dot with sorry save the height actually so now let's drag that to the end of the container so now to add the actual set speed of divine mic so now to add the circular progress bar to the app we have two methods the first method takes only five seconds quick and easy all you need to do is to add in an image control and paste some code there and you're done yeah boy the second method requires you to change some values within that code so that allows you to make some customizations on the code but for that you need to understand what its components of the code means now let's go into the easy method first we add in our image control so we say image and add it and then we just paste the code there and lastly in the value circle circumference we change 50 to our desired value in our case it'll be this item that's the the price rates in price rating and you're done that's all five seconds complete a great success so yeah that's that's how to do it and then if you want to modify it you need to understand what the code actually means so I'm going to explain each of the elements step by step starting with the base SVG code the circular progress bar actually contains two circles as you can see here one is the base Circle and one is the value Circle the base circle is the gray Circle that is underneath and then the value circle is the other Circle that is overlaid over the base Circle so just keep that in mind so the base Circle we have this field and we have the stroke base Circle color and we have the stroke width and then for the value Circle this is the CSS on it we have the value Circle color and the stroke width so now here is where we are setting the colors for each of those circles so the base Circle we set it as this gray and the value Circle we set it as this black so what we are doing here is that for the base Circle the bicycle color which is this here we are substituting it with whatever value we add in this line here so we added gray here so that means it is substituting this text here which is also here with our new value the same thing for the value Circle color it substitute this text here for the black that we added here and that is done by this substitute code here so what that means is that here you can add in whatever colors you want to add so you can add in the name of the colors itself or you're adding the rgba code to it then the next thing is if you want to increase the thickness of the progress bar So currently we've set it as eight so let's say you wanted it a little bit thicker to let's say nine for instance you will notice that the progress bar is thicker and then the last thing you need to know is as regards the radius and the viewports of the SVG itself so we've already set the viewport in the first part of the code I don't think you need to touch that since that doesn't need to change but then if you want to increase or reduce the radius you can set that there and all you need to do is that once you've changed the radius you need to also change this value 169.646 you'll change that to the circumference of the new Circle or the the new radius that you set so let's say for instance we want to reduce the radius to about 25 then just give me a moment let me calculate the circumference so to explain what is going on here there is a HTML property called stroke Dash array it takes in two values the first value is the amount of pixels it should display in the circumference and the next value is the amount of space It should leave so this display value is being replaced by the value circumference using the substitute code here and the percentage is a percentage of the circumference of the circle so if you say 20 of this it puts in that 20 here and you only feels in 20 of the pixels in the whole circumference and then since we wanted to leave more space than the rest of the circumference so just make sure that this next value is greater than the the max value the max circumference of the circle or the circumference of the circle so lastly let's replace the book so lastly let's replace the blue column with a function that checks the value of the price rating so if it's less than 40 this should be the value and so on similar to what we did in the previous galleries so looking at that now you can see the difference circular progress bar and let's just reduce the stroke width to seven so that it can be a little bit thinner over it and that looks clean nice I hope by now you will be able to level up your powerapps gallery design skills if you found this content helpful please like And subscribe to the channel and until next time bye [Music] thank you

Channel: Tolu Victor

Views: 73,329

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

Id: usTGrplF48I

Length: 82min 0sec (4920 seconds)

Published: Thu Apr 20 2023