images in tables

[Former Member]

Hi,

There is a requirement for me like in a table there should be some fileds along with images. how to include image in a table. it shoud visisble like a link. when i click link it sohlud open the image. how to do this. what all r the steps i need to follow. please guide me.

thanks

[S-H · Accepted solution]

Hi Renushree,

If you want to display the images directly in the table use the image UI element as Cell editor in the table. bind the appropriate image to the column whenever you populate the data to the table bound to the table ui element.

But if you want to have a link as the column of table use the LinkToAction UI element, on click of the column or On_Action event of this ui element write logic to launch a popup and display the image.

Best regards,

Suresh

[Former Member]

What exactly is your requirement? Should there be an image which acts as a hyperlink? or do you want text in the link and the image to be displayed after clicking, maybe in a popup?

Regards

Nithya

[Former Member]

my requirement is like if u search for any emp data, it should display in a table all the details of employee. in that table there is a field having emp photo. that is like a link, when v click that like it should open a pop-up image with small size having the link called close. when v click on close image should close. this is my requirement. i dont knw how to include image in table. while creating table itself whether v hav to include the image or wat. how to proceed, please tell me every steps.

thanks in advance.

[Former Member]

In your context node 'Employee', have one extra field 'image_source' of type string. Specify the employee foto column as a LinkToAction. In the properties of the LinkToAction, you will have a property 'ImageSource'. Bind this property to the 'image_source' attribute in your context node. Leave the text property as blank. So now you will have an image as a link and no hyperlink text. You can customize the height and width of the image to a thumbnail size. And the details about which image to display comes from the image_source field, which will be different for each employee.

You will have one more view in which you want to display the image in full size. In this view, have a 'Image' UI element and bind the source property to the same image_source attribute. So since this attribute is to be shared to both views, define it in the component controller. Have your employee context node in the comp controller.

To display images, you need to load them as MIME objects first and specify the file name in the source. Refer this <a href="https://www.sdn.sap.comhttp://www.sdn.sap.comhttp://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/library/uuid/2eb11b59-0a01-0010-dfa3-8292abdf9c4f">tutorial</a> for the same.

Your code in the display method will be to loop in the employee internal table and set the image_source to <employee name>.jpg or whatever depending on your logic. Hope this was clear enough.

Regards,

Nithya