PowerApps: Scroll Bar In Gallery

Hello Friends,

Welcome back with another post on PowerApps. Sometimes, we came across with a situation where we have to display a large number of columns in gallery (usually - vertical gallery or flexible height gallery) and doing so, the gallery width goes beyond the screen width. Unfortunately, the gallery doesn't have any horizontal scroll. So, how to overcome this situation?

Today, we are going to create something which will resolve this issue.

Let's start.

1. Before starting, we need a collection to be used as datasource. If you have a datasource then it's fine. For demo purpose, I am creating a collection as per below schema.

1. ClearCollect(
       collSampleData,
       {
           ID: "1",
           EmployeeID: "ES-1001",
           FirstName: "Tonya ",
           LastName: " Guzma",
           Father: "Anthony Shea",
           Mother: "Rhonda Schultz",
           Child1: "Jimmy Moore",
           Child2: "Jessica Cruz",
           Key1: "CED6E09DF06F4C1CB269662F2BE2954D",
           Key2: "CEB2CC72451C454F96077DD931308910",
           Key3: "8F03AA3F37694C978F3719B3E36C2EB9"
       } )

2. Added around 160 records thereafter in this collection.
3. Login to PowerApps Maker Portal and create a Canvas App.
1. 
4. Rename the sceen as "ScreenHome".
5. Choose the App >> OnStart property and create a collection as stated above.
1. 
6. Then click on ellipses of App and choose "Run OnStart".
1. 
7. Now add "Horizontal container" on screen. Wherever in doubt, match the control icon and set the properties as-
1. Name: cnt_Horizontal_Main
2. LayoutOverflowX (Horizontal Overflow): LayoutOverflow.Scroll
3. X: 0
4. Y: 0
5. Width: ScreenHome.Width
6. Height: ScreenHome.Height
7. BorderColor: ColorValue("#007F00")
8. BorderStyle: BorderStyle.Solid
9. BorderThickness: 1
10. 
8. Inside this container, add plain "Container" and set it's properties as-
1. Name: cnt_Plain_Inner
2. AlignInContainer: AlignInContainer.SetByContainer
3. FillPortions (Flexible Width): 0
4. Width: (Set Later Using Gallery Width)
5. Height: Parent.Height-20 (20 is subtracted to view the horizontal scroll of parent container)
6. 
9. Now add label controls to create headers of gallery.
10. Add "Text label" and set properties as below-
1. Name: lbl_Header_ID
2. Text: ID
3. Size: 15
4. FontWeight: FontWeight.Semibold
5. Align: Align.Center
6. X: 0
7. Y: 0
8. Width: 150
9. Height: 40
10. Color: RGBA(255, 255, 255, 1)
11. Fill: RGBA(0, 18, 107, 1)
11. Add another "Text label" and set properties as below-
1. Name: lbl_Header_EmployeeID
2. Text: Employee ID
3. Size: 15
4. FontWeight: FontWeight.Semibold
5. Align: Align.Center
6. X: lbl_Header_ID.X+lbl_Header_ID.Width
7. Y: lbl_Header_ID.Y
8. Width: 150
9. Height: 40
10. Color: RGBA(255, 255, 255, 1)
11. Fill: RGBA(0, 18, 107, 1)
12. The layout comes out to be-
1. 
13. Now, add "Text label" for rest of the headers and set properties as mentioned above (similar to lbl_Header_EmployeeID). Remember to change the X property value based upon previous control each time. The naming convention, I am using here for rest of the headers as-
1. Name: lbl_Header_FirstName
1. Text: First Name
2. Name: lbl_Header_LastName
1. Text: Last Name
3. Name: lbl_Header_Father
1. Text: Father Name
4. Name: lbl_Header_Mother
1. Text: Mother Name
5. Name: lbl_Header_Child1
1. Text: Child 1
6. Name: lbl_Header_Child2
1. Text: Child 2
7. Name: lbl_Header_Key1
1. Text: Key 1
8. Name: lbl_Header_Key2
1. Text: Key 2
9. Name: lbl_Header_Key3
1. Text: Key 3
14. The outcome will be-
1. 
15. Now, the next step is to add a Gallery. Therefore, click on Insert and choose Blank flexible height gallery.
1. 
2. 
16. Set the properties of gallery as-
1. Name: gal_BFHG_UserDetails
2. Items (Data source): collSampleData
3. X: lbl_Header_ID.X
4. Y: lbl_Header_ID.Y+lbl_Header_ID.Height
5. Width: lbl_Header_Key3.X+lbl_Header_Key3.Width
6. Height: Parent.Height-Self.Y
7. TemplateSize: 40
8. TemplatePadding: 5
9. 
17. Now edit the template and add labels to display the data (items). The process will be same as we did for Headers.
18. Click on edit template icon (pen with circle) in gallery and the click on Insert and choose Text label. Set properties as below
1. Name: lbl_Item_ID
2. Text: ThisItem.ID
3. LineHeight: 1
4. X: lbl_Header_ID.X
5. Y: 0
6. Width: lbl_Header_ID.Width
7. Height: Parent.TemplateHeight
8. 
19. Add another Text label and set properties as below-
1. Name: lbl_Item_EmployeeID
2. Text: ThisItem.EmployeeID
3. LineHeight: 1
4. X: lbl_Header_EmployeeID.X
5. Y: lbl_Item_ID.Y
6. Width: lbl_Header_EmployeeID.Width
7. Height: Parent.TemplateHeight
8. 
20. Similarly add rest of the labels.
1. Name: lbl_Item_FirstName
1. Text: ThisItem.FirstName
2. X: lbl_Header_FirstName.X
3. Width: lbl_Header_FirstName.Width
2. Name: lbl_Item_LastName
1. Text: ThisItem.LastName
2. X: lbl_Header_LastName.X
3. Width: lbl_Header_LastName.Width
3. Name: lbl_Item_Father
1. Text: ThisItem.Father
2. X: lbl_Header_Father.X
3. Width: lbl_Header_Father.Width
4. Name: lbl_Item_Mother
1. Text: ThisItem.Mother
2. X: lbl_Header_Mother.X
3. Width: lbl_Header_Mother.Width
5. Name: lbl_Item_Child1
1. Text: ThisItem.Child1
2. X: lbl_Header_Child1.X
3. Width: lbl_Header_Child1.Width
6. Name: lbl_Item_Child2
1. Text: ThisItem.Child2
2. X: lbl_Header_Child2.X
3. Width: lbl_Header_Child2.Width
7. Name: lbl_Item_Key1
1. Text: ThisItem.Key1
2. X: lbl_Header_Key1.X
3. Width: lbl_Header_Key1.Width
8. Name: lbl_Item_Key2
1. Text: ThisItem.Key2
2. X: lbl_Header_Key2.X
3. Width: lbl_Header_Key2.Width
9. Name: lbl_Item_Key3
1. Text: ThisItem.Key3
2. X: lbl_Header_Key3.X
3. Width: lbl_Header_Key3.Width
10. 
21. Now, we will set the width of parent container of gallery; i.e. cnt_Plain_Inner. This will be set to the width of gallery. This is the main point of this post. This setting will provide you the horizontal scroll feature. For this, click on "cnt_Plain_Inner" and then click on Width property and set the width as-
1. Width: gal_BFHG_UserDetails.Width
2. 
22. All set now. Save the app and play. If you wish to increase the width of any gallery item, you can set it accordingly. For example, I found that Key1, Key2, Key3 columns need to have more width. So, I am increasing width for these 3 columns. To increase the width of column, you have to increase the width of header labels as the gallery columns are referring the width of their respective headers.
1. 
23. Save the app and play.
1. 
2. 
3. 
24. As you can see, we can scroll the gallery horizontally. The gallery itself is having it's vertical scroll. So, this is how, we can apply Horizontal scroll as well as Vertical scroll.

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !