SAP ABAP NetWeaver Tutorial

In the web dynpro applicaition, we always find some very cool icons. This post will tell you how to use the SAP standard icons or your custom icons in the custom web dynpro applications.

1. Use SAP standard icons

First, find a list of SAP standard icons here.  This document contains all the icons,its bitmap name and description.

Then, for lots of web dynpro UI elements, there is an attribute named imageSource,To  build the value for imageSource, we can use the format as shown  s_< lowercase of bitmap name>.gif.
For example, in above picture, there is an icon with bitmap name ‘F_MOCR’, in the imageSource, we should have value ‘~sapicons/s_f_mocr.gif‘. If run the web dynpro, you should see the corresponding image in your UI element.

2. Use Custom icons.

If the standard icons do not sufficient enough, you can also add your own image or icons.

First, put your images or icons under project fold like below: src->mimes->Components-><your component name>. If your component name fold does not exist, you can create one. Name of this fold comprises the package name and the component name. It should likes “com.xyz.helloworld“.

Then, you can directly use these image and icons in your UI elements.