Top 5 Must-Know GALLERY Features in Power Apps

hello everyone razza here in this video I will show you five must know features or tips of the gallery control in power apps the five features include the fields property the use of co-pilot the default property flexible height Galleries and the navigation step property so let's check this video out in [Music] action so let's begin with inserting the gallery control which allows us to show multiple records from a data source I'll insert a vertical Gallery in which the items are stacked vertically the data source that I will be connecting to is a very simple SharePoint list that has various types of columns so I'll connect my gallery to my SharePoint list and by default for a vertical Gallery we are presented with a layout which is image title and subtitle so the gallery template here contains an image control and a couple of label controls we are provided with various layout options to choose from I pick title subtitle and body this will go and transform my gallery layout and now it includes three label controls now the first tip here is to use the fields property of a gallery if I go to edit this will list out all those label controls title two is the name of my label control in which it is showcasing the title column data coming in from my SharePoint list subtitle two shows the description data and the body label control shows the status value now the beauty of fields is it understands the types of columns that it is dealing with status is a choice column in my SharePoint list so we can see how it's pointing to the value property of that choice column now subtitle is showing the description if I open this dropdown it will list out all the columns from my connected data source now priority is also a choice column in my SharePoint list if I would like to show priority all I have to do is just go pick that column let's try and show a person type column value so for body I will say assign assigned to and observe the display value currently shows the claims token of the user person type column exposes various properties I can easily see that here and pick the property that I want to display I can change that to email or job title or department or so on so forth tag in my case is a managed metadata type column in SharePoint let's try and show that instead of priority I'll simply say tag and now it's a managed metadata column it gives me all the properties related to that column I have full flexibility to decide which property from that complex type column I would like to pick if I was to edit the gallery and insert additional label controls so I'll just drop a couple of label controls now if I go back to Fields notice my new label control names are also listed here so for due date I would like to show the due date assign two I'll pick assign two and show the display name so you can see how easily I can pick my columns and it will straight out represent in the gallery the next tip is around using the co-pilot feature now when I edit the gallery for these label controls I have the option of a copilot let's try this here I get two options text formatting and conditional formatting now the due date label control is showcasing the due date data from my data source let's format its text now copilot already has the sample data here so it understands the format and if I click on desired format notice how it suggests or recommends certain formats related to dates I can pick any of these or I can Define my own format and you can see as I Define these formats Co pilot will suggest the expression for me in order to transform the text to display in this format here Windows dot will open the emoji keyboard I can also add emojis notice how the formula changes here to concatenate that emoji with the expression to transform the text if I click on this it will select this expression that copile has generated for me and I can say apply and just like that my gallery transforms how that data is showcased for that date label control now notice there are certain scenarios where the date column value is empty so for that I'll go back to copilot and this time go to conditional formatting here I will say if due date is blank then hide notice it relates to the visible property of this label control so for this property it suggests the expression not is blank this item. due date I will select it click apply and notice now when the due date is empty it does not display that control let's try another conditional formatting if due date is less than today then set color to Red co-pilot suggests an expression for the color property I'll select and apply and notice wherever the due dates are less than today it's conditionally formatting the color if you select Gallery we can take advant of copilot to frame our formulas sorting filtering or searching data in the gallery so here's an example for sorting I'll say sort it suggests a formula so sort issue tracker that's the name of my connected SharePoint list by let's say modified which is a column and SharePoint that tracks the modified date Z to a meaning descending order so you can see for the items property this is the expression that co-pilot is suggesting I can apply and this will go and sort the data in my gallery the next STP is around the default property of the gallery control Now by Design the gallery control has the first item selected the user can go ahead and select any other item in the gallery but there are scenarios in which you would not want a default selection for the gallery to begin with and to do that all you have to do is for the gallery controls default property you set that to an empty record now if You observe no item in the gallery is selected to begin with and and the moment I make a selection that specific item would be selected now let me show you one use of that default property here I have a gallery whose default property is set to that empty record now when I select an item in the gallery a form control that is connected to the gallery lights up and shows the data respective to the selected item of the gallery it's it's a form control so the user has the option to change the column values let's say I changed the priority here from height to low I submit we can see that the priority value has changed in the screen I've also provided the users an option to filter the data based on the status in progress when I select that the gallery gets filtered there is no specific item selected to begin begin with if you explore the properties we have a property called show navigation and if this is turned on it gives us this icon which allows us to navigate through the items of the gallery so I can scroll or I can navigate the scroll bar the navigation I can turn them on or off now in this case I'm showing the navigation I'm putting the ID of the item from my SharePoint list here to show that when you click the step navigation it navigates through the items one by one however if you would like to increase that step count you have an option for that navigation step is the property by default it's one my gallery is showing five items so when I hit the step navigation it should move me to the next five items and to do that all I have to do is change the navigation step now if you note it shows the items 1 to five I select shows the next five select takes me to the last five and I can navigate back to the top in the same manner different types of galleries that we can leverage in general there are three types of galleries available we have a vertical gallery there is also a blank vertical Gallery it is exactly the same as the vertical Gallery just the difference is that when the gallery loads the layout will be blank to begin with if you pick vertical Gallery the layout will be image title and subtitle to begin with a vertical Gallery Stacks data vertically there is also a horizontal gallery that stacks data horizontally my vertical Gallery I'll connect it to a list and SharePoint called asset manager and the horizontal Gallery as well I'll connect it to that same list now if I preview this on the left I have the vertical Gallery that's showcasing the data vertically and on the right I have the horizontal gallery that is showcasing the data horizontally now the third type of gallery that we have is called a flexible height Gallery this Gallery Stacks data vertically but the advantage we get here is that the height of the items of the gallery are flexible so let's compare this with the vertical Gallery I'll add a vertical gallery and I will add a flexible height Gallery the vertical Gallery I will connect it to my my issue tracker list my flexible height Gallery the data source I'll pick is my issue tracker list so here I'll start with a blank flexible height gallery and in this Gallery I can start inserting my labels to show the data the first label will show the title the second label will show the description and the third label is showcasing the status value my description column is of type multi-lines of text so let me go ahead and update the description to include large data for certain rows in my vertical height Gallery my label control is not showcasing the complete value in the description column of course I can go and turn on auto height but then this will go beyond the template height of that calerie and then in that case I have to adjust the height so I fit that data but then if you notice the template size of the vertical height Gallery is fixed if I have a large description it will consume that real estate but if I don't I'll get a big blank white space now for a flexible height Gallery here is my label that's showing the description value if I turn on auto height for this I place the status column above now if I preview this notice how the height is flexible and that's why this is a flexible height gallery now if I need to add a demarcation between the gallery items I'll simply edit and insert the rectangle shape I'll just place it right here for this item now this rectangle shape should sit right below the label that's showcasing the description and for the rectangle shapes y property I'll make it relative to the description label by using the formula lbl description doy plus lbl description do height and I'll add another 5 pixel if I preview the app now that rectangle shape is positioned right at the end where that specific record ends in the gallery control and that's flexible height Gallery in action 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: 25,887

Keywords: power apps gallery, gallery, powerapps, power apps, gallery control powerapps, powerapps gallery control, flexible height gallery, blank flexible height gallery, gallery navigation step, powerapps gallery default, power apps copilot demo, copilot, gallery copilot, gallery copilot conditional formatting, reza dorrani, powerapps gallery fields, gallery tips and tricks, gallery powerapps, gallery features, gallery properties, vertical gallery, horizontal gallery, powerapps copilot

Id: dsCvxJ8mK4Y

Length: 15min 54sec (954 seconds)

Published: Mon Nov 27 2023