Theming Web Dynpro ABAP and SAP GUI for HTML: Finding the Relevant Parameters

When you start with UI theme designer, you usually have a picture of what your theme should look like. The most challenging task now is to find the parameters which do exactly the changes you want to do. This article gives you some hints on how you can find parameters for controls in Unified Rendering-based applications like Web Dynpro ABAP and SAP GUI for HTML applications.

Finding parameters using the Unified Rendering naming conventions

In Unified Rendering, CSS classes and styling parameters follow naming conventions. Knowing this schema, you can find parameters when you have the name of the control or the CSS classes used for this control. You can find out the control name from the used CSS classes.

Naming convention for CSS classes

[“ur” / “ls”]  [Control/Semantic] [Attribute] [State] [Extension]

The first part indicates if the class is used in both the classic and lightspeed version of Unified Rendering (“ur”) or only in the lightspeed version (“ls”).

The [Control] part can be a control name, for example “Button”, or an abbreviation of the control name, for example “Btn” for button.

For example classes for button controls are “.urBtnStd” for enabled standard buttons and “.urBtnStdDsbl” for disabled standard buttons. The first part “ur” indicates that the class is used for the classic and lightspeed version of Unified Rendering. The second part “Btn” indicates that the class is used for button controls. The third part “Std” indicates that the class is used for standard buttons. Other attributes are for example “Emph” for emphasized buttons or “Tgl” for toggle buttons. The fourth part “Dsbl” indicates that the class is used for buttons with state disabled.

Naming convention for parameters

“sap” [“Ur”]  [Control/Semantic] [Attribute] |State] [Extension]

The second part indicates if the parameter is Unified Rendering-specific, for example “sapUrBtnBorderRadius”, or if it is a cross-technology parameter, for example “sapButton_BorderCornerRadius”.

Note that the control part in the parameter can be the control name or an abbreviation of the control name.

Finding control parameters step by step

1. First open a preview page or add an application which includes the areas you want to change. For example if you want to change button controls you can open the UR control preview “Button”.
   
2. Next you need to know the control name and the abbreviation used for the control. If neither is available to you, you can get the information from the assigned CSS classes. For that, open the developer tools in the browser and select the element you want to inspect with the element picker. Examine the class attribute of the HTML element and look for the control abbreviation. For example in the “Button” preview select the "Standard" button control with the element picker. In the class attribute or in the “Styles” section you see that the abbreviation for “Button” is “Btn”.
   
3. Open the Expert tab in the UI theme designer.
   
   
4. In the search field, enter a term with the regular expression syntax “|” for OR to search for the control name and its abbreviation. For example, “sapButton|sapUrBtn” to get Unified Rendering button parameters as well as cross technology button parameters. In case you want only to make changes for Unified Rendering enter “sapUrBtn” to get Unified Rendering button parameters.
   
   Note: The search returns all parameters that match the parameter id, description or value. The search gives only a help with finding parameters. There is no guaranty that the search with control name and abbreviation returns all parameters available for this control or that all returned parameters influence the control.
   
   Note: When a cross technology parameter is available for a property the Unified Rendering parameter refers to the cross technology parameter in general.
   You can decide if you want to influence only Unified Rendering or also other technologies with your change.
   
   

Unified Rendering Control Abbreviations