GUI Components of SAP Front End

If you examine the standard installation of SAP Front End, you will notice that there are three types of themes that govern the appearance of GUI of the application. These are Enjoy, StreamLine and High Contrast.

While there should be a menu in the SAP GUI itself to change theme type, the actual information about the loaded theme is located in the registry. Its located in the registry key path HKEY_CURRENT_USER\Software\SAP\General\Appearance\Themes\SystemDefault.

Access to the application resources such as icons and bitmap is accomplished also using the registry. By examining the registry key path of each theme sub key, you can see that SAP GUI utilized the file called theme.xml. This file exists in each of the theme folder below SAP GUI application.

SAP Front End application accessed theme.xml file by reading the HKEY_CURRENT_USER\Software\SAP\General\Appearance\Themes\Enjoy\path sub key in the registry.

Inside the file is where most of GUI components gets drawed to the window canvas. Most of the drawing is carried out by using Windows’ GDI BitBlt function to perform the block transfer of selected areas in the master bitmap file that contains all the GUI resources to client’s screen.

I will use the Enjoy theme as an example to describe how SAP GUI perform the GUI drawing. Let’s start by the top left location in SAP Front End :

This icon is located in the sapfront.bmp of the Enjoy theme folder. The coordinate information for this icon is obtained using BtnIconE node below Caption node in theme.xml as follows :

The top and left information corresponds to the x and y coordinate location inside the sapfront.bmp file. The top and left information is for starting corner, bottom and right is for ending corner. Using this information, the SAP GUI will mark the start and end corner of the loaded bitmap and perform BitBlt to appropriate screen location.

Next, for the background color for the above caption bar (i.e. the color below the BtnIconE icon), is obtained using “Bgnd” node, also below the Caption node :

The top right logo :

Is accessed using “AnimationLo” node :

The main menu caption font color :

Is accessed using “PalIndex” sub node of “CoNormalFont” node. This node is part of “Color” node, which eventually below “MainMenu” node :

The PalIndex denotes the pallete index (starting from zero) and the actual RGB color is obtained from the pallete information inside sapfront.bmp file in each theme folder. In the above sample, the index value of 59 will corresponds to RGB 255,204,51 for Enjoy theme. If this node is not specified, the color of main menu text will become RGB 156,165,198 which corresponds to PalIndex 229.

The font type of client area labels :

Is determine using “Var” node below “Fonts” node. This node is located just below the “Root” node :

You can also see that the content of entry field :

Can also be set using “Fix” node inside the “Fonts” node above. For all of the theme, its usually using the “Arial Monospaced for SAP” for entry fields font.

What about the color of the font ? The color of the entry field font and the label is configured using the palette index 0 inside the sapfront.bmp file. To edit the palette information of sapfront.bmp, you can use the graphic manipulation such as Paintshop pro or other application that has palette editing capabilities.

The leading line, border and background color of the edit box :

or combo box :

can be customized using the “edit” node :

The PalIndex of “CoNormalFill” node governs the background color of editbox and combobox . The default value for this color is at pallete index 255 or white color.

The “CoBorderLine” is used to determine the color of leading lines or border for the editbox.

The color and appearance of application bar area (i.e. the one that has buttons on it) :

is determined using “Applbar” node. For example, to set the background color of this area, you can change the pallete index of “CoBackgroundFill” node below “Color” node :

The background of client area, i.e. the color inside red rectangle marker :

Unfortunately, there is no way to change the background color of this area using the xml node. But this value is actually resides in the registry. I’ve already describe the method to change the active theme at the start of this article.

Each active theme, for example the Enjoy theme, has several sub themes, and it is inside this sub themes that the SAP GUI application obtained the color code for the above background color.

Let’s take Enjoy theme as an example. This theme has several sub themes such as Blooming Desert, Bright Complementary, etc :

The information about active or selected sub theme is recorded in ActiveColorSetting value of the theme node :

In order to get the background color, based on the value of active color setting, the SAP GUI perform access to strPaletteMain value. For example, when the active color setting is Blooming Desert, the application will get the strPaletteMain value using this keypath :

HKCU\Software\SAP\General\Appearance\Themes\Enjoy\Blooming Desert

The color code for background color is located at the last element of strPaletteMain string :

So, for the Blooming Desert sub theme, the colorref rgb color code for background will be 0x0098cbcb, or RGB value of 203,203,152.

The highlight color (i.e. inside red rectangle marker) for field that currently activated / on focus :

Again, there is no xml information that can be used to customize this color, but you can do it by changing palette index 97 of sapfront.bmp file.

Well, I think that’s all for now. Happy customizing 🙂