Requirement: how to automatically scroll gallery control in PowerApps.
Create a SharePoint list “BlogDetails”
Create Blank canvas app > Connect to Data Source “BlogDetails” and Create a Collection called as “BlogCollection” and Create collection as shown in below:
powerapps auto scroll gallery
On Screen, write the below code on OnVisible Property:
Clear(BlogCollection);
ForAll(BlogDetails,
Collect(
BlogCollection,
Last(
FirstN(
AddColumns(BlogDetails,
"RowNumber",
CountRows(BlogCollection) + 1
),
CountRows(BlogCollection) + 1
)
)
)
);
UpdateContext({varRowsPerPage: 4});
UpdateContext(
{
varCurrentPage: 1,
varTotalPages: RoundUp(
CountRows(BlogCollection) / varRowsPerPage,
0
)
}
);
UpdateContext({Timer1: true});
powerapps gallery automatically scroll
Take a vertical gallery and make the ShowScrollbar Property and ShowNavigation Property as false
To pass variables during browser startup use the below code on Items Property:
Filter( BlogCollection, RowNumber <= (varRowsPerPage * varCurrentPage) && RowNumber > (varRowsPerPage * varCurrentPage) - varRowsPerPage)
Next add 3 labels inside the gallery controls and update the Text property of each label control.
PostLocaton label control- ThisItem.PostLocation.Value
Id label control- ThisItem.Id
Title2 label control- ThisItem.Title
Add Timer control on gallery:
- Start: varStartTimer
- AutoStart: false
- Repeat: true
- AutoPause: true
- Duration: 2,000
- OnTimerEnd: If(varCurrentPage = varTotalPages,UpdateContext({varCurrentPage: 1}),UpdateContext({varCurrentPage: varCurrentPage + 1}))
powerapps gallery auto scroll
Now add Back, Save and Next icon to the gallery this icons are used for automatic scroll Gallery control
Back Icon:
OnSelect Property- UpdateContext({varCurrentPage:varCurrentPage - 1})
DisplayMode- If(varCurrentPage=1,DisplayMode.Disabled, DisplayMode.Edit)
Next Icon:
OnSelect Property- UpdateContext({varCurrentPage:varCurrentPage + 1})
DisplayMode- If(varCurrentPage=varTotalPages,DisplayMode.Disabled, DisplayMode.Edit)
powerapps auto scroll gallery
Now save the page and if need change the background color of the page then Next, save the page and run it to see the output.
Click on the Preview button:
Automatically scroll Gallery control in PowerApps