Horizontally Scroll A Large Power Apps Gallery

So you have a lot of data to display but the screen in Power Apps isn’t large enough. My friend Ronald Sease recently showed me how to create a gallery in Power Apps that you can scroll horizontally. It’s a simple but powerful solution utilizing a horizontal container and a vertical gallery.

Demo

Scrollable Gallery

Instructions

First add a Horizontal container to your screen.

Add Horizontal Container to Screen

Set the LayoutOverflowX property on the Horizontal container.
LayoutOverflowX = LayoutOverflow.Scroll

Add a Vertical gallery within the horizonal container you created.

Add Vertial Gallery to Screen

Set the following properties on the Vertical gallery.

  • ShowNavigation = true (this isn’t required but the navigation buttons make it much easier to move up and down the list when the up/down scrollbar is off the screen.)
  • Height = Parent.Height (if you are using the Show Navigation option then set this to Parent.Heigh - 20 so that the navigation buttons are not covered up by the scroll bar.)
  • LayoutMinWidth = 1000 (This value needs to be larger than the width of the horizontal container for the scrollbar to appears. Choose a size will allow you to fit all of you gallery fields in the template.)

Now we have a gallery that we can scroll left to right to see more data.

image

Let’s finish up designing our Gallery.

First let’s make sure the seperator goes all the way across. Change the following property on the seperator.
Width = Parent.LayoutMinWidth

image

Next let’s turn on the gallery loading spinner so our users know when the control is loading more data. You can do this by clicking on the Gallery control and setting the following property.
LoadingSpinner = LoadingSpinner.Data

image

Finally add any additional fields you want to show and update the height of the gallery template to your needs.

IMPORTANT NOTE The Power Apps editor gets somewhat confused as to the placement of items after you have scrolled so in order to move the components around on the gallery template you will need to utilize the X/Y Position values on the controls.

image

Comments

Post a Comment

Popular posts from this blog

Add User As Local Administrator On Domain Controller

I recently was settting up a new Microsoft SharePoint 2010 machine and had promoted the machine to a domain controller before creating my SharePoint admin accounts.  I needed to add several of my accounts to the local Administrators group.  Unfortunately after you promote a server to a domain controller you can no longer access the GUI for Local Users and Groups.  Instead I had to use the command line to add the users. Open a command promt using the "Run as administrator" function and then run the following command. net localgroup Administrators /add {domain}\{user} Note: do not include the {} brackets.
Read more

An error occurred while applying security information to

While attempting to move files from a hard drive I recovered I kept getting the following error on a specific set of files. An error occurred while applying security information to {G:\Folder} Failed to enumerate objects in the container. Access is denied. In order to fix it did the following. -Open a Command Prompt "As Administrator" -Run the following commands: takeown /f "G:\folder" /r /d y icacls "G:\folder" /grant administrators:F /T
Read more

Display ADFS 2.0 Forms Authentication Login Page Instead of Windows Authentication Prompt

Image
After installing ADFS 2.0 for SharePoint a Windows login prompt was shown when the SharePoint site forwarded to the ADFS server instead of the ADFS Forms Authentication login screen.  No matter what account I tried to use here I would eventually receive a 401 Not Auhorized error. The reason for this is that the ADFS website tries to use Windows Authentication before trying to use the Forms authentication which displays the loging page below.  Forms Login Screen for ADFS 2.0  To fix this do the following on the ADFS server: 1. Open IIS and Explore under Default Website\adfs\ls 2. Open the web.config file with Notepad, look for the localAuthenticationTypes section. 3. Move the line for Forms above the line for Integrated and save the web.config file.  This will force the ADFS application to use the Login Page authentication before trying to use Windows Authentication.  
Read more