Automatically scroll Gallery control in PowerApps

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

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:

powerapps auto scroll gallery

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.

powerapps auto scroll gallery
powerapps auto scroll gallery

Step 3: Next select your PowerApps screen and go to OnVisisble property and add the below code.

powerapps gallery auto scroll
powerapps gallery automatically scroll
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
powerapps gallery automatic scroll
powerapps gallery automatic scroll
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.

powerapps gallery automatically scroll
  • 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
powerapps auto scroll gallery
powerapps gallery auto scroll
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.

powerapps gallery auto scroll
powerapps auto scroll gallery

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.

Automatically scroll Gallery control in PowerApps
Automatically scroll Gallery control in PowerApps

You may like the following PowerApps tutorials:

>