Image Gallery In PowerApps

Introduction

 
In this article we will learn how to create image gallery in PowerApps. I am assuming that you have a basic knowledge of PowerApps, so I am going to skip steps like how to create a new power app and basics of it. Let’s start it…
 
Extra learnings from this article,
  • How to use SharePoint document library in Power Apps
    • We use SharePoint document library as image provider for gallery
  • How to run Power Automate from Power Apps
    • As we need base64 of image content we pass document id to power automate and power automate return base64 of image to power apps so we will also learn how to pass data to power automate and get response from it.
Note
I am sharing full PowerApps in attachment so you can import in you tenant in case of any doubt. Because it is not possible explain each step. I am covering main topics only.
 
Output
 
Image Gallery In PowerApps
Step 1
 
Create new document library in SharePoint site as I have created in below screenshot, which will work as image data source for the image gallery.
 
Image Gallery In PowerApps
 
Step 2
 
Create a Power Automate which will be called from PowerApps and we pass document library item id and get back base64 of image in response in PowerApps which we will show in gallery. The power automate logic is like in below screenshot. I will also attach exported file in article.
 
Image Gallery In PowerApps
 
Step 3
 
Create new PowerApps. I have created and named it GalleryInPowerApps.
 
Step 4
 
Add Document Library as Data source in Power Apps
 
Image Gallery In PowerApps
 
Step 5
 
Add PowerAutomate in PowerApps From Action->Power Automate menu.
 
Image Gallery In PowerApps
 
Step 6
 
Add below controls and configure respective properties for it.
  • Screen – Name: Screen1
Image Gallery In PowerApps 
  • Rectangle – Name: rectContainer
Image Gallery In PowerApps
 
Image Gallery In PowerApps 
  • Image – Name: imgContainer
Image Gallery In PowerApps 
Image Gallery In PowerApps 
Image Gallery In PowerApps 
Image Gallery In PowerApps 
Image Gallery In PowerApps 
  • Horizontal gallery – Name: glrDots
Image Gallery In PowerApps 
 
Image Gallery In PowerApps 
Image Gallery In PowerApps 
Image Gallery In PowerApps 
Image Gallery In PowerApps 
    •  Add Circle – Name: circleDot
Image Gallery In PowerApps
Image Gallery In PowerApps 
Image Gallery In PowerApps 
Image Gallery In PowerApps 
Image Gallery In PowerApps 
Image Gallery In PowerApps 
Image Gallery In PowerApps
 
Step 7
 
Save and Publish the app.
 
You can import attached app and power automate.