How to display images from a SharePoint Online library in PowerApps

In this PowerApps Tutorial, We will discuss how to display images from a SharePoint Online library in PowerApps using PowerApps gallery control.

Display images from a SharePoint Online library in PowerApps

To display images from a SharePoint Library in Power apps, We need to follow these below steps:

  • Create a Document Library in SharePoint Site and Upload Images
  • Create a Canvas app in PowerApps
  • Add a Gallery to your App
  • Connect a new Data Source and SharePoint Site to your App
  • Bind the Images Data Source to Link

Create a Document Library in SharePoint Site and Upload Images

At first in the SharePoint Site, I created a new Document Library named “Team Members“. In that Library, I uploaded some images of employees as shown below.

how to retrieve an image from SharePoint to the powerapps
display images in PowerApps

Create a Canvas app in PowerApps

Open the Power Apps page through the Browser. Sign in your Power Apps using Microsoft account.

In the Power Apps page, Select + New app -> Canvas as shown below.

how to retrieve an image from SharePoint to the power apps

Choose Tablet layout under the Blank app section.

retrieve an image from SharePoint to the powerapps
How to display images in PowerApps

Add a Gallery to PowerApps App

In the Power Apps Canvas App, Select Insert -> Gallery -> Vertical layout as below screenshot.

powerapps display image from sharepoint list
Add a Gallery to PowerApps App

Connect a new Data Source and SharePoint Site to your App

Expand Connectors and select the new Data Source as SharePoint as shown below. Also, you can directly search the SharePoint in the Search bar.

powerapps display image from url
PowerApps data source

Provide your SharePoint Site URL for the location of your list and hit the Connect button. Also, you can directly specify the SharePoint Site Url under the Resent sites section.

powerapps add picture to gallery
powerapps add picture to gallery

Choose a SharePoint List or SharePoint Document Library (Team Members) and click on the Connect button.

Display Images from a SharePoint Library in PowerApps
Display Images from a SharePoint Library in PowerApps

Now you can see the gallery screen will appear like this below screenshot. That means, no images will appear until we bind it to the images Data Source.

Display Images from SharePoint Library in PowerApps
Display Images from a SharePoint Library in PowerApps

You may also like, PowerApps LastSubmit() with Examples.

Bind Images Data Source to Link

Expand the Gallery1 from the left navigation. Select Image5 and go to the Advanced section (from the right side of the page).

Under the DATA Section, Change the Image name as ‘{Link}’ as like the below screenshot.

Also, you can change the name in the image formula bar (top of the screen).

Retrieve Images from a SharePoint Library in PowerApps
Bind the Images Data Source to Link

Select the Gallery screen and go to the Properties section. Change the Layout as Image and title as shown below.

Go to the Edit from Fields section and provide the name to the Title section. Then all the names will appear with images like the below screenshot.

display Images from SharePoint Online Library in PowerApps
display Images from SharePoint Online Library in PowerApps

If you will preview or publish the Power Apps, you can see the output like below:

powerapps display image from sharepoint
display Images from SharePoint Online Library in PowerApps

Display Document Images from SharePoint Document Library in PowerApps

The below screenshot represents a SharePoint Document Library (TSInfo Documents). This Document Library contains some documents as PDF, PPT, DOCX, mp4, etc.

Display Images from SharePoint Document Library in powerapps

In the Powerapps screen, Take a Gallery control (Insert -> Gallery -> Vertical). Connect the Data Source Connection as SharePoint and choose your SharePoint Document Library (TSInfo Documents). Connect the Library to Powerapps app.

Select the Layout as “Image, Title, and Subtitle“. Select the Image and put the below formula in the image bar as:

Image = ThisItem.Thumbnail.Medium
Display Image from SharePoint Document Library in powerapps
Display Document Images from SharePoint Document Library in PowerApps

Once you will preview this Powerapps Gallery Screen, then all the Documents will appear with the Image, Title and Subtitle as shown below.

Display Image from a SharePoint Document Library in powerapps
PowerApps apps display documents

Also, you may like these below Powerapps tutorials:

In this SharePoint PowerApps Tutorial, We discussed how to display images from a SharePoint Library in Power apps using Gallery control.

  • Nice, this helped.

    I set the gal items to Filter(SRM, StartsWith(‘Full Path’, “SRM/2350098”), IsFolder = false)
    and the Image to ThisItem.’Link to item’

  • I used it always like that in my apps:
    ThisItem.’Link to item’
    But I just noticed: If I embed the app into teams (as a tab in a channel), I don’t get a preview of the item. 🙁

  • Try this also if the image is not working: For the ‘image’ property: ThisItem.'{Thumbnail}’.Large

    I was using this in conjunction with Filter(MySPDocLibrary,’File name with extension’=ImageFileName&”.png”) in order to only display the matching image in a ‘designed for’ one row image gallery for a signature capture.

  • >