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.
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:
Helpful document.Keep up the bravo.
Thanks
KH
Thank you
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.
For this particular requirement you it achieve it by coding in WDDOMODIFYVIEW hook method
it does not trigger an Event, so you cannot code anything in the hook
yes this one is really really needed, not sure why it is still not here in WDA
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:
Best, Sander
Nice one
Hi Harsha
Can the FPM do the same thing?
Yes. Check this link.
** Team FPM ** - Instance Styling in FPM
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.