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.



    

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.


    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).

/wp-content/uploads/2015/07/button_750492.pngtextView.png

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

Output.png


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?fullscreen=true
To report this post you need to login first.

11 Comments

You must be Logged on to comment or reply to a post.

  1. 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.

    Thanks.

    (0) 
  2. 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 =
         wd_this->wd_get_api(
           )->get_application(
             )->get_custom_style_manager( ).

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

     

    Best, Sander

    (0) 
  3. 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. 

    (0) 

Leave a Reply