Display SharePoint Images in Power Apps Canvas Apps

Power Apps and SharePoint are powerful tools often used together to build business applications rapidly. A common requirement is the ability to display images stored within a SharePoint list directly within a Power Apps Canvas app. Whether you're creating employee directories, product catalogs, asset management systems, or inspection applications, incorporating images significantly enhances the user experience by providing crucial visual context.

In this article, we will guide you through the straightforward process of displaying images from a SharePoint list within Power Apps.

Why Display SharePoint Images in Power Apps?

Integrating images from SharePoint into your Power Apps offers several key benefits:

• Improved User Experience: Visual information makes applications more intuitive and engaging.
• Enhanced Data Recognition: Images help users quickly identify and differentiate between records.
• Build Product Catalogs: Showcase products with their corresponding images for easy browsing.
• Display Employee Photos: Create richer employee directories with profile pictures.
• Manage Assets and Inventory: Visually track and manage physical assets or inventory items.
• Create Visually Appealing Applications: Modern interfaces are more professional and user-friendly.

Prerequisites

Before you begin, ensure you have the following:

• A Power Apps Canvas App
• A SharePoint Online Site
• A SharePoint List configured with an Image column
• Appropriate SharePoint permissions to access the list and its data

Step 1: Create a SharePoint List

First, let's set up a sample SharePoint list to hold our image data. Navigate to your SharePoint site and create a new list.

Example List Name: EmployeeDirectory

Example Columns:

• EmployeeName (Single line of text)
• Department (Single line of text)
• EmployeePhoto (Image column type)

Save your list once the columns are created.

Step 2: Add Sample Records

Populate your SharePoint list with some sample data. For each record, ensure you upload an image into the EmployeePhoto column.

Example Data:

Step 3: Connect SharePoint List to Power Apps

Open your Power Apps Studio and connect to the SharePoint list you just created.

1. Navigate to the Data tab on the left-hand pane.
2. Click + Add data.
3. Search for and select SharePoint.
4. Choose your SharePoint site and then select the EmployeeDirectory list.

Your SharePoint list is now available as a data source in your Power App.

Step 4: Insert a Gallery Control

To display multiple records, we'll use a gallery. Insert a gallery control into your Canvas App:

1. Go to the Insert tab.
2. Select Gallery, and then choose a Vertical Gallery.
3. Set the Items property of the gallery to your SharePoint list name: 'EmployeeDirectory'.

The gallery will now populate with the records from your SharePoint list.

Step 5: Add an Image Control

Inside the gallery template, add an Image control to display the photos:

1. With the gallery selected, go to the Insert tab.
2. Select Media, and then choose Image.
3. Set the Image property of this Image control to display the photo from the SharePoint column. For an Image column, the formula is: ThisItem.'EmployeePhoto'.Url. If you used the '.Full' suffix as in the source document, it would be: ThisItem.'EmployeePhoto'.Full. We'll use .Url for broader compatibility.

This formula retrieves the URL of the image from the EmployeePhoto column for each record in the gallery.

Step 6: Display Additional Information

You can easily add other data points from your SharePoint list to the gallery. Insert Label controls inside the gallery template and set their Text properties:

• For Employee Name: ThisItem.'EmployeeName'
• For Department: ThisItem.Department

Your gallery should now display the employee's photo, name, and department.

Step 7: Configure Image Size and Positioning

To ensure images look good within the gallery, adjust their size and positioning:

• Select the Image control within the gallery.
• In the properties pane, set the Width and Height to appropriate values (e.g., 100x100 pixels).
• Set the Image position property to ImagePosition.Fit or ImagePosition.Fill depending on how you want the image to scale within its container. Fit ensures the entire image is visible, while Fill scales it to fill the space, potentially cropping parts.

Complete Gallery Example Configuration

Here’s a summary of the properties for the controls within the gallery template:

• Gallery (galEmployeeDirectory):
  • Items: 'EmployeeDirectory'
• Image Control (imgEmployeePhoto):
  • Image: ThisItem.'EmployeePhoto'.Url
  • Width: 100
  • Height: 100
  • ImagePosition: ImagePosition.Fit
• Label Control (lblEmployeeName):
  • Text: ThisItem.'EmployeeName'
• Label Control (lblDepartment):
  • Text: ThisItem.Department

Alternative Approach for Attachment Columns

If your images are stored as Attachments to SharePoint list items rather than in a dedicated Image column, you can reference them using this formula for the Image control's Image property:

First(ThisItem.Attachments).AbsoluteUri

This formula retrieves the URL of the first attachment associated with the current list item.

Real-Time Example: Asset Management App

Imagine building an Asset Management App using a SharePoint list with the following columns:

• AssetName (Text)
• AssetNumber (Text)
• AssetImage (Image column)
• AssetStatus (Choice or Text)

Using the steps outlined above, your Power App can easily display the AssetImage alongside the AssetName, AssetNumber, and AssetStatus, making asset tracking significantly more user-friendly and efficient.

Benefits Recap

• Better User Experience: Visual data enhances usability and engagement.
• Improved Data Recognition: Users can quickly identify records.
• Modern Interface: Creates professional and appealing applications.
• Faster Navigation: Images help users locate information efficiently.
• Easy Integration: Seamlessly works with SharePoint Online data.

Best Practices

• Use Image Columns: Whenever possible, utilize SharePoint's dedicated Image column type over attachments for better management and performance.
• Optimize Image Sizes: Avoid uploading excessively large images to SharePoint, as this can impact loading times. Resize images before uploading if necessary.
• Use Galleries: Galleries are efficient for displaying multiple image-based records.
• Apply Responsive Design: Ensure your gallery and image controls adapt well to different screen sizes and devices.
• Manage Permissions: Verify that users have the necessary SharePoint permissions to view the list and its images.

Common Use Cases

• Employee Directory: Displaying employee profile photos.
• Product Catalog: Showcasing product images for e-commerce or internal catalogs.
• Asset Management: Displaying photos of equipment or assets.
• Inspection Applications: Storing and viewing images related to inspections (e.g., property condition, damage).
• Inventory Management: Visualizing inventory items for better tracking.

Troubleshooting Common Issues

• Images Not Displaying:
  • Double-check SharePoint permissions.
  • Verify the image URL is correctly referenced in the Power App.
  • Ensure the image column name is accurate in the formula.
• Blank Image Control:
  • Confirm that an image has actually been uploaded to the SharePoint column for that specific record.
  • Check if the formula correctly points to the image data.
• Slow Performance:
  • If loading is slow, consider optimizing image sizes in SharePoint.
  • Review your gallery's delegation capabilities. Large datasets might require specific delegation strategies.
• Access Issues:
  • Ensure the Power App user has been granted read access to the SharePoint list.
  • Check if the SharePoint site itself is accessible to the user.

Conclusion

Displaying images from a SharePoint list within Power Apps is a powerful technique that significantly enhances application usability and user engagement. By connecting your SharePoint list, utilizing a Gallery control, and configuring an Image control with the correct data binding, you can effortlessly present rich visual data to your users. This approach is ideal for a wide range of business applications, including employee directories, product catalogs, asset management solutions, and any scenario requiring image-based information.