Skip to Content
Author's profile photo Midhun VP

HWC Customization: Buttons with icon

Given example is a small tip on how to add icon on menuitem/button in Hybrid Web Container apps in SAP Mobile Platform (formerly SUP).

The JQuery Mobile framework includes a selected set of icons most often needed for mobile apps. It includes a single white icon sprite, and automatically adds a semi-transparent black circle to ensure that it has good contrast on any background color.


An icon can be added to a button by adding a data-icon attribute on the anchor specifying the icon to display. For example, the following markup:

<a href=”index.html” data-role=”button” data-icon=”refresh”>My button</a>

Creates this button with an icon:

ScreenHunter_125 Oct. 23 23.10.jpg

In this example the icon on a button is added dynamically with few lines of jQuery code. Open the file workflow_jQueryMobileLookAndFeel.html

Find below codes inside the file that represents menu buttons in an IOS.

//  Back button

<a href=”javascript:void(0)”  id=”Time_Sheet_Day_DetailsScreenDivBack” name=”Back” onclick=”menuItemCallbackTime_Sheet_Day_DetailsScreenDivBack();”> Back</a>

//  Refresh button

<a href=”javascript:void(0)”  id=”Purchase_RequisitionsScreenDivRefresh” name=”Refresh” onclick=”menuItemCallbackPurchase_RequisitionsScreenDivRefresh();”> Refresh</a>

To make these menu buttons with icons on it, add below code to the function customBeforeNavigateForward

function customBeforeNavigateForward(screenKey, destScreenKey) {



return true;


A view from ipad after adding refresh icon on a button:

photo (12).PNG

photo (13).PNG

Midhun VP


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Jitendra Kansal
      Jitendra Kansal

      great sharing Midhun !!!

      nice tips .

      Author's profile photo Former Member
      Former Member

      Nice tips