PowerApps – Pictures in SharePoint Lists

Pictures and Hyperlink Columns in SharePoint

In a SharePoint list, you can add a column as Hyperlink or Picture. In the details of the column, you can select whether to format the URL as either of those two values. It is convenient, most of the time, to select Picture as the URL option. When you view the list in a browser, the thumbnail for the picture appears.

That Doesn’t Entirely Work for PowerApps

Let me first refer you to another blog post at Power Sweet! This post gives a description of the problem and a solution on how to fix it, but I had to play around quite a bit to implement all that was necessary to get it to work properly. In this post, I’ll elaborate on what I did to get it to work in my PowerApps.

  1. As in the Power Sweet! post, I edited my list to change from displaying the URL as a picture to displaying as a hyperlink. I also copied and pasted the JSON code into the format column field. When I returned to the list view, the picture displayed just as it had when I had the URL display as picture.
  2. In my PowerApps, the datacard for that hyperlink field was still showing as a it had before this change. I first clicked on the View tab, then datasource, click on the ellipsis next to the list and then refresh. I then, as Power Sweet! suggested, deleted the datacard from the form view and re-added it. Sadly, the card properties did NOT change.
  3. I twiddle a bit to no avail, finally saved and published the app, and closed the browser and did something else for a while. When I came back later and opened it for edit, I had the option to Edit URL and chose that! I can’t say that the steps I took did the job, or it just took extra time for SharePoint to get the chances over to PowerApps. Not the kind of solution I like.
  4. Once I got that done, I then had to figure out how to add the image control. The Power Sweet! glossed over that a bit, so let me expand in a way that I hope helps you.
    1. On the datacard (not the value but the larger card), make sure it is selected and then drag the card corner or side to expand it.
    2. Next, click on the datacardvalue, which is the URL for the picture, and drag it to the bottom area inside the datacard.
    3. Now select the outer datacard again. Select the Insert tab on the PowerApps menu and from the media dropdown, choose image. This will place an image inside the datacard. I moved and resized it to be over the URL.
    4. Now select the image control, and for the Image property, enter the name of the datacardvalue.Text.
    5. This is not required but adds a nice touch. Select the URL and for the HintText property, set it to “Enter URL for .jpg” or something similar.
  5. The image below shows the final result of this:
Datacard for hyperlink or picture column

When the app runs and the user enters the value for the URL for the picture, that picture will appear in the image control you inserted in the form. When the form is submitted, the URL will be included in the the item in the SharePoint list.

How to Do This Not on a Form

In my PowerApps, I also displayed existing items in a gallery and allowed for “in place” editing. I only used the form control when adding a new item. So I had to figure out a way to do this, and here is what I came up with. Below is the first item in the gallery.

Item in gallery – click on edit icon to change

When the edit icon is selected, here is what it looks like:

Item in edit mode

First, I made all the text fields change their fill color to identify which could be changed. I addition, a URL field appears; it is a text field. The text field for the URL has Default property set to ThisItem.Image which is the SharePoint list column name, while the image control has Image property set to <textfieldname>.Text. One appears as a picture and the other as the URL text value because one is an image control and one is a text field. Change URL in the text field and the image changes to match.

If you are wondering how the FIll property changes and how some items just appear, what I did was to set the OnSelect property of the edit icon to Set(varEdit,ture) and then set the Visible property of the label and text fields for the URL to varEdit. When this value is true, they appear. When either the Save or Cancel icon is selected, varEdit is set to false and they disappear. In a similar manner, the Fill property of the text fields is If(varEdit,LightGreen,LightGoldenRodYellow).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.