Simple Approch to Generate Standardize Buttons

[ceedee666]

When enhancing a SAP CRM view a few days ago I noticed a simple way to generate standardizes buttons in the Web UI. I'm quite sure that most people know this approach already. Nevertheless, I totally missed it up until know and therefore it would be worthwhile blogging about it.

When creating a button I'd usually use one of the following approaches (depending if I need to create the button in a BSP or in ABAP code).

<thtmlb:button id      = "SaveandBack"
               onClick = "SaveandBack"
               enabled = "<%= abap_true %>"
               iconSrc = "<%= cl_thtmlb_util=>get_icon_url( 'saveandback.gif' ) %>"
               tooltip = "<%= otr(CRM_IC_COMP_UI_BUAG/SAVEANDBACK) %>" />

DATA: button TYPE crmt_thtmlb_button

button-id       = 'SaveandBack'. "#EC NOTEXT
button-on_click = 'SaveAndBack'. "#EC NOTEXT
button-text     = cl_wd_utilities=>get_otr_text_by_alias( 'CRM_IC_COMP_UI_BUAG/SAVEANDBACK' ).
button-tooltip  = cl_wd_utilities=>get_otr_text_by_alias( 'CRM_IC_COMP_UI_BUAG/SAVEANDBACK' ).
button-icon_src = cl_thtmlb_util=>get_icon_url( 'saveandback.gif' ).

This approach forces me to do three things which each an every button I create:

• Search for an appropriate icon
• Search for or create a suitable icon text
• Search for or create a suitable tool tip text.

As a consequence, all buttons created this way might differ a little bit (e.g. the save icon is used for a button that executes a "save and back" action). This is also true for a large number of SAP standard views in SAP CRM.

The solution to this is hidden in the constants of the class CL_THTMLB_UTIL and the type attribute of thtmlb:button. In order to, for example, create a "save and back" button one only needs to look up the correct constant in CL_THTMLB_UTIL. Then this constant can be use to create a button using the code shown below:

<thtmlb:button id   = "SaveandBack"
               type = "<%= cl_thtmlb_util=>gc_icon_saveandback %>"
               enabled = "<%= abap_true %>" />

DATA: button TYPE crmt_thtmlb_button

button-id       = 'SaveandBack'. "#EC NOTEXT
button-type     = cl_thtmlb_util=>gc_icon_saveandback.

Using the constants defined in the class CL_THTMLB_UTIL it is possibe to create buttons including a icon, a text and a tool tip without the need to search for OTR tests and icons. Furthermore, if the same constants are used for buttons representing the same action, this leads to a nice standardizes UI.

If you are interested which icons and texts are created using on of the constants in CL_THTMLB_UTIL you can have a look at CL_THTMLB_UTIL=>GET_ICON_INFO. This method is called in the implementation class of the <thtmlb:button> element (i.e. CL_THTMLB_BUTTON).