Skip to Content
Author's profile photo Harsha Jalakam

Custom Styling For Webdynpro ABAP UI Elements

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.

     Create Component.png

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



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.

    View Layout.png

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



Assigned Tags

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

      Helpful document.Keep up the bravo.




      Author's profile photo Harsha Jalakam
      Harsha Jalakam
      Blog Post Author

      Thank you

      Author's profile photo Ramin Shafai
      Ramin Shafai

      Wow, it's good to see finally SAP is adapting more of web technology into WebDynpro. Will definitely use the CSS support.


      What about the DOM events, can we now use onChange event on a field? eg. populate name of Employee when user enters employee id? Really really need the onChange support, find it hard to tell my client WebDynpro still doesn't support it.


      Author's profile photo Harsha Jalakam
      Harsha Jalakam
      Blog Post Author

      For this particular requirement you it achieve it by coding in WDDOMODIFYVIEW hook method 

      Author's profile photo Former Member
      Former Member

      it does not trigger an Event, so you cannot code anything in the hook

      Author's profile photo Former Member
      Former Member

      yes this one is really really needed, not sure why it is still not here in WDA

      Author's profile photo Sander Boers
      Sander Boers

      Thanks for this helpfull blog post.


      Some additional question though:


      Any ideas on how this could be applied to a table cell? Possible to use more colors via RGB coding instead of the default ones via cl_wd_table_column=>e_cell_design? When I use the name = 'backgroundColor' value = 'black', only the background of the text is getting black, not the entire cell.

      Or where I can find the properties to adjust the coloring of a Caption? Tried with the following code (and adjusted the styleClassName property of the caption to 'myCaption'), but that doesn't do the trick:

        lo_csm =
               )->get_custom_style_manager( ).

         lo_style = lo_csm->create_custom_style(
           style_class_name = 'myCaption'
           element_type     = 'CAPTION' ).
           name  = 'fontColor'
           value = 'orange' ).
           name  = 'backgroundColor'
           value = 'white' ).
         lo_csm->add_custom_style( lo_style ).


      Best, Sander

      Author's profile photo Ananda Babu Uppara
      Ananda Babu Uppara

      Nice one

      Author's profile photo David Sun
      David Sun

      Hi Harsha

           Can the FPM do the same thing?

      Author's profile photo Former Member
      Former Member
      Author's profile photo Markus Meier
      Markus Meier

      Somehow it does not seem to work with an S/4 Hana system. Even in the wda WDR_TEST_CUSTOM_STYLES nothing happens.
      I tried the latest Version of Chrome, IE and Firefox.