Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
Webdynpro ABAP

Image UI element

 

This tutorial explains how to add an image to the view through Image UI Element. This tutorial adds the image as a mime object within the component. Alternatively you could also upload the image in the mime repository (SE78) and use it or you could also use this image UI element to display images that are stored in the table in the form of XSTRING.

 

This tutorial only explains the first approach of adding image as a mime object.  

 

 

Step 1: Go to the Tcode SE80 and create a webdynpro component as shown below.

 

clip_image002

 

Assign the component to the package or save it in the local object.

 

Step 2: Import the image into the component as shown below.

 

clip_image004

 

 

Choose the image to be uploaded from the pop up.

 

clip_image006

 

 

Provide the name and description for the image.

 

clip_image008

 

 

 

 

 

 

Step 3: Go to the layout of the view controller and insert an image UI element.

 

clip_image010

 

Provide the id and type for the UI element.

 

clip_image012

 

 

Add the component image to the source property of the image UI element.

Choose the image using the F4 help and component images tab.

 

clip_image014

 

 

 

Image UI element will be added as shown below. You will also be able to see a mime folder added to the component which contains the image.

 

 

clip_image016

 

 

Save and activate the whole component.

 

Step 4: Create an application to test the component.

 

clip_image018

 

Output:

 

clip_image020

About Arun

2 Comments:

  1. You can also upload the image in the repository se78 and get the image using the class CL_MIME_REPOSITORY_API. This class will return you the file content in the form of XSTRING. You can bind it to the image ui element by creating a context attribute.

    ReplyDelete
  2. Any idea to display an image in form UIBB in FPM?

    ReplyDelete

Powered by Blogger.