The note 2232580 introduces the support for Theme designer under CRM WebUI Framework. Additionaly the note 2284594 is introduced as support for IC (Interaction Center) roles.
Following a brief description about the use of Theme editor and how the new feature is handled:
1. Launch the Theme editor using transaction " /UI5/THEME_DESIGNER"
Once the transaction /UI5/THEME_DESIGNER is executed the theme editor will show up the skins available and then you can choose one of them. Actually, the support is enabled for sap_corbu and sap_bluecrystal:
1. Theming a sap_corbu skin. Once the sap_corbu skin is selected and opened:
1.1 The test suite can be selected as shown in the link above (CRM Web Client application Previews)
2. The following previews are available to apply the different attributes provided in the theme designer:
• Calendar
• Search
• Overview
• Overview Tile
• Guided Activity
• Home
• Calendar Monthly View
• Calendar Weekly view
• Workcenter
• Account Identification IC
Once a view is selected and opened, it can be modified by the Theme editor if the proper attribute is selected:
There are two modes supported so far 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. In this case the search for these detailed attributes can be searched in the expert mode with the prefix: 'sapWebUI' but there are more attributes supported in expert Mode.
Expert Mode Samples:
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:
sapWebUIActiveSessionTabColor
sapWebUIBroadcastBarBackground
sapWebUIBroadcastBarDateTimeColor
sapWebUIInactiveSessionTabColor
List of parameters that are affecting generally the WebUI (no role dependent)
sapWebUITabAreaBackgroundColor
sapWebUIAreaFrameHeadL1Title
sapWebUIAreaFrameHeadTitle
sapWebUIBackgroundColor
sapWebUIBackgroundColorInputField
sapWebUIBackgroundColorTextArea
sapWebUIButtonBgColorGradientEnd
sapWebUIButtonBgColorGradientStart
sapWebUIButtonBgColorIEFilterEnd
sapWebUIButtonBgColorIEFilterStart
sapWebUIButtonTextColor
sapWebUICompanyLogo
sapWebUILabelColor
sapWebUIOverViewPageTitle
sapWebUIShellBackgroundColor
sapWebUIShortcutBg
sapWebUITableListHeaderBackground
sapWebUITextAreaBorder
sapWebUITextColor
sapWebUITitleListHeaderBackground
sapWebUIWorkCenterBg
The previous list of parameters were introduced in this integration but other parameters in the Quick view and Expert view are also functional and affecting the UI.
Once the parameters has 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 used by means of the Personalize Menu:
TRANSPORTING THEMES
Usually the theme designer is only available for ‘test’ or ‘quality’ systems and then the custom themes are transported to Productive environments, in order to do that the transaction /UI5/THEME_TOOL is used. Here the files can be down loaded in a .zip file to local machine.
In the target system with transaction /UI5/THEME_TOOL it is possible to upload the custom theme from the zip file.
As an example two themes are delivered as attachments in the note: Dark bluecrystal and StarWars for Corbu.
The final result for Corbu looks like below:
The final result for Blue Crystal:
