Image from SharePoint list does not display

[SueZeeBee_ganto]

I've made an canvas app linked to a SharePoint list with data. Because I want to display an image as part of a datarecord in a gallery , 

In the SharePoint list I have made:

• a column  type image (set to image, with URL to document in document library)
•  a column type Image (set to hyperlink with URL tot document in document library)
• a column type multiline with the URI link to the document in the document library. 

I then added an image control to my gallery and linked it to all 3  columns, but no image is displayed in either image. What is the correct solution to make this work? 

[eka24]

Check these videos
https://youtu.be/2QeOILfo1Bw?t=52
https://youtu.be/buJKpQD0ZPM?t=52

If you like this reply, please give kudos. And if this solves your problem, please accept this reply as the solution.

[SueZeeBee_ganto]

Thank you for your reply. I've had a look into both video's and it occurs to me they are both examples of a document library.

I'm using a SharePoint list with multiple data columns as a datasource. I don't think the thumbnail functionality is available for such SharePoint lists? Or do I have to include the image file as an attachment instead of a datacolumn for the thumbnail to show? 

If I look into the first video it looks like the Image URI is used as input for the formula in the Image setting. As you can see in the screenshots in my original post I've tried to do the same in my solution, but without any result. 

[WarrenBelz]

Hi @SueZeeBee_ganto ,

Have a look at this post - I think it is what you need.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

[SueZeeBee_ganto]

Hi Warren,

I've not uploaded pictures through the app but used Power Automate to display the URI of the pictures. I've not managed to display it yet in Power Apps when I put the URI data as a data column in my list. 

I've made a workaround now where I put the image name in my SharePoint list as a data column and make the app look up the matching image based on the document name in the document library using the thumbnail expression (Image=LookUp(Documents.Name='Columnname',Thumbnail.Medium)). It works but the loading of images in the app takes time. I'm now on the path to implement the same solution with images in a collection in the app itself to see it it will reduce loading time. 

[WarrenBelz]

Hi @SueZeeBee_ganto ,

I use the Thumbnail as you do, but with one change.

As the pictures I want to display are always related to a particular list item and are not huge in number (300 is about the maximum for desktop apps and about 10 for the mobile users), I always collect them. The query is delegable (the link is numeric) and they load very quickly, even with the thumbnail content from libraries with up to 30000 images.

They also resolve the thumbnails in the image control almost instantly and in the case of the larger collections, have a naming convention with sub-references that search perfectly with the In filter.

Happy to share more if you need it.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

[SueZeeBee_ganto · Accepted solution]

Hi @WarrenBelz 

Due to the fact I'm still a Power-apps novice and developer newbie on top of that, I'd like to hear some more about the solution you are trying to explain to me.

This is the solution I've made to work now:

