Display Image after choose image file on list widget

Hi,

How do I display an Image after choosing it from a list widget?

use Html tags in the expression if you have the Url in the List

"<img src='"+imageList.Current.url+"'>"


If the List contains the Image as a blob or base64 you need to convert it to base64 before you make as source.

"<img src='data:image/png;base64,"+BinaryToBase64.Base64+"'> "


If you are talking about List box and not List Records widget then you need to use a Ajax refresh of part of the screen with Image pointing to a External URL and just update the url from Empty to some correct URL. or just use javascript/jquery in the front end to change the URL of the Image that you have previously added


Hi Gaelius,

In Outsystems UI for version 11 you have the component Lightbox Image for that. If you are still on version 10 SilkUI also have the same component.

Regards,

Marcelo

coder kamath wrote:

use Html tags in the expression if you have the Url in the List

"<img src='"+imageList.Current.url+"'>"


If the List contains the Image as a blob or base64 you need to convert it to base64 before you make as source.

"<img src='data:image/png;base64,"+BinaryToBase64.Base64+"'> "


If you are talking about List box and not List Records widget then you need to use a Ajax refresh of part of the screen with Image pointing to a External URL and just update the url from Empty to some correct URL. or just use javascript/jquery in the front end to change the URL of the Image that you have previously added


Hi Kamath,

My bad, I was actually talking about the combo box widget.

see I got this on my screen and want to display an image when selected the in the list


Hi ,

On the onChange of combobox run an aggregate that gets the binary of the file. On the screen you the image widget that consumes the result of that aggregate. after running the aggregate just ajax refresh the image widget.

Regards,

Marcelo

Marcelo Ferreira wrote:

Hi ,

On the onChange of combobox run an aggregate that gets the binary of the file. On the screen you the image widget that consumes the result of that aggregate. after running the aggregate just ajax refresh the image widget.

Regards,

Marcelo


Hi Marcello,

Running an aggregate on the Onchange prompt me to create the 

OnListImagesChange

which the image  widget cannot consume.Or Am I doing it wrong?



Hi,

Attached a working example.

Regards,

Marcelo

Solution

Gaelius Novachrono wrote:

Marcelo Ferreira wrote:

Hi ,

On the onChange of combobox run an aggregate that gets the binary of the file. On the screen you the image widget that consumes the result of that aggregate. after running the aggregate just ajax refresh the image widget.

Regards,

Marcelo


Hi Marcello,

Running an aggregate on the Onchange prompt me to create the 

OnListImagesChange

which the image  widget cannot consume.Or Am I doing it wrong?



Please find Attached OML. 

Note : images and Data might have been removed in oml, Just add some as needed to test.

Here is a proof of it working.

This is by using the Ajax way.


If you want to do simpler way just do it using Javascript in the front end. Just change the url.


Note : These images are stored in Images or Resources folder and I am accessing it as external Url.

If you have stored the images as blob them you can use "<img src='data:image/png;base64,"+BinaryToBase64.Base64+"'> " and just change the url from Javascript.


Solution