Horizontal and vertical scrolling in gallery-Power Platform

Power Apps – Canvas App. Gallery Control Feature does not allow us to scroll in both side. Manually make use of the Slider control, this feature is achieved


Problem statement

In Canvas App, when we have table of records to be displayed to the user for processing, Gallery Control Can be used which can be scrolled either Horizontal or Vertical way.

As a alternate solution we can go for a data table for both side scrolling, but the drawback here is that we cannot select more than one record for processing as it is a read only control.


Resolution

To Scroll the data in both way and also to select the multiple records for processing, Gallery Control Can be used with Slider Control.

Data in the gallery is adjusted based on slider control value

  • Short words about the resolution
  • Detailed step by step explanation of the resolution

Open Power Apps using URL https://make.powerapps.com/ 


Go to Create section and select Canvas App – Tablet View




In the Power Apps designing screen, Go to Insert Menu and select Gallery control





  • Create a Vertical Gallery in a Screen

  • Map the Data Source

After adding a Gallery control to the screen. Go to the Items property of Gallery control and select the data source you want to map.


Select the Cylinder icon in the left side of the Screen.


Select the Add data to add a data source to the canvas app.


After selecting Add data, there will be a pop-up screen, which showing list of available data source in the current environment. Choose the desired Data source you want to add to the canvas app.



After adding a data source to the app, the added data source displaying in the left side of the screen. (data section)


Select the gallery control you added in the screen,


Select a data source you want to map a gallery.



  • Align the Contents Horizontally

After map a data source to the gallery, adjust the X, Y co-ordinates of the label control inside a gallery. Also adjust a height and width of each label.


  • Add a Slider Control

Go to Insert option and select Input,



After adding a Slide control in the screen. Adjust its X&Y Co-ordinates you want to use.


Set the X Value of first label control in the Gallery as below. 


Adjust the X value in all the label in the Gallery control.


Change all the label X position as mentioned in the above step.


Before scroll (Horizontal / Vertical)


After scrolling the gallery (Horizontal/ Vertical)