Power Apps Tutorial - Responsive Screen with Gallery & Filters - Beginner to Advanced

hello everyone in this video I will show you how to create a responsive Gallery control along with a filter panel which will allow the user to filter the data in the gallery we will Leverage The responsive container controls to create our responsive screen these containers will fill the screen for the calorie control we'll have the filter panel on the right that will show and hide plus we will also show an applied filters panel on the top that will showcase to the user which filters are applied so let's get started with the step-by-step tutorial [Music] let's begin with a blank canvas PowerApp I will give my app a name pick the tablet form factor and click create I will create a new screen and leverage one of the layout templates header main section and footer this leverages the responsive container controls it has a vertical container that has three other containers within it header main section and footer in my scenario I don't need a footer so I can delete this I'll create the header for my screen I have gone ahead and uploaded a couple of images I'll select the header container and in here I will insert an image control the header container has a height of 75 and the image control that I just added has a height of a hundred so this I will change to 60 and the alignment and container I will Center align this the image I'll pick power apps this control I will copy Ctrl C and paste Ctrl V the image property for this I will change to dataverse image that I uploaded I'll select my header container and insert a label control I can select it on the screen right click and I can reorder the control within this container I want the label to be in the center of the images so I'll move it to the left this container is a horizontal container and the controls within it I will have the ability to set its width to flexible with meaning it can take the width based upon the real estate that's available in that container if I turn flexible with on for this specific control you can see how the label control is taking the entire real estate that's available and the two image controls have flexible width turned off and they have a fixed width of a hundred the label control I will Center align its text its alignment in the container I will stretch I'll give it a text I'll increase the font size in the main section container is where I would like to add a gallery that shows data from my data source and I would like to add a filter pane which allows the user to refine or filter the data in the gallery I would like to position them horizontally inside this container the main section container has the direction vertical so I'll change this to horizontal and in this I will insert a blank vertical gallery and for my filter panel I will insert a vertical container both of these controls have the flexible width turned on The Fill portion is one of two meaning each control within this main section container is taking 50 percent of the real estate I will rename this to my filter container I will turn off flexible width because I would like to define the width of this specific container myself I will set it to 300. now at this point I will go ahead and save my app the filter container I would like to give it a drop shadow effect so it appears like that container is a panel and to do that I will go to settings support and change the authoring version of my app the authoring version has to be this specific version or Beyond I'll pick the latest version and click reload and apply once the app has Reloaded if I go to settings and support we can see that the authoring version is updated screen one it's something that I do not need so I'll delete this and I've renamed screen 2 to home screen now if I select the filter container you will note we have a new property called drop shadow I will set this to extra bold this gives like a nice drop shadow effect which makes this container appear like a panel and all the other containers as well will have that same property I'll set the drop Shadows for those to light so this is how the screen appears with the panel on the right hand side with this new version we also have a new theme soft blue I'll go ahead and select this one to change the theme of my power app you can select any data source of your choice in my case I have a table and dataverse called work tasks so I will select this and connect it to my PowerApp it's a very simple table I have the name of my task the due date the priority of the task and work task status my gallery control the data source I will select my work tasks the gallery is what I would like to represent in the form of a data table tabular form I will select the gallery control click on edit and insert a horizontal container this container I will rename to task data container its X position I will set to 0 y position 0 with I will set to parent dot template with and height parent dot template height so this container sits exactly in the template item which is the first item of the gallery so if I pick the gallery control and change its template size property to let's say 50 you can see how automatically the container fits in that template size that I have defined the gallery has a property called template padding 20 you can see how the rows in my gallery are spaced out and this container has the drop shadow set to light in this container control insert a label control its alignment I'll set the stretch and I will enable flexible width it's text I will align in the center so I have one label right now in this container I'll copy Ctrl C paste Ctrl V so that's a second label third label fourth label the first label text property will be this item dot name that will show the name of my task second label this item dot due date which I would like to format as month day here the third label I will show the priority of the task and the fourth label I will show the status of the task now the first label that shows the task name if you want to give it more real estate in that specific container The Fill portion is one of four I can increase the fill portion so if I set this to 2 this gets more real estate as against the other three next I would like to add header columns for my gallery and to add that header section right on top of this Gallery I will have to ensure that in my main section container I add another container which would be a vertical container so select the main section container and insert a vertical container this new container I am going to rename this as my gallery container right click reorder move to start the gallery needs to go inside this container so right click cut select the main container right click paste and in the gallery container I will insert another container that will show the headers which will be a horizontal container this I will rename to gal header container right click reorder and move it above the gallery I'll turn off flexible height and give it a fixed height of let's say 50 select the gallery header container insert a label text alignment center its alignment and the container stretch flexible width turned on I need four headers for the four columns that I'm representing in my gallery so I'll copy this Ctrl C and paste it three more times so I have four different label controls the first label control I'll give it additional fill portion I'll set it to two the gal header container I can give it a background color I'll pick the blue and I will select all of these label controls I will change the color property to White these labels I can start setting their text property this is Task title this is due date priority and status the filter container panel on the right hand side I would like to show and hide that depending upon an icon that the user clicks in my gal header container I will insert the filter icon I will change the color to white give it a height of 30 and I will Center align this in the container its width I will set to 25 on select of this filter icon I will set a variable called show panel to not of that same variable the filter container has a property called visible which I will set to that variable called show panel so if I click this notice it closes the panel and if I click it again it will open the panel if I go to settings and display and turn off the scaling feature as I start reducing the width you can see how the controls are repositioning themselves in the filter container I will insert a label Center align the text stretch the alignment and the container the text I will set to task title and for the filter container I will insert a text input control I'll set its width to 260 alignment center default property I will make it empty and hint text I will state search in task title you can also add emojis in the filter container I will also insert a button control Center align this I'll set its text to reset on select of the button reset my text input control and for the gallery the items property I will change this by using the search function on my data source where the text text input control dot text and search in the name column so if I preview the app as I start searching the gallery is being filtered based on the text that I'm adding in this text box if I click reset it will reset now when the user has entered some text for searching I would like to highlight that a filter is applied to this specific column in this case task title text property if not is blank my text box control dot text in that case apply an emoji and append it to task title we can see we've applied the filter so it shows the filter if I reset it goes away let's add two more filters one for priority and one for status both of which are Choice columns I'll copy and paste my label control and change this to priority I'll insert a combo box control I'll set its width to 260 Center align this allow multiple selection I'll disable this I'll go to Advanced find items I'll remove if there is no selection made I will use the text all and for the items property I will use the function choices of my data source which is work tasks dot my choice column which is priority so this will list out all those choices and these two controls I will copy and paste them again because my next filter is on the status column which is also a choice column here I'll change the choices to my work.status column the reset I will move it to the bottom and this filter container I can give some gap between the controls I'll just make it 10. when reset is clicked now I would like to also reset my combo boxes and for my calorie control I had the search function now I'll add a filter function as well to filter this priority column should be equal to priority combo box dot selected dot value and there could be a scenario where that priority combo box is empty so I'll add an or condition is blank priority dot selected dot value I'll put a comma and add another condition very similar to priority the difference is I'll point to the work task status column and related with the status combo box close the filter function format text this is what the formula looks like let's pick priority low so it filters on all the low priority items let's say priority High status completed so it's applying a combination of the filters I can even search here all the three combinations working together if I click reset it will clear all the filters four the priority header this will be priority combobox.selected dot value and then for status we will check to see if the status combobox.selected dot value is not blank then show that specific emoji you can see the filter is being represented status completed there it is in gallery container I will insert another container this will be a horizontal container I will reorder this right at the top rename this to applied filters container turn off flexible height give it a defined height of let's say 50 and in this I will first insert a label the text I will say applied filters next I will insert the button control this will show the applied filter for the task title the text for this button title colon and concatenate this with the text input control dot text so it will show what the user is searching on plus when the user clicks on this button I would like to remove that specific filter basically reset this text box and to give an indicator that the user can do that I will also add the X alphabet to kind of show that if you click this it will remove that filter and on select of this button all I have to do is reset that text box and this bottom should be visible only if that text input controls text is not blank right now the filter is applied so it shows it even if I close the panel I can see it if I click this that filter is removed because that control is reset I would like to do the same thing for priority and status so I'll simply copy this button and paste it two times the second one I will reset the priority combo box it's text I will change to Priority combo box priority dot selected dot value and its visibility show it only if there is a selection made in that combo box control the same process I will repeat for the last button you can see how it shows the independent filters if I reset here they all will go away if I start selecting we'll start showing the values and I can click to remove those specific filters if no value is selected for filtering in any of my filters this entire applied filters container is something that I can hide so I'll set its visibility to if the text input control is blank or the priority combo box selection is blank or the status combo box selection value is blank the moment I make a selection that panel becomes visible and if I start removing those filters you can see how the gallery filter logic is updating on the Fly you can even enhance this experience where I can add a combo box with multiple selections so you can see I have a categories column which is a multi-choice selection column in dataverse if I pick marketing it will show me all the values that have the category marketing if I pick engineering or show me all the values where it either has marketing or engineering and you can see those are lining up right there on the top here is an example of that same responsive Gallery like a data table with Filter panel and applied filters in action with SharePoint as a data source show me all the high priority items high priority and in progress the task title begins with task five all those filters are lined up on the top can individually remove them or clear all of them in one go if you enjoyed this video then do like comment and subscribe to my YouTube channel and thank you so much for watching

Channel: Reza Dorrani

Views: 125,329

Keywords: powerapps, power apps, powerapps gallery tutorial, powerapps filter gallery, power apps responsive, powerapps responsive gallery, power apps responsive canvas apps, responsive, responsive design tutorial, power apps responsive screen, filter, containers, responsive containers, power apps responsive layout, power apps responsive layout design, powerapps multiple filters on gallery, tutorial, power apps beginner tutorial, reza dorrani, powerapps tutorial, gallery, how to, microsoft, apps

Id: ubnPqwWdBL0

Length: 24min 19sec (1459 seconds)

Published: Mon May 08 2023