Skip to Content
Author's profile photo Christopher Kampmann

Custom Buttons in WAD Applications

The Button Group Items in SAP Web Templates have a lot of functionality but does not look quite fancy. Why don’t use own images as Buttons in BEx Web Applications to overcome this disadvantage…



The Web Application Designer (WAD) is supporting many functionalities by the use of the Button Group Item such as planning functions. However, since the design of the buttons is not very awesome.

In this post we want to describe a way to use your own images as a button.

1) Create a Web Template with Button Group Items

In the first step you have to create a template and use the Button Group Item to define the needed functions like saving the data etc.

wad designer button group item layout.jpg

The result of this step should be a fully defined web template where all necessary functions are implemented. Please save the web template under another name before we proceed. This step is only an advise because now you have always a ‘save’ version which works.

2) Save the coding of the Button Group Items

In the XHTML View you can see the coding for the instructions behind the buttons.

<bi:BUTTON_GROUP_ITEM name=”BUTTON_AKTUALISIEREN” webitem=”BUTTON_01″ designwidth=”300″ designheight=”23″ >


<bi:BUTTON type=”COMPOSITE” index=”1″ >

<bi:ACTION type=”CHOICE” value=”INSTRUCTION” >





<bi:CAPTION value=”Refresh” />


For our own Button we need the coding for the instructions:




3) Upload your Button Image to the mime repository

The image you want to use as a button must be uploaded into the mime repository (SE80).

mime repository.jpg

4) Insert your Image to the Web Template & assign instruction of the Button

Now insert the image at the desired point of the web template:

image as a button sap wad.jpg

Go to the XHTML View and insert the coding below

<a >

<bi:attribute name=”href” >



<img border=”0″ name=”img1″ alt=”Ansicht aktualisieren” align=”left” src=”bwmimerep:///sap/bw/mime/Customer/Images/WAD_AktualisierenII.bmp” />


By this little HTML Link Coding we can assign instructions / commands to images or whatever.

The result will be a nicer Web Application Designer Template with a smoother view:

own buttons sap wad template.jpg

(also published on

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.