Hello Friends,
Welcome back with another post on PowerApps. We had already discussed about scrolling in gallery few weeks back.
However, today, I am again discussing the same using one more method. With this method, we will be able to show both scroll visible.
Today, we will use the slider control for providing horizontal scroll. Additionally, we will freeze first 2 fields and rest fields will be scrolled. We will create component for Header labels as well with Sort & Filter icons. So let's start-
- Login to PowerApps maker portal and create a blank canvas app (Tablet). I named it "Demo-ScrollGallery".
- Also rename the default screen from Screen1 to HomeScreen (optional).
- Click on "Components" >> "+ New Component" to add a new component.
- Rename this component to "HeaderLabelComponent".
- Set properties as-
- Width: 200
- Height: 40
- Fill: RGBA(50, 86, 160, 1)
- Create below custom properties-
Sr. No. Display Name Name Description Property Type Data Type Default Value 1 Color Color Text Color (Header Label Text Color) Input Color RGBA(255, 255, 255, 1) 2 Text Text Display Text (Header Lable Text) Input Text "Text" 3 Font Size FontSize Font Size Input Number 10 4 Separator Color SeparatorColor Separator Color Input Color RGBA(255, 255, 255, 1) 5 Separator Width SeparatorWidth Separator Width Input Number 2 6 Separator Visible SeparatorVisible Is Separator Visible or Not (true/false) Input Boolean true 7 Filter Icon Color FilterIconColor Color Of The Filter Icon Input Color RGBA(0, 0, 0, 1) 8 Filter Icon Background Color FilterIconBackgroundColor Background Color Of The Filter Icon Input Color RGBA(255, 255, 0, 1) 9 Filter Icon Width FilterIconWidth Filter Icon Width Input Number 24 10 Filter Icon Visible FilterIconVisible Filter Icon Visible Input Boolean true 11 Sort Icon Color SortIconColor Color Of The Sort Icon Input Color RGBA(0, 0, 0, 1) 12 Sort Icon Background Color SortIconBackgroundColor Background Color Of The Sort Icon Input Color RGBA(255, 255, 0, 1) 13 Sort Icon Width SortIconWidth Sort Icon Width Input Number 24 14 Sort Icon Visible SortIconVisible Sort Icon Visible Input Boolean true 
- Now, insert below controls and rename them as mentioned-
- Text label : cmp_lbl_HeaderText
- Rectangle : cmp_rct_HeaderCtrlSeparator
- Icon : cmp_ico_Sort
- Icon : cmp_ico_Filter
- Now, set properties of each control as below-
- Control Name: cmp_lbl_HeaderText
- Properties-
- Text : HeaderLabelComponent.Text
- Size : HeaderLabelComponent.FontSize
- Fontweight : Semibold
- Align : Center
- X : 0
- Y : 0
- Width : HeaderLabelComponent.Width-If(HeaderLabelComponent.SeparatorVisible,cmp_rct_HeaderCtrlSeparator.Width,0)-If(HeaderLabelComponent.SortIconVisible,cmp_ico_Sort.Width,0)-If(HeaderLabelComponent.FilterIconVisible,cmp_ico_Filter.Width,0)
- Height : HeaderLabelComponent.Height
- Color : HeaderLabelComponent.Color
- Control Name: cmp_rct_HeaderCtrlSeparator
- Properties-
- Visible : HeaderLabelComponent.SeparatorVisible
- X : HeaderLabelComponent.Width - Self.Width
- Y : cmp_lbl_HeaderText.Y
- Width : If(HeaderLabelComponent.SeparatorVisible,HeaderLabelComponent.SeparatorWidth, 0)
- Height : HeaderLabelComponent.Height
- Fill : HeaderLabelComponent.SeparatorColor
- Control Name: cmp_ico_Sort
- Properties-
- Icon : Icon.Sort
- Visible : HeaderLabelComponent.SortIconVisible
- X : HeaderLabelComponent.Width - cmp_rct_HeaderCtrlSeparator.Width - Self.Width
- Y : cmp_lbl_HeaderText.Y
- Width : If(HeaderLabelComponent.SortIconVisible, HeaderLabelComponent.SortIconWidth, 0)
- Height : HeaderLabelComponent.Height
- Color : HeaderLabelComponent.SortIconColor
- Fill : HeaderLabelComponent.SortIconBackgroundColor
- BorderColor : RGBA(0, 0, 0, 0)
- BorderThickness : 0
- Control: cmp_ico_Filter
- Properties-
- Icon : Icon.Filter
- Visible : HeaderLabelComponent.FilterIconVisible
- X : HeaderLabelComponent.Width - cmp_rct_HeaderCtrlSeparator.Width - cmp_ico_Sort.Width - Self.Width
- Y : cmp_lbl_HeaderText.Y
- Width : If(HeaderLabelComponent.FilterIconVisible, HeaderLabelComponent.FilterIconWidth, 0)
- Height : HeaderLabelComponent.Height
- Color : HeaderLabelComponent.FilterIconColor
- Fill : HeaderLabelComponent.FilterIconBackgroundColor
- BorderColor : RGBA(0, 0, 0, 0)
- BorderThickness : 0
- The header label component is ready to use. It will reflect in Insert >> Custom. Now, click on Screens and add one "Container" on HomeScreen and name is "cnt_MainContainer". Set the properties-
- X : 0
- Y : 100
- Width : Parent.Width
- Height : Parent.Height - Self.Y
- Now we will add the HeaderLabelComponent to show the header label of gallery.
- For this click on Insert >> Custom >> HeaderLabelComponent.
- Set the properties. For the component we had created, the properties are divided into 2 sections-
- Default
- Name: hlc_RowID
- X : 0
- Y : 0
- Width : 200
- Height : 40
- Fill : RGBA(172, 62, 11, 1)
- Custom
- Color : RGBA(255, 255, 255, 1)
- Text : Row ID
- FontSize : 12
- SeparatorColor : RGBA(255, 255, 255, 1)
- SeparatorWidth : 2
- SeparatorVisible : true
- FilterIconColor : RGBA(0, 0, 0, 1)
- FilterIconBackgroundColor : RGBA(255, 255, 0, 1)
- FilterIconwidth : 24
- FilterIconVisible : true
- SortIconColor : RGBA(0, 0, 0, 1)
- SortIconBackgroundColor : RGBA(255, 255, 0, 1)
- SortIconwidth : 24
- SortIconVisible : true
- Create a copy of this component by just Copy/Paste (so that we have to not fill each and every property again and again). Set the properties-
- Default
- Name: hlc_FirstName
- X : hlc_RowID.X + hlc_RowID.Width
- Y : hlc_RowID.Y
- Width : 200
- Height : hlc_RowID.Height
- Custom
- Text : First Name
- Similarly, we will start adding copy of components and set their X property based upon previous label component.
- Header Label : Last Name
- Default
- Name: hlc_LastName
- X : hlc_FirstName.X + hlc_FirstName.Width
- Y : hlc_RowID.Y
- Width : 200
- Height : hlc_RowID.Height
- Custom
- Text : Last Name
- Let's create the header labels for below fields-
- Row ID (hlc_RowID)
- First Name (hlc_FirstName)
- Last Name (hlc_LastName)
- Gender (hlc_Gender)
- Age (hlc_Age)
- Email (hlc_Email)
- Phone (hlc_Phone)
- Education (hlc_Education)
- Occupation (hlc_Occupation)
- Experience (hlc_Experience)
- Salary (hlc_Salary)
- MaritalStatus (hlc_MaritalStatus)
- NumberOfChildren (hlc_NumberOfChildren)
- GUID 1 (hlc_GUID1)
- GUID 2 (hlc_GUID2)
- GUID 3 (hlc_GUID3)
- EOG (hlc_EOG)
- The last field EOG is not a part of our table. It will work as gallery delimiter. We will discuss about it later. Just make Width of this (hlc_EOG) label as 0.
- Now just take pause and add the code written at the end of the post on App >> OnStart property. Then click on App and select Run - OnStart
- Add a "Blank flexible height gallery" in the container "cnt_MainContainer".
- Set the properties-
- Name : gal_MasterList
- Items : coll_SampleData
- X : hlc_RowID.X
- Y : hlc_RowID.Y + hlc_RowID.Height
- Width : cnt_MainContainer.Width
- Height : cnt_MainContainer.Height - Self.Y - 20
- We had subtracted 20 for the space for Slider control that we will be adding later on. (or you can use the slidercontrolname.Height)
- TemplateSize : 30
- TemplatePadding : 0
- ShowScrollbar : true
- Now start adding "Text label" to show the data.
- Add first label and set the properties-
- Name : lbl_RowID
- Text : ThisItem.RowID
- Size : 10
- Align : Center
- X : hlc_RowID.X
- Y : 0
- Width : hlc_RowID.Width
- Height : gal_MasterList.TemplateHeight
- Similary Add another label and set the properties-
- Name : lbl_FirstName
- Text : ThisItem.FirstName
- Size : hlc_RowID.FontSize
- Align : Left
- X : hlc_FirstName.X
- Y : hlc_RowID.Y
- Width : hlc_FirstName.Width
- Height : lbl_RowID.Height
- Likewise, add all the labels till GUID3.
- As you can see, currently, we cannot scroll the grid horizontally. So, for that, now, we will add a slider control. This control will be added in cnt_MainContainer. Add a "Slider" control and set the properties-
- Name : sldr_GallerySlider
- Default : 0
- Max : glbl_GalleryWidth
- Min : 0
- ShowValue : false
- X : hlc_RowID.X
- Y : cnt_MainContainer.Height - Self.Height
- Width : cnt_MainContainer.Width
- Height : 20
- RailFill : RGBA(128, 130, 133, 1)
- RailThickness : 15
- ValueFill : Self.ValueFill
- BorderColor : RGBA(0, 0, 0, 0)
- Till here, it was normal process. Now, what we want is that the fields "RowID", "FirstName" & "LastName" should remain freeze and the rest of the fields should scroll with the slider control.
- For this, we have to do nothing except the modifying "X" property of "hlc_Gender" control.
- Set the "X" property of "hlc_Gender" as-
- X : hlc_LastName.X + hlc_LastName.Width - sldr_GallerySlider.Value
- It worked.
- However, if you see, there are some glitches-
- Upon Scrolling, the scrolled content is overlapping the freezed columns ("Row ID", "First Name" and "Last Name").
- Secondly, content of both freezed and scrolled columns are visible.
- The ideal situation is that freezed columns must reamin on top always.
- All scrolled columns and their content must get hide behind the freezed columns.
- For this couple of changes are required. Let's apply-
- Select "hlc_RowID", "hlc_FirstName" and "hlc_LastName".
- Click on ellipses (3 dots) >> Reorder >> Bring to front.
- It will take these 3 controls at the top.
- Now keeping all 3 selected, again click on ellipses >> Reorder >> Send backward.
- Repeat "click on ellipses >> Reorder >> Send backward" until these 3 controls get placed just below the gal_MasterList control.
- Now, expand the gal_MasterList gallery.
- Select "lbl_RowID", "lbl_FirstName" and "lbl_LastName".
- Click on ellipses (3 dots) >> Reorder >> Bring to front.
- Now, for all these 3 controls set the below property-
- Fill : RGBA(255, 255, 255, 1)
- Play the app. This is what we were looking for.
- Additionally, what you can do is that you can add a vertical separator just next to lbl_LastName control so that it will show that this is the boundary of freezed columns. Also you can change the background color (Fill property) of "lbl_RowID", "lbl_FirstName" and "lbl_LastName" to some other light color so that they should appear separate from others.
- Add a vertical separator. For this add a rectangle and set the properties as-
- Name : rct_FixedColumnSeparator
- X : lbl_LastName.X + lbl_LastName.Width - Self.Width
- Y: lbl_LastName.Y
- Width : 1
- Height : gal_MasterList.TemplateHeight
- Fill : RGBA(172, 62, 11, 1)sldr
- Then, set the fill property of "lbl_RowID", "lbl_FirstName" and "lbl_LastName" controls as-
- Fill : RGBA(241, 244, 249, 1)
- Save the app and play it.
- This way, you can get both scrolls visible.
- Now, we will talk about the header label "hlc_EOG". The purpose of adding this control at the last is that whenever you want to add new columns, you have to add before this control so that your rest of logic will not hamper. For example, the logic written to get the initial width of gallery in our case.
- Below is the code to be added on App >> OnStart property-
ClearCollect( coll_SampleData, { RowID: "1", FirstName: "Victoria", LastName: "Miller", Gender: "Female", Age: "24", Email: "v.miller@randatmail.com", Phone: "053-7275-55", Education: "Master", Occupation: "Composer", Experience_Years: "6", Salary: "160467", MaritalStatus: "Single", NumberOfChildren: "2", GUID1: "9mna6zgeup", GUID2: "7ym3rkxxsk", GUID3: "w4bmtgqhe5" }, { RowID: "2", FirstName: "Robert", LastName: "Grant", Gender: "Male", Age: "24", Email: "r.grant@randatmail.com", Phone: "451-8452-15", Education: "Lower secondary", Occupation: "Florist", Experience_Years: "0", Salary: "144106", MaritalStatus: "Married", NumberOfChildren: "0", GUID1: "h6gqcrkv4t", GUID2: "ydgb01cwfd", GUID3: "k78vlk1oue" }, { RowID: "3", FirstName: "Preston", LastName: "Williams", Gender: "Male", Age: "22", Email: "p.williams@randatmail.com", Phone: "673-1676-85", Education: "Upper secondary", Occupation: "Meteorologist", Experience_Years: "0", Salary: "171941", MaritalStatus: "Single", NumberOfChildren: "5", GUID1: "o2t3ntw0vl", GUID2: "2rtojuaeat", GUID3: "km5a5zq1kv" }, { RowID: "4", FirstName: "Sienna", LastName: "Rogers", Gender: "Female", Age: "19", Email: "s.rogers@randatmail.com", Phone: "977-4716-09", Education: "Primary", Occupation: "Chef", Experience_Years: "1", Salary: "166584", MaritalStatus: "Single", NumberOfChildren: "4", GUID1: "glb2ai8g9e", GUID2: "7yk3ssd1bt", GUID3: "q3p1tg62rh" }, { RowID: "5", FirstName: "Roman", LastName: "Parker", Gender: "Male", Age: "26", Email: "r.parker@randatmail.com", Phone: "340-5124-95", Education: "Master", Occupation: "Driver", Experience_Years: "4", Salary: "175818", MaritalStatus: "Single", NumberOfChildren: "2", GUID1: "b8dz5ljd3m", GUID2: "mgpyyolvw8", GUID3: "v6q7kw7rgi" }, { RowID: "6", FirstName: "Amelia", LastName: "Edwards", Gender: "Female", Age: "25", Email: "a.edwards@randatmail.com", Phone: "224-8573-44", Education: "Lower secondary", Occupation: "Medic", Experience_Years: "1", Salary: "38427", MaritalStatus: "Single", NumberOfChildren: "4", GUID1: "5ipsh49m8o", GUID2: "kism8pjd9g", GUID3: "b4u3pphldw" }, { RowID: "7", FirstName: "Eddy", LastName: "Allen", Gender: "Male", Age: "22", Email: "e.allen@randatmail.com", Phone: "624-2325-38", Education: "Lower secondary", Occupation: "Salesman", Experience_Years: "7", Salary: "120093", MaritalStatus: "Single", NumberOfChildren: "2", GUID1: "tttse5gaw4", GUID2: "g64jr63shs", GUID3: "9i8e59nukl" }, { RowID: "8", FirstName: "William", LastName: "Elliott", Gender: "Male", Age: "30", Email: "w.elliott@randatmail.com", Phone: "182-1576-94", Education: "Upper secondary", Occupation: "Cook", Experience_Years: "4", Salary: "175826", MaritalStatus: "Married", NumberOfChildren: "2", GUID1: "9rfkbz6810", GUID2: "qy85qm40ei", GUID3: "ylw2ug6f00" }, { RowID: "9", FirstName: "Tess", LastName: "Johnson", Gender: "Female", Age: "29", Email: "t.johnson@randatmail.com", Phone: "130-3434-78", Education: "Lower secondary", Occupation: "Singer", Experience_Years: "1", Salary: "169210", MaritalStatus: "Married", NumberOfChildren: "1", GUID1: "qxfrpy1k1i", GUID2: "kyb6yl50ty", GUID3: "7l5y33qhtb" }, { RowID: "10", FirstName: "Tyler", LastName: "Henderson", Gender: "Male", Age: "27", Email: "t.henderson@randatmail.com", Phone: "783-8165-67", Education: "Master", Occupation: "Astronomer", Experience_Years: "5", Salary: "52845", MaritalStatus: "Married", NumberOfChildren: "4", GUID1: "36cenimo02", GUID2: "elblmnw2eg", GUID3: "lqp1z8tog6" }, { RowID: "11", FirstName: "Stella", LastName: "Stevens", Gender: "Female", Age: "26", Email: "s.stevens@randatmail.com", Phone: "420-3001-74", Education: "Primary", Occupation: "Aeroplane Pilot", Experience_Years: "5", Salary: "143283", MaritalStatus: "Single", NumberOfChildren: "3", GUID1: "zg0cglcxhh", GUID2: "nkqn7kfqol", GUID3: "z1w48k6hic" }, { RowID: "12", FirstName: "Richard", LastName: "Anderson", Gender: "Male", Age: "22", Email: "r.anderson@randatmail.com", Phone: "381-5283-20", Education: "Upper secondary", Occupation: "Composer", Experience_Years: "9", Salary: "187453", MaritalStatus: "Married", NumberOfChildren: "0", GUID1: "88gdcl1iqr", GUID2: "1hupvj1dk5", GUID3: "wwpp3ynd3z" }, { RowID: "13", FirstName: "Frederick", LastName: "Clark", Gender: "Male", Age: "18", Email: "f.clark@randatmail.com", Phone: "670-4962-91", Education: "Upper secondary", Occupation: "Engineer", Experience_Years: "1", Salary: "106044", MaritalStatus: "Single", NumberOfChildren: "2", GUID1: "lz1rzy4xgc", GUID2: "qe0psgtdh6", GUID3: "om13zr8fcf" }, { RowID: "14", FirstName: "Kevin", LastName: "Turner", Gender: "Male", Age: "23", Email: "k.turner@randatmail.com", Phone: "511-6755-79", Education: "Master", Occupation: "Driver", Experience_Years: "1", Salary: "187890", MaritalStatus: "Single", NumberOfChildren: "5", GUID1: "eq6zvv8bza", GUID2: "5eceftadpu", GUID3: "1mzh9s1lul" }, { RowID: "15", FirstName: "Victoria", LastName: "Smith", Gender: "Female", Age: "26", Email: "v.smith@randatmail.com", Phone: "657-0715-15", Education: "Bachelor", Occupation: "Meteorologist", Experience_Years: "0", Salary: "154959", MaritalStatus: "Single", NumberOfChildren: "5", GUID1: "ifcvhwy28j", GUID2: "rnuiuvj101", GUID3: "kcb422a2d6" }, { RowID: "16", FirstName: "Kelvin", LastName: "Murphy", Gender: "Male", Age: "21", Email: "k.murphy@randatmail.com", Phone: "686-7172-97", Education: "Bachelor", Occupation: "Salesman", Experience_Years: "6", Salary: "83743", MaritalStatus: "Single", NumberOfChildren: "1", GUID1: "um9w2vfklv", GUID2: "ryvh0kulxj", GUID3: "vf7o6f2paw" }, { RowID: "17", FirstName: "Dexter", LastName: "Jones", Gender: "Male", Age: "19", Email: "d.jones@randatmail.com", Phone: "144-2656-92", Education: "Master", Occupation: "Carpenter", Experience_Years: "5", Salary: "134965", MaritalStatus: "Married", NumberOfChildren: "0", GUID1: "0lo359n2zs", GUID2: "6zs52gobrk", GUID3: "mgbj1yl3cc" }, { RowID: "18", FirstName: "Andrew", LastName: "Payne", Gender: "Male", Age: "19", Email: "a.payne@randatmail.com", Phone: "903-2469-25", Education: "Master", Occupation: "Interior Designer", Experience_Years: "0", Salary: "199995", MaritalStatus: "Married", NumberOfChildren: "3", GUID1: "s71ipv49ph", GUID2: "ttz892on0z", GUID3: "nwino7r7ur" }, { RowID: "19", FirstName: "Carl", LastName: "Cooper", Gender: "Male", Age: "24", Email: "c.cooper@randatmail.com", Phone: "825-8028-84", Education: "Primary", Occupation: "Carpenter", Experience_Years: "5", Salary: "42414", MaritalStatus: "Married", NumberOfChildren: "3", GUID1: "12rdvpp37i", GUID2: "ux07sugecb", GUID3: "u50kim2xjs" }, { RowID: "20", FirstName: "Naomi", LastName: "Nelson", Gender: "Female", Age: "19", Email: "n.nelson@randatmail.com", Phone: "531-0051-20", Education: "Master", Occupation: "Photographer", Experience_Years: "5", Salary: "72231", MaritalStatus: "Married", NumberOfChildren: "0", GUID1: "9ajqazhzwi", GUID2: "91jwzvwvph", GUID3: "tm6eb5welw" }, { RowID: "21", FirstName: "Frederick", LastName: "Moore", Gender: "Male", Age: "22", Email: "f.moore@randatmail.com", Phone: "400-7132-26", Education: "Primary", Occupation: "Mathematician", Experience_Years: "2", Salary: "84362", MaritalStatus: "Married", NumberOfChildren: "5", GUID1: "0itgsqsyv2", GUID2: "ujqqx3rufg", GUID3: "myeoa178bn" }, { RowID: "22", FirstName: "Abraham", LastName: "Robinson", Gender: "Male", Age: "29", Email: "a.robinson@randatmail.com", Phone: "329-7649-73", Education: "Lower secondary", Occupation: "Firefighter", Experience_Years: "14", Salary: "168465", MaritalStatus: "Single", NumberOfChildren: "3", GUID1: "2axxuormsz", GUID2: "aavi7d3mcg", GUID3: "km2hdnt4da" }, { RowID: "23", FirstName: "Tara", LastName: "Cameron", Gender: "Female", Age: "18", Email: "t.cameron@randatmail.com", Phone: "551-5464-02", Education: "Doctoral", Occupation: "Dancer", Experience_Years: "7", Salary: "193390", MaritalStatus: "Married", NumberOfChildren: "3", GUID1: "5gdexj8fha", GUID2: "4kmh6joco0", GUID3: "rg929g68ic" }, { RowID: "24", FirstName: "Adelaide", LastName: "Hill", Gender: "Female", Age: "22", Email: "a.hill@randatmail.com", Phone: "407-7152-16", Education: "Lower secondary", Occupation: "Chef", Experience_Years: "5", Salary: "49994", MaritalStatus: "Married", NumberOfChildren: "2", GUID1: "lgbex9h42o", GUID2: "68f2oqhypb", GUID3: "egrz1e5dho" }, { RowID: "25", FirstName: "Lilianna", LastName: "Morrison", Gender: "Female", Age: "25", Email: "l.morrison@randatmail.com", Phone: "395-3761-40", Education: "Lower secondary", Occupation: "Firefighter", Experience_Years: "8", Salary: "44974", MaritalStatus: "Married", NumberOfChildren: "2", GUID1: "p4ff81vlku", GUID2: "tcbfln4ujh", GUID3: "pko6h53jo7" } ); Set(glbl_GalleryWidth,hlc_EOG.X + hlc_EOG.Width + 16 - cnt_MainContainer.Width);
With this, I am concluding this post.
Happy Coding !!!
Will see you again with some new topics.
Stay Safe !
Stay Healthy !
