Over the past few months, we have developed several helpful apps in Power Apps, including Leave Management, Travel Requests, and User Login. I wanted to display all of them in one place, and cleanly.
So, I created a gallery that scrolls automatically and displays each app one by one in a Power Apps canvas app. This helps us show our work to clients, allows our team to keep track, and also informs employees about the available apps.
In this tutorial, I will show you how to create an auto scrolling gallery in Power Apps with examples..
Power Apps Auto Scroll Gallery
In the example below, you can see that the images of the developed products are scrolled automatically one by one in the Power Apps gallery. Once it is over, it starts again from the beginning.
For this example, I stored all my product images and their details in the SharePoint document library.
This library contains the following fields!
| Column Name | Data Type |
|---|---|
| Name | Default Column |
| ID | Default Column |
| Product Description | Multiple lines of text |
- Add the SharePoint document library to the Power Apps application.
- Add the code below to the OnVisible property of the screen.
Set(currentIndex, 1);
ClearCollect(colProducts,'Our Power Platform Products')Here, I set the value of the currentIndex variable to 1, which is used to track the current image, and created a collection to store document library items to avoid delegation issues.
- Add a horizontal gallery and update its properties with the values below.
Items= 'Our Power Platform Products'
Default = LookUp('Our Power Platform Products',ID = currentIndex)
Width= Parent.Width
TemplateSize= Parent.WidthThen, add an image control to this gallery and set its Image property to the code below.
ThisItem.Thumbnail.LargeTo display the name and description of the product, add text labels and provide the formulas below in its Text property.
Title = ThisItem.Name
Description = ThisItem.'Product Description'
- Insert a Timer control and configure the following properties.
Name = tmrCarouselTimer
Duration = 3000
Repeat = true
AutoStart = true
Start = true
OnTimerEnd = Set(currentIndex, If(currentIndex = CountRows(colProducts), 1, currentIndex + 1));Here, colProducts is the collection that stores the document library items.
Save the changes and preview the app, so after every three seconds, the images within the Power Apps gallery will scroll automatically.
Power Apps Auto Scroll Gallery with Dot Indicator
Till now, we have seen how to build an auto-scrolling Power Apps gallery. In this section, I will additionally explain how to use indicators to track which item is currently scrolling in the Power Apps gallery.
In the example below, you can see that while scrolling, once the images are over, it starts from the beginning.
To achieve this, follow the steps below!
- Add another horizontal gallery and provide the below code in its Items property.
'Our Power Platform Products'‘Our Power Platform Products’ is the SharePoint document library name.
- Within the gallery, add a Circle icon and set its Fill property to the following formula.
Fill= If(ThisItem.id = currentIndex, Color.SkyBlue, Color.Gray)Here, we are using an if condition to provide different fill colors to the circle icon. The condition is that if the current image [ThisItem] index and the current ID match, then we apply the sky blue color; otherwise, we use the grey color for the remaining images.
Save the changes and preview the app. Now, you can see that when the images scroll automatically, the dots’ fill color changes, indicating the current image.
I hope you found this article helpful!
In this article, I have explained how to build an auto scrolling gallery in Power Apps. Additionally, I explained how to display the indicators while the images are scrolling in the Power Apps gallery automatically. Do let me know if you still have any questions.
Also, you may like:
- How to Increment Number in Power Apps Gallery?
- How to Get Row Number in Power Apps Gallery?
- How to Display Power Apps Gallery Distinct Values?
- How to Group Items in Power Apps Gallery?
- How to Display Power Apps Collection on Gallery?
After working for more than 18 years in Microsoft technologies like SharePoint, Microsoft 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (12 times). I have also worked in companies like HP, TCS, KPIT, etc.
