Custom Styling For Webdynpro ABAP UI Elements

[harsha_jalakam]

With the release of SP for SAP_UI (SP 10), it is now possible to achieve CSS styling for individual WebDynpro ABAP UI elements, which gives the flexibility of customizing our own UI, with custom Background Colors, font colors, font size, etc., without using HTML Islands.

Applying CSS to a WebDynpro ABAP  UI, following steps needs to be followed.

1.  Define the custom styling properties (bg color, font size, font color) for the UI as name value pairs, in the defined type of      if_wd_custom_style=>t_style_properties.

2.  Create the custom style specifying the style class name, properties (defined in step 1), UI element (UI type for which this is applicable to), etc. to  the              interface method IF_WD_CUSTOM_STYLE_MANAGER~CREATE_CUSTOM_STYLE

3.  Now add the custom style created to the instance of  IF_WD_CUSTOM_STYLE_MANAGER, so that the style sheet is available throughout the component.

4.  Specify the stylesheet name, in the UI property styleClassName(In the Vew Designer->UI properties).

Step By Step Scenario:-

1. Create a New Webdynpro Component as shown below.

    

2. In the methods tab of component controller, add the following code in WDDOINT.

WDDOINIT

data(lo_custom_style_manager) = wd_this->wd_get_api( )->get_application( )->get_custom_style_manager( ).   data lo_btn_style_properties type if_wd_custom_style=>t_style_properties.     lo_btn_style_properties = value #( ( name = `fontSize` value = `15px` )                                        ( name = `fontWeight` value = `bold` )                                        ( name = `fontColor` value = `RED` )                                   ).     data(lo_btn_custom_style) = lo_custom_style_manager->create_custom_style( style_class_name = `myCustomButton`                                                                         library_name     = 'STANDARD'                                                                         element_type     = 'BUTTON'                                                                         style_properties = lo_btn_style_properties ). lo_custom_style_manager->add_custom_style( lo_btn_custom_style ).     data lo_txt_vw_style_properties type if_wd_custom_style=>t_style_properties.     lo_txt_vw_style_properties = value #( ( name = `fontSize` value = `15px` )                                           ( name = `fontWeight` value = `bold` )                                           ( name = `fontColor` value = `rgb(95,95,95)` )                                         ).     data(lo_txt_custom_style) = lo_custom_style_manager->create_custom_style( style_class_name = `myCustomTextView`                                                                         library_name     = 'STANDARD'                                                                         element_type     = 'TEXT_VIEW'                                                                         style_properties = lo_txt_vw_style_properties ).    lo_custom_style_manager->add_custom_style( lo_txt_custom_style ).

3. No go to view’s layout tab and create a transparent container with a button and text view and copy the transparent container and insert it as a copied content. The intention here is to show the variation between the normal UI and the modified UI with CSS. Once created it should as below.

   

4. In the copied transparent container, to the styleClassName property of both button and text view add the following property as shown below (the property is the one we had defined in WDDOINT method).

5. Now create the application and run it, to see the changes.

Check WDR_TEST_CUSTOM_STYLES component for more examples and usage of this

References:

1. http://help.sap.com/saphelp_nw74/helpdata/en/7d/1bb2b262f9400a99e17296eb9bd81f/content.htm
2. http://help.sap.com/saphelp_nw74/helpdata/en/57/fa8b41bce2a609e10000000a155106/content.htm?fullscree...