A Gallery control can show multiple records from a data source, and each record can contain multiple types of data. By default, a first item in gallery is always auto selected.
There are three major types of gallery control available in Power apps.
Vertical gallery: It displays each row of data is displayed vertically down the canvas.
Horizontal gallery: It displays each row of data is displayed horizontally on the canvas app.
Flexible height gallery: It displays each row of data vertically. It can have different heights for each row. It is useful when you want to display social feeds or news feeds data.
Other than these galleries, you can directly add a blank gallery to the canvas app for any type of these galleries.
To display the data on these galleries user has to set the Layout property for gallery or customize the gallery by adding control to gallery.
Blank vertical gallery: It adds a blank vertical gallery on the canvas app. It has same property as Vertical gallery. Unlike Vertical gallery, it does not display any data by default because it’s Layout property is set to Blank.
Blank horizontal gallery: It adds a blank Horizontal gallery on the canvas app. It has same property as Horizontal gallery. Unlike Horizontal gallery, it does not display any data by default because it’s Layout property is set to Blank.
Blank flexible height gallery: It adds a blank Flexible height gallery on the canvas app. Unlike, Flexible height gallery it does not display any data by default because it’s Layout property is set to Blank.
Create a gallery in canvas app
Lets, add a gallery control. Go to Insert tab, and select Vertical gallery and named as gal_emp.
Now, you can see gallery control is added to canvas app.
Now, we add a data source to gallery to display the records on gallery. Here, data source is SharePoint list, and its name is EmpInfo.
Now to add data source, go to the Properties tab of gallery and click on Data source drop down and it will show the list of an existing data source/s.
In our case, we have selected SharePoint list.
Once, we select the data source. Power Apps automatically populate the data on gallery control with default layout. The default layout is Image, title, and sub title.
Note that, it does not show all details at once. Means, by default three controls are added in the gallery’s template, one image and two label control as per the layout selected for gallery.
And these controls show the details of EmpID and Employee Name, and image from EmpInfo data source. But, we can customize the gallery to add more details.
By default, these controls show two columns of the Orders table
Customizing the gallery
You can customize the gallery by using gallery’s predefined properties and custom formula.
Change gallery layout
You can simply go to Layout property of gallery and select an appropriate layout as per your requirement. Here, we have selected Title, subtitle and body layout.
Now, you can see the gallery layout has been changed.
Add more items/details to gallery
As, by default gallery displays few details as per selected layout. If you want to add more items in gallery, there are two approach that you can follow to do this.
First approach, you can add a new Text label control inside the first row of gallery. For this just select the first row of gallery.
Then go to Insert tab and select Text label control to add inside the gallery.
Second approach, Inside the first row of gallery, select any existing label control and paste it inside the first row of gallery then define the Text property of label.
Here, we have selected a EmpID label control and paste it.
Now, we will display the country information on this label. Select the copied label and set its Text property to below code.
ThisItem.Country
You can see, Country detail is added in gallery for each records.
Similarly, you can add other details as well.
Remove an existing control from gallery
To remove any existing label control from gallery. You can simply select control and press delete key.
You can see, once you press delete key it gets deleted.
Customize the font color and size
To customize the font, size, and color of label control. Select the label, here we have selected Employee Name label then go to the Properties tab of gallery.
Set Font to Verdana and Size to 15.
Next, we will set a Font weight.
Go to Font weight property, you will see by default Power apps has applied a formula to set the font weight that check, if the Item is selected in gallery then set the font weight to Semibold otherwise Normal.
If(ThisItem.IsSelected, FontWeight.Semibold, FontWeight.Normal)
If you want to set different font weight just remove an existing formula from formula bar and select other font weight from drop down.
Here, we have selected font weight as Bold.
And you can see, now for each records in gallery Employee Name is showing in Bold.
Next, we will set font color, let’s go to Color property and set font color to green.
You can, also customize the multiple label control at once. Just select multiple label control by pressing Ctrl key and then go to Properties tab and define the property for them.
Here, we have selected EmpId and City label.
Highlight the background color for selected item in a gallery
As all the items, or rows in a gallery are having same background color that is white in our case. So, it is hard to tell which item is currently selected in gallery.
Note that, by default first item in gallery is auto selected.
To avoid the confusion, we can set the background color for selected item in gallery.
Let’s change the background color for selected item in gallery.
Select Gallery control, go to TemplateFill property and write below formula.
It checks, if the current item is selected in gallery then set it’s color to purple other wise white smoke.
If( ThisItem.IsSelected, Color.Purple, Color.WhiteSmoke )
Next, change the font color for item EmpId and City, if current item is selected them change the font color to White else Black.
Select the EmpId and City label control and set their Color property to below formula.
If( ThisItem.IsSelected, Color.White, Color.Black )
Let’s take a look at gallery.
Lets, select a third item in gallery, and you can see it’s background color is changed.
Add border to gallery
To add the border to gallery, select gallery control and go to Properties tab. Then select Border color to Purple.
Next, Border style, you can select Solid, Dashed, Dotted, or None. Lets select keep it as Solid.
Next, select the Border thickness, here we define it as 2.
Show hide scroll bar in gallery
You can hide a scroll bar from vertical gallery, by default it appears.
To hide the scroll bar, select gallery control and set the ShowScrollbar property to false.
Arrange/Adjust the order of items in gallery
To arrange the order of items, you can simply select then drag and drop them any where you want to place them.
Let’s place the Employee name item next to EmpID.
Select Employee name item and drag it and drop next to EmpID.
Now, you can see Employee Name is showing next to EmpID.
Hide and show control in gallery
To hide and show control in gallery you can set it’s Visible property to false, by default it is true.
Similarly, you can explore other properties as well as few of them shown below.
Item: This property allows you to define the source of data that appears in a control such as a gallery, a list, etc.
Fill: This property allows you to the background color of a control.
TemplatePadding: This property allows you to set the distance between items in a gallery.
Height: This property allows you to set the distance between a control’s top and bottom edges.
Width: This property allows you to set the distance between a control’s left and right edges.
Creating a Horizontal gallery
Let’s take a blank screen, then go to Insert tab and add a Horizontal gallery.
Once, the Horizontal gallery is added to canvas app. Add data source to gallery.
You can add data source in similar way as we did earlier. You can see, it looks like this as shown below.
Add navigation to Gallery
To show the navigation to gallery, select gallery control and go to Properties tab and enable the Show Navigation.
You can see, Navigation icon appears on gallery.
Similarly, you can explore Layout property, Color property and customize font, size, and font style for the gallery and other properties.
Creating a Flexible Height gallery
To add the Flexible Height gallery, go to Insert tab then select search for Flexible height gallery in search box and select Flexible height gallery.
Once, it is added then select a data source to show the data on gallery.
Now, you can see the data is displayed on gallery.
Change the gallery layout
To change the layout, select the gallery control and go to Properties tab and select Layout as News feed.
You can see, gallery layout has been changed.
Similarly, you can explore gallery’s Color, Font, and other properties.
Also Read..
Highlight selected item in gallery
Add Alternate background color to rows
Sort Items in gallery Power Apps
Change Item color in gallery based on value
Filter and search an items in Gallery Power Apps
