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.

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.

Choose Tablet layout under the Blank app section.

Add a Gallery to your App

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

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.

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.

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

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.

Bind the 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).

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.

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

Display Document Images from SharePoint Document Library

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

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

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

Also, you may like these below Powerapps tutorials:

• Create a Data Table from Excel Data using Power Apps
• How to share PowerApps with external users
• Create PowerApps App for SharePoint List
• PowerApps show hide fields based on Yes/No column
• PowerApps update data table columns
• Getting your data PowerApps
• Export PowerApps from one Tenant to another Tenant
• How to create and use PowerApps Collection
• How to add or remove an item from a collection in PowerApps
• Create Collection from SharePoint List in PowerApps

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