How to Make a Gallery Control Automatically Scroll in PowerApps

Have you ever wanted your gallery control to automatically scroll through your items in PowerApps? The functionality is not currently built into the gallery control but you are in luck. With a little creativity you can have your galleries scrolling in no time. Below I will show you how step by step how to make a gallery control automatically scroll in PowerApps!

Animation showing you how the gallery control in PowerApps automatically scrolls!

To duplicate this tutorial you will need a data source with two fields, “PowerAppColor” and “PowerAppColorValue”. Let’s get started with adding a new screen

  • New Screen
    • OnVisible:
      Clear(colColors);
      ForAll(
      ‘[dbo].[tblPowerAppColors]’,
      //Change this to your data source name
      Collect(
      colColors,
      Last(
      FirstN(
      AddColumns(
      ‘[dbo].[tblPowerAppColors]’,
      //Change this to your data source name
      “RowNumber”,
      //Adding this column is key to making this whole thing work
      CountRows(colColors) + 1
      ),
      CountRows(colColors) + 1
      )
      )
      )
      );
      UpdateContext({varRowsPerPage: 6});
      //you can change this number but make sure it fits on screen
      UpdateContext(
      {
      varCurrentPage: 1,
      varTotalPages: RoundUp(
      CountRows(colColors) / varRowsPerPage,
      0
      )
      }
      );
      UpdateContext({varStartTimer: true});

Alright now that you have your collection filled with data let’s get to adding the following controls and set the properties as prescribed below.

  • Insert a blank vertical gallery control
    • Items:
      Filter(
      colColors,
      RowNumber <= (varRowsPerPage * varCurrentPage) && RowNumber > (varRowsPerPage * varCurrentPage) – varRowsPerPage
      )
    • ScrollBar: false
    • ShowNavigation: false
    • TemplateFill: ColorValue(ThisItem.PowerAppColor)
    • Add 3 labels inside the gallery controls template to show the text.
      • ThisItem.PowerAppColor
      • ThisItem.PowerAppColorValue
      • ThisItem.RowNumber
  • Insert a timer control
    • Start: varStartTimer
    • AutoStart: false
    • Repeat: true
    • AutoPause: true
    • Duration: 3,000 // you can set this to as long as you like
    • OnTimerEnd:
      If(
      varCurrentPage = varTotalPages,
      UpdateContext({varCurrentPage: 1}),
      UpdateContext({varCurrentPage: varCurrentPage + 1})
      )

Now let’s make this even cooler. We can add some controls to allow the user to pause, start and move back and forth.

  • Insert 3 navigation controls:
    • ImgBack
    • ImgNext
    • ImgStartPause
  • ImgBack:
    • OnSelect: UpdateContext({varCurrentPage:varCurrentPage – 1})
    • DisplayMode: If(varCurrentPage=1,DisplayMode.Disabled, DisplayMode.Edit)
  • ImgNext:
    • OnSelect: UpdateContext({varCurrentPage:varCurrentPage + 1})
    • DisplayMode: If(varCurrentPage=varTotalPages,DisplayMode.Disabled, DisplayMode.Edit)
  • ImgStartPause:
    • OnSelect: UpdateContext({varStartTimer:!varStartTimer})
    • Image: If(varStartTimer=true,Pause,Play)

You now know how to make a gallery control automatically scroll in PowerApps! Using the techniques explained above can open doors of endless possible uses. Especially if you want to show an app on a big TV without user intervention. Check out post on how-to-create-a-picture-carousel-in-powerapps which includes an addition feature on scrolling pictures.

Please leave your feedback. I hope this article has been helpful for you so bookmark this blog as new articles will be posted regularly

Share the knowledge!

Paul Rodrigues

Business Analyst with 20 years of IT experience creating practical solutions. I love to automate business processes through the use of technology while making the end users work easier. My current favorite tools are Power Apps, Power BI and Power Automate. #PowerAddict

You may also like...

1 Response

  1. August 30, 2019

    […] then add a column to the collection to have a row numbers using the technique in my tutorial on How to make a gallery control automatically scroll in PowerApps. It is the row number we will use to filter our image source in the 3 image controls. Continue […]

Leave a Reply

Your email address will not be published. Required fields are marked *