Logo
banner

Blogs

How to create a Horizontal Scrollable Gallery in Power Apps (Canvas Apps)

, January 20, 2023 72 Views

Hello Power Apps User.
Let’s take a scenario in Canvas Apps. Suppose we want to display 6 columns in a Vertical gallery. Then, we can easily achieve it by the following steps: 

  • Add Blank Vertical Gallery. 
  • Add multiple labels/any other controls inside the gallery.
  • Add necessary DataSource to the Items property of the Gallery and refer it to those controls you’ve added.
  • Turn on the “Show scrollbar” property of the gallery. If your data source has multiple items such that it surpasses the gallery height, then the Vertical scrollbar will start to appear, and with the help of the vertical scroll you can see other records, through simple scrolling.

Now, suppose you have 10+ columns to be displayed in the vertical Gallery, then the vertical scrollbar will help you facilitate the vertical scroll, but Power Apps does not facilitate you with the horizontal scrollbar which we need to create on our own. This blog will help you to achieve the same requirement of creating a vertical gallery supporting both horizontal scrolls and vertical scrolls. 

Below are the steps to create a vertical gallery with both horizontal scroll and vertical scroll property:

  • Create a Horizontal Container “hzContainer”.
    Set hzContainer properties as below:
    X = 0
    Y = 60
    Height = Parent.Height-60
    Width = Parent.Width
    Color = Hexcode: FFFF00 Or RGBA(255, 255, 0, 1)
  • Inside hzContainer, insert a Main Container mainContainer
    Set mainContainer properties as below:
    X = 0
    Y = 0
    Height = Parent.Height
    Align in Container = Start
    Flexible Width = Off
    Color = Hexcode: FBBC9F Or RGBA(251, 188, 159, 1)

  • Inside mainContainer create 2 more objects, a container for headers,headerContainer and a blank vertical gallery called gallery 
     
    Set headerContainer properties as below: 
    X = 0 
    Y = 0 
    Height = 500 
  • Set gallery properties as below:
    X = 0 
    Y = headerContainer‘.Height+’headerContainer‘.Y 
    Width = ‘headerContainer‘.Width 
    Height = Parent.Height Self.Y

  • Add 3 controls [ label, textInput, dropdown ] inside the gallery as shown in the below image.

  • Set X property of txtinp_Second: 
    lbl_First.X+lbl_First.Width+20

    Set X property of dd_lastElement:

    txtinp_Second.X+txtinp_Second.Width+20

  • Set Width of lbl_First: 600
  • Set Width of headerContainer: [Here, if we have multiple controls in the gallery, then the last placed control in the gallery is to be placed in the below formula.]

    dd_lastElement.X + dd_lastElement.Width + 10

  • Set Width of mainContainer:  
    gallery.Width
  • Now, we will increase the width of the first element, lbl_First to 1200, which will in turn push the textinp_Second and dd_LastElement out of the screen and to view these controls, we need a Horizontal Scrollbar at the bottom of the screen, which will not currently appear on its own.

  • To enable/view the Horizontal ScrollBar, turn Horizontal Overflow property of the hzContainer to Scroll.

  • Set the width of the lbl_First to 1600 to check whether or not the Horizontal scrollbar is visible in Full screen mode or not.


  • Create Header Labels in the headerContainer as explained in the below shown image.

  • Set Height of headerContainer to 80.

  • Set Height of all HeaderLabels to Parent.Height as shown below:
    Set Width of all HeaderLabels to 350.
  • Set X and Width property of all the controls inside gallery based on the HeaderLabel of the headerContainer.

  • Added few other controls (here, labels; you can add any control) in gallery and set its property based on the HeaderLabel of the headerContainer. 

Using this method, you can create any number of columns inside the gallery and give its position based upon its respective Header Label, with the provision of both Horizontal Scrollbar and Vertical Scrollbar. 

mm

Inkey

INKEY is your solution partner.
Our focus is to deliver you in-time intelligent innovative solutions ("key") for the problems in hand. Maintaining a quality standard right from the inception of a project is our top most priority.

Our team of talented professionals will execute your projects with dedication and excellence. We take ownership and accountability for the effort that goes into meeting our client’s needs.

Years of experience and proven success of delivering innovative custom solutions.

More posts by

Leave a Reply

Your email address will not be published.

The maximum upload file size: 2 MB. You can upload: image, audio, video, document, spreadsheet, interactive, text, archive, code, other. Drop file here

Would you like to digitize your business and put it on the cloud?
Do you need clear, concise reports for your organization?