Working around the limitations of the SharePoint picture column in PowerApps forms

UPDATE JUNE 3, 2020

The workaround described in this blog is still valid but depends on the images being publicly available (no need to log in to see the image). Since most companies do not allow anonymous sharing in Office 365 images stored in SharePoint will not show in the form or Canvas App using this method.

Recently I was playing around with the PowerApps form in SharePoint on a list that contained an image column. You might have found out that at this moment the image column is read only within PowerApps canvas apps. You can show the image from the picture column but you cannot update it. In case of a PowerApps form you still have the possibility to update the column using the Quick edit option or the details pane, but you probably switched off that option because when you use PowerApps chances are you added some logic to the editing of the fields that users can bypass using Quick edit or updating in the details pane. So lets assume those options are of the table.

Picture column view and edit in PowerApps form

As you can see in the above image  the picture from the picture column shows up beautifully both on the view and edit form. How to work around this view only limitation?

What does not work

Switching the corresponding card on the form to a different layout

A picture column card has two layout options View Image and View text. When you select View text the field in the data card only shows a complex url that gets you nowhere. This complex url is the only text information the column will give you.

Use patch on a picture column

Bypassing the form and using patch to update the column will only result in an error stating that this column is read only.

Use Flow

Maybe use Flow to update the column? It is always a good idea to have a look at Flow if updating the data directly from PowerApps is not working, but in this case no solution there either. The update item action of the SharePoint connector will not show the picture column for updating.

Bottom line: as long as the column is of type picture column the column is view online in your PowerApps form.

What does work

The way to handle pictures inside your list that you want to show up in your PowerApps form and view in your list is by using a Hyperlink column instead.

When you edit the settings of your picture column you can change the type of the column to Hyperlink
The column in your list will now show the URL of the picture.

When you go to your form in the PowerApps designer the form still sees this column as a picture column. My findings are that you need to remove and add your list as a data source before the column type is updated. At this point the card is still shown as a picture column.

When you remove the field from the form and add it again the card is properly changed to a hyperlink card. Since a hyperlink can be edited through PowerApps you now have an edit layout option for the card. 

PowerApps can show images based on a URL. So the content of the Hyperlink column can be used to show the picture similar to when the column was a picture column. You can add an image control to the hyperlink card that shows the image based on the contents of the card field. 

Now when you update the hyperlink field the image will change too. And the updated hyperlink value can be saved to the list. 

Still one problem to solve: how to show the picture in the SharePoint list view. The answer to this is: SharePoint Column formatting. Add the JSON below to the Format column field of your hyperlink column and a picture is shown instead of a url.

{
  "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "style": {
        "width": "50px",
        "height": "50px",
        "overflow": "hidden"
      },
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "@currentField"
          },
          "style": {
            "position": "relative",
            "width": "100%",
            "height": "auto"
          }
        }
      ]
    }
  ]
}

The end result: a list with a column showing a picture that can be updated using the PowerApps form.

10 thoughts on “Working around the limitations of the SharePoint picture column in PowerApps forms”

  1. Franck Catinot

    Nice post 🙂
    Have you got a solution to edit sharepoint localisation column in powerapps ?

    1. User Avatar

      Hi Franck,
      Have not had the time to play with the localization column in the context of PowerApps yet. A good subject for a new post. 😊

  2. Pingback: PowerApps – Pictures in SharePoint Lists – I Love PowerApps and Flow

  3. My only issues is that the Hyperlinks data and not show in the mobile app version. Its a bummer

    1. User Avatar

      You are right, Rudy. There are some definite drawbacks with this solution. I will try figure if there is another workaround available to make this work. I’ll keep you posted.

  4. There’s a catch 22 problem with this solution.
    If you change the image column in SharePoint to ‘Hyperlink’, Power apps will attempt an anonymous call to SharePoint to retrieve the image via the direct link. This will mean that all users viewing the Power App will need to be logged into the SharePoint site where the Data source is stored or the image will not display. This log in times out periodically as well, so they’ll need to log in every couple of days.

    Just be advised, if you are building an App with a SharePoint data source , then you’ll almost certainly be logged into SharePoint, and the images will always display for you – but this will likely not be the case for your end users.

    On the other hand, if you change the SharePoint Image column to ‘Picture’ Power Apps calls the image via ‘appres://datasources’ which means users will be able to view the image without logging into SharePoint, however the property becomes Read Only, and can’t be updated in Power Apps (as this blog post details).

    Very annoying, and Power Apps is full of ‘damned if you do, damned if you don’t’ problems like this.

    1. User Avatar

      You are absolutely right. I need to get back to the drawing table regarding my own solution 🙂
      Had some issues with it myself recently. I wonder if adding the library containing the images as a data source would solve anything.

Comments are closed.

%d bloggers like this: