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…
Summary
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.
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_LIST type=”ORDEREDLIST” >
<bi:BUTTON type=”COMPOSITE” index=”1″ >
<bi:ACTION type=”CHOICE” value=”INSTRUCTION” >
<bi:INSTRUCTION >
<bi:REFRESH_DATA />
</bi:INSTRUCTION>
</bi:ACTION>
<bi:CAPTION value=”Refresh” />
</bi:BUTTON>
For our own Button we need the coding for the instructions:
<bi:INSTRUCTION >
<bi:REFRESH_DATA />
</bi:INSTRUCTION>
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).
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:
Go to the XHTML View and insert the coding below
<a >
<bi:attribute name=”href” >
<bi:REFRESH_DATA />
</bi:attribute>
<img border=”0″ name=”img1″ alt=”Ansicht aktualisieren” align=”left” src=”bwmimerep:///sap/bw/mime/Customer/Images/WAD_AktualisierenII.bmp” />
</a>
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:
(also published on http://sap-user-blog.com)