1. Uploaded about 30 images manually to Media in Powerapps (I'm (re)using them for multiple list/column items)
2.  My SharePoint list has a column SP_list_column 1 with the name of the image per row in it.
3. Made an clearcollect function on the on visible property for the homescreen to collect the images to the collection called Applicationimages with a column AI_icon_name and column image for the image name from the media Images library.  (ClearCollect(Applicationimages,{Row: 1, AI_icon_name: "Icon_name", Image: Name_image}, {Row:2 etc})
4. Loaded the page to collect the data in the collection
5. Added a blank gallery linked to my SharePoint list
6. Added a SharePoint list item column in a text label to display a data column from the list and added an image control
7. Set Image property of the image control to: LookUp(Applicationimages,AI_Icon_name='SP List column 1',Image)

It's loading the correct image without using the thumbnail solution and I don't see any loading time when i open the page, so I am pretty happy now. 

If there is any advice you can give me to make this process even easier or more robust, I'm all ears (but please, in baby steps :-)) 

[WarrenBelz · Accepted solution]

Hi @SueZeeBee_ganto ,

Not far from where you are, but you have a different requirement to me as you are getting all of the images all of the time. However still something you can do that will work a bit quicker and also work on mobile devices.

Your third point
Made an clearcollect function on the on visible property for the homescreen tocollect the images to the collection called Applicationimages with a column AI_icon_name and column image for the image name from the media Images library.  (ClearCollect(Applicationimages,{Row: 1, AI_icon_name: "Icon_name", Image: Name_image}, {Row:2 etc}).

You do not have the name of the SharePoint Library you are using in the code - I assume you forgot when you typed it out. When collecting, just do the lot

ClearCollect(ApplicationImages, SharePointLibraryName)

That way you can use the ‘{Thumbnail}’.Small/Medium/Large in the image control. The large one is quite good for full screen and we use it often reviewing site photos. It also loads very quickly as mentioned as is good particularly when bandwidth is limited.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

[TheRobRush]

@SueZeeBee_gantoin case you ever need to upload multiple images for a single item, here is how I do that, just to add a little to your repertoire

///// CAMERA CODE BELOW IS IN THE ON SELECT OF TEH CAMERA

//COLLECTS THE IMAGE DATA FOR SHAREPOINT SUBMISSION LATER
Collect(
    SupportImage,
        {
        Name: "Example"&examplenumber&".jpg",
        ContentBytes: MyCamera.Photo,
        '@odata.type': "",
        URL:MyCamera.Photo
    }); UpdateContext({examplenumber:examplenumber+1});

//COLLECTS THE IMAGES TO BE VIEWED IN MY GALLERY ON THE ITEMS SUBMIT PAGE(THIS APP ALLOWS MULTIPLE IMAGES FOR EACH SUBMISSION
Collect(LocalImage, MyCamera.Photo)

//////////////////////////////////////////////////////////////////////////////////////////////////


/////SUBMIT BUTTON BELOW TAKES THE IMAGES YOU HAVE STORED, PREPARES THEM FOR COLLECTION, THEN SUBMITS THEM TO SHAREPOINT (MY APP DOES IT IN MULTIPLE STEPS FOR A REASON THAT IS SPECIFIC TO THE APP


//COMBINES MULTIPLE IMAGES IN CASE THERE ARE MORE THAN ONE RELATED TO THE ITEM
Set(imagedump,Concat(SupportImage, URL & "|"));        

//COLLECTS THE DATA ON THE ITEM, AND ADDS THE PHOTO URL INFO
ClearCollect(                 
            workorder,
            {
                PRIMARY: PRIMARY.Text,
                SUB1: SUB1.Text,
                SUB2: SUB2.Text,
                SUB3: SUB3.Text,
                DESCRIPTION: DESCRIPTION.Text,
                DATE:Now(),
                IMAGES:imagedump
                          });            

//PASSES THE COLLECTION ON INTO SHAREPOINT
ForAll(workorder,Patch(WorkOrders,{Title:PRIMARY,OData__x0053_UB1:SUB1,OData__x0053_UB2:SUB2,OData__x0053_UB3:SUB3,DESCRIPTION:DESCRIPTION,DATE:DATE,IMAGES:IMAGES,CLOSED:false}))

///////////////////////////////////////////////////////////////////////

///// LATER ON IN THE TOOL USED TO VIEW PREVIOUS SUBMISSIONS I CAN PULL ALL THE DATA ON THE ITEM SELECTED

//BELOW IS ATTACHED TO THE SELECTION BUTTON IN A GALLERY OF THE OPEN ITEMS, LAST LINE RETRIEVES, AND SPLITS THE URL INFO FOR ATTACHED IMAGES
Select(Parent);
Set(hidedate,false);
Set(descriptionlookup,ThisItem.DESCRIPTION);
Set(lookupselectedarea,ThisItem.Title);
Set(lookupsub1,ThisItem.OData__x0053_UB1);
Set(lookupsub2,ThisItem.OData__x0053_UB2);
Set(lookupsub3,ThisItem.OData__x0053_UB3);
Set(lookupworkorder,ThisItem.WORKORDER);
Set(lookupdate,ThisItem.DATE);
Set(lookupID,ThisItem.ID);
ClearCollect(SplitImages,Split(Text(ThisItem.IMAGES),"|"))

/////AND THE CODE BELOW IS IN THE IMAGE GALLERY OF PULLED UP ITEM TO DISPLAY THE IMAGES WE PULLED

//Gallery Source
ITEMS = SplitImages

//Insert an image in the gallery and make its items
ThisItem.Result

[SueZeeBee_ganto]

Hi @WarrenBelz 

I did not know you could load a collection directly from a SharePoint document library, that is a great tip (like I said, newbie ;-)). In step 1 I've just uploaded my images manually in the media library of the app because I've only got about 30 of them and there are few additions and added them from there into my collection. 

If I use the ClearCollect function with the SharePoint library does that mean you don't have to declare the columns but the column names of you library are used automatically as column names of your collection?

I can see that this is the way to use the thumbnail property from a collection, thx. 

By the way, for other users like me who have made a SP site in their own language: the thumbnail property is translated to a term in your language regardless of your system language  ( for instance in Dutch: miniatuur). Took me a while and a lot of frustration to figure that out...