In this PowerApps tutorial, we will discuss how to automatically scroll gallery control in PowerApps. Here, in this PowerApps example, we will populate SharePoint list items in a gallery control. This will automatically go to the next page and displays all items or you can also click on the below icon to go next or back or stop the redirection.
Automatically scroll Gallery control in PowerApps
Step 1: Let us first create a list in SharePoint Online site. The SharePoint Online list looks like the below:
Step 2: Then log in to PowerApps and create a canvas app -> Then connect your data source from the SharePoint list which you have created recently. Next, create a collection called BlogCollection.
Step 3: Next select your PowerApps screen and go to OnVisisble property and add the below code.
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});
Step 4: Next drag and drop a blank vertical gallery control in your page and update the Item property as below. And set the below property as
- ScrollBar: false
- ShowNavigation: false
Filter(
BlogCollection,
RowNumber <= (varRowsPerPage * varCurrentPage) && RowNumber > (varRowsPerPage * varCurrentPage) - varRowsPerPage)
Step 5: Next add 3 labels inside the gallery controls template to show the text. And update the Text property of each label control.
- Label2_5 ————-ThisItem.PostLocation.Value
- Label2_4————-ThisItem.Title
- Label2_3————-ThisItem.PostLocation.Value
Step 6: Next drag and drop a PowerApps timer control in your page and set the below properties.
- Start: varStartTimer
- AutoStart: false
- Repeat: true
- AutoPause: true
- Duration: 2,000
If(
varCurrentPage = varTotalPages,
UpdateContext({varCurrentPage: 1}),
UpdateContext({varCurrentPage: varCurrentPage + 1})
)
Step 7: Now add three icons in button of the page which will go previous, Next and pause operation.
Icon Back
OnSelect ->UpdateContext({varCurrentPage:varCurrentPage - 1})
DisplayMode: If(varCurrentPage=1,DisplayMode.Disabled, DisplayMode.Edit)
Icon Pause
OnSelect->UpdateContext({varStartTimer:!varStartTimer})
Image: If(varStartTimer=true,Pause,Play)
Icon Next
OnSelect ->UpdateContext({varCurrentPage:varCurrentPage + 1})
DisplayMode: If(varCurrentPage=varTotalPages,DisplayMode.Disabled, DisplayMode.Edit)
Now save your page and if you want to change the background color of your page then you can do it. Next, save the page and run it to see the output.
You may like the following PowerApps tutorials:
- PowerApps notify function- How to use
- Share PowerApps to external users or guest users
- Saving microphone audio recorded in PowerApps to SharePoint online
- PowerApps filter SharePoint list Example
- Display COVID-19 Power bi report in PowerApps
- How to embed Power bi report in PowerApps portal
- Display Office 365 User Profile Properties in PowerApps
- How to display Power bi google analytics in PowerApps
- How to build multilingual apps in PowerApps
- PowerApps Chart Control – How to Use
- Microsoft Power Apps tutorial for beginners
Rajkiran is currently working as a SharePoint Consultant in India . Rajkiran having 7+ years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).