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!
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});
- OnVisible:
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
- Items:
- 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
