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.




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


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





Choose the image to be uploaded from the pop up.





Provide the name and description for the image.









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




Provide the id and type for the UI element.





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

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






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.






Save and activate the whole component.


Step 4: Create an application to test the component.







About Arun


  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.

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

  3. Nowadays, images are required for an assortment of reasons, beginning with applying for an international ID or an occupation or making a profile on a dating site.Photo Retouching Service


Powered by Blogger.