Bringing images back to an app

[joef]

Hi All,

I am building an app for our mail room. 

I added a barcode scanner

     On Scan I send it to a collection and added a text box to display the scanned barcode.

I added a camera control

     On select of Camera I have it adding to a collection and a gallery to display the image taken.

I am using Patch() to insert to data into an SPO list.  

Barcode  = Single line of text

ImageData = Multiple lines of text.  (I tried to use a Hyperlink data type (picture), but the app created an error when I tried to submit the data, "Invalid URL".)

No issues getting the data into the list, but there is only a non-clickable link to the image.  I can copy the link into a browser an the image shows.  

I have the default SortByColumns(Filter() to bring the data, but the image comes back as the non-clickable link, not an image.

Questions:

Is there a way to bring back the image into the app?  

Is there a way to change the datatype on the Browse screen to display the image?

Is there a way to display the image in the SPO list?

TIA,

Joe

[v-siky-msft]

@joef 

I don't suggest you use Text field to save Image string.

You can use flow to upload the image to Sharepoint document by converting the image to JSON and add to the List attachment.

Then, whatever the images are in the sp doc or sp list, you all can display them in PowerApps.

You can check this thread for more information: https://powerusers.microsoft.com/t5/Building-Power-Apps/Need-to-add-signatures-from-a-collection-as-... 

Sik

[WarrenBelz]

Hi @joef ,

Firstly, @v-siky-msft is totally correct on what I have found is the best way to handle images you want displayed in PowerApps Image controls.

If you just want to use the app on PCs, then the {Link} property of the library item will display it nicely.
If you want it to display it on mobile devices, then I can give you the benefit of about a week of pain I had working it out involving collections, galleries inside custom cards and thumbnails.

[joef]

Thank you both for your responses, 

I will try @v-siky-msft method using Jason, but Yes @WarrenBelz , I would like to display the images on mobile devices. 

The mail room people will need to display everything when bringing the packages up for signatures.  I was trying to figure out how to use collections and galleries, but I couldn't get the gallery to display the images..  

Any help with that would be great.

Thanks again,

Joe

[joef]

Hi @v-siky-msft ,

I tried to use a hyperlink or Picture, but when sending to SPO list it errors on invalid URL.

What datatype would you suggest?

Thanks,

Joe

[WarrenBelz]

Hi @joef ,

I will try to keep this reasonably short as I can fill in any gaps you have later.

Firstly for this method to work, the signature (as suggested by @v-siky-msft ) needs to be in a SharePoint Library (a jpg in this case). This video from Shane Young (I use a variation of it) sets out how to do this.

One trick immediately needed - create a column called Thumbnail in the SharePoint list and format it as a Hyperlink or Picture then choose Picture. If you then simply want to display all the signatures in a gallery:-

• Filter the items of the gallery to match the master record.
• The Image property of the Image control is ThisItem.'Thumbnail ({Thumbnail})'.Large  (Medium and Small also available)

Also on mobile devices, I collect the images (for faster performance) instead of looking directly at the gallery. Now for the trickier bits:

I have attached a couple of screenshots from one of my my test apps. The first is a screenshot of the PowerApps form and the second is a HMTL screen that gets a PDF generated and emailed from the app. I will deal with the screen here - the second one is  for another discussion, but shows you what is possible.

Now to get the signature onto the form in a card:-

• Create a collection as above with the matching item/s from the Library (I will call it colSig).
• Create a gallery with Items of LastN(colSig) - you will get one item being the newest if there are any others.
• The Image property is ThisItem.'Thumbnail ({Thumbnail})'.Large
• Make the gallery size and image size the same also the template height and turn off "show scrollbar"
• The card is a custom card with no data source - size it at least as much as above and copy/paste the gallery in there.

Done - the signature will now display in the card on both PCs and mobile devices.