Skip to Content

Theme Designer Integration in CRM - Note 2232580

Through Note 2232580, we now provide support for Theme Designer under the CRM WebUI Framework. Additionally the Note 2284594 is introduced as support for Interaction Center (IC) roles.

Here we provide a brief description on the usage of the Theme Designer and show you some of the few thematic modifications it can handle.

To fire up the Theme Designer, you can use the transaction "/UI5/THEME_DESIGNER"

The Theme Designer window will open allowing you to choose from one of the beautiful skins available. We provide support for sap_corbu and the "cool blue" sap_bluecrystal as well.

Theming SAP_corbu skin:

Once you have selected and opened the sap_corbu skin, it can be modified via the following steps:

1. Select the test suite as shown in the image below (CRM Web Client application Previews) to open up the Previews:

2. This section shows the available previews to which various attributes can be applied via the Theme Designer. In particular the following previews are available:

    • Calendar                                    

    • Search

    • Overview

    • Overview Tile

    • Guided Activity

    • Home

    • Calendar Monthly View

    • Calendar Weekly view

    • WorkCenter

    • Account Identification IC

Select one or more preview from this list. Alternatively, you can also select or deselect all using the "Select All / None" Checkbox.

Once a view is selected and opened, you can modify it by selecting the appropriate attributes in the Theme editor

At this point, there are two modes supported when editing a theme:

• Quick Mode: Intended to modify the most common and generic attributes or properties supported by the theme.

• Expert Mode: Intended to support extended, and detailed attributes and properties supported by Theme Designer. There are many more attributes supported in Expert Mode than in Quick Mode. You can search for these detailed attributes by using the prefix "sapWebUI" in the search space provided in the Expert Mode.

Some examples of the attributes are provided below:

Expert Mode:

Attribute: @sapWebUIBackgroundColorInputField

Attribute: @sapWebUIBackgroundColorTextArea

Attribute: @sapWebUILabelColor

Attribute: @sapWebUIShellBackgroundColor

Attribute: @sapWebUiBackgroundColor

Attribute: @sapTitleColor

Attribute: @sapWebUIShorcutBg

Attribute: @sapWebUIWorkCenterBg

Attribute: @sapTextColor

Quick Mode:

Attribute: @sapHighLightColor

Attribute: @sapBackgroundColor

Attribute: @sapBaseColor

Attribute: @sapBrandColor

Attribute: @sapShellHeaderColor

Attribute: @sapTextColor

Attribute: @SapLinkColor

Attribute: SapButton_Background

Attribute: SapButton_Hover_Background

List of parameters specific for IC Roles:

sapICActiveSessionTabColor

sapICBroadcastBarBackground

sapICBroadcastBarDateTimeColor

sapICInactiveSessionTabColor

List of parameters that affect the WebUI in general (not role dependent)

sapWebUITabAreaBackgroundColor

sapWebUIAreaFrameHeadL1Title

sapWebUIAreaFrameHeadTitle

sapWebUIBackgroundColor

sapWebUIBackgroundColorInputField

sapWebUIBackgroundColorTextArea

sapWebUIButtonBgColorGradientEnd

sapWebUIButtonBgColorGradientStart

sapWebUIButtonBgColorIEFilterEnd

sapWebUIButtonBgColorIEFilterStart

sapWebUIButtonTextColor

sapWebUICompanyLogo

sapWebUILabelColor

sapWebUIOverViewPageTitle

sapWebUIShellBackgroundColor

sapWebUIShortcutBg

sapWebUITableListHeaderBackground

sapWebUITextAreaBorder

sapWebUITextColor

sapWebUITitleListHeaderBackground

sapWebUIWorkCenterBg

The above list of parameters were added in this integration along with the parameters originally provided in Quick view and Expert view.

Once the parameters have been modified and the theme is saved, new CSS files will be generated and later on will be used when the theme is applied.

The custom theme can be loaded via the Personalize Menu:

TRANSPORTING THEMES

As usual the Theme Designer is only available for ‘test’ or ‘quality’ systems. Custom themes built in those systems can be transported to Productive environments. The transaction "/UI5/THEME_TOOL" can be used to download the relevant zip files to a local machine.

From here, you can transport the theme into the target system by simply opening the Theme Tool (transaction "/UI5/THEME_TOOL") and uploading the custom theme zip file.

To serve as an example, two themes are provided as attachments in the note: Dark bluecrystal and Star Wars for Corbu.

The final result for Corbu looks like this:

And here is the final result for the Blue Crystal:

So, to conclude, whether you decide to move on to the dark side with Dark Corbu for StarWars, or settle for a rather cool emerald looking Blue Crystal, or even design your own look, Theme Designer is now here to help you out! May the force be with you!

http://service.sap.com/sap/support/notes/2232580

http://service.sap.com/sap/support/notes/2284594

6.png (81101 B)
Tags:
Former Member