- SAP Managed Tags:
In this blog, I will show you how to immediately improve your legacy SAP CRM UX with a few CSS tricks and make it look more alike with the latest Fiori themes, such as SAP Belize. This is ideal for customers who want to harmonize their applications before upgrading their SAP CRM or transitioning to S/4HANA.
If you are already on EhP4, congratulations! Make sure to read SAP Note 2628638 and switch to the actual SAP Belize theme, because it comes not only with an improved design but also new capabilities (notably the integration with the Fiori Launchpad).
For all others, here is an example of what you can do by changing only a few things in your system. Note that I am showing a SAP Solution Manager system but this whole blog also applies to any SAP CRM application:
For reference here is a screenshot from an actual SAP S/4HANA system with the Belize Theme. You can see two main differences: 1) the top header is replaced with the Launchpad shell for easy navigation between screens; 2) the L-Shape menu on the left, which is difficult to reproduce without custom development because it is a "structural" change. You can find the SAP CRM Belize Visual Theme guidelines here.
You have several options in order to make design changes to SAP themes:
For this blog I will only cover the Business Role selection page because the process is straightforward. Below is a before/after comparison of the two screens (original Blue Crystal vs. modified Blue Crystal):
If you are lazy and/or just want to see the result in your system (probably lazy though!), you can find my own version of the Business Role Selection CSS here: https://github.com/sabatale/sapcrm_bluecrystal_fiori_theme_css and skip to Step 2.
Step 1 - Browser Developer Tools are your friend. I'm not kidding, those tools can be used for anything: performance tracing, debugging, design adjustments, etc. If you are not familiar with Developer Tools, simply open your browser and press F12 (the dark section from the screenshot below).
Then use CTRL+SHIFT+C and select any element on the screen: you will now see which piece of code the element corresponds to, as well as different properties such as its styles. The "styles" represent the pieces of code that are used to stylize an element (e.g. button).
You can change the styles properties on-the-fly directly from your browser! Of course these changes will not be saved on the server but it gives you a good idea on where changes are needed. For example, let me change the document title color to "bordeaux" red by clicking the color attribute on the right side, under ".th-l-title". As soon as I change the color value, the title turns red:
The simplest way to proceed is to identify which pages are to be changed. Then make and list your changes in a local file. Once you are happy with the result, save this file as a CSS file (format = .css). If you are keen on performance, I recommend you first paste your result into an optimizer such as https://css.github.io/csso/csso.html (for beautifying and optimizing).
Step 2 - First you have to understand that most CSS proeprties are included in a file in the following location: /BC/BSP/SAP/thtmlb_styles/styles.css. This is your starting point for any design changes. There are exceptions for Internet Explorer 11 but you will have to troubleshoot this particular browser in a second time anyway.
What we do next has no impact on the original theme, we only tell the CRM to look at our custom file first: if an element has been modified, it will apply the change; otherwise it will continue with the default styles.
Logon to the target CRM system and navigate to transaction SE80. Select type "BSP Application" and enter "thtmlb_styles". This BSP handles the different styles and themes. Now navigate to MIMEs/sap_skins/blue_crystal/ and upload your .CSS file (e.g. loadingpage.css).
Step 3 - Navigate to transaction SPRO and find the step "Define Path for CSS Files".
There, add a new entry as follow: Skin = BLUE CRYSTAL; Browser = Non Browser-specific; File URL = {name of the file you uploaded in Step 2}. Save your changes in a transport.
Step 4 - That's it, you are done. Easy, eh? You can now start working on the other pages. Again the styles.css file covers pretty much everything so you really have only one file to work with.
You may have noticed I've been using Belize as a reference. However feel free to play around with Quartz design guidelines instead and it will give you something like this!
If you are already on EhP4, congratulations! Make sure to read SAP Note 2628638 and switch to the actual SAP Belize theme, because it comes not only with an improved design but also new capabilities (notably the integration with the Fiori Launchpad).
For all others, here is an example of what you can do by changing only a few things in your system. Note that I am showing a SAP Solution Manager system but this whole blog also applies to any SAP CRM application:
For reference here is a screenshot from an actual SAP S/4HANA system with the Belize Theme. You can see two main differences: 1) the top header is replaced with the Launchpad shell for easy navigation between screens; 2) the L-Shape menu on the left, which is difficult to reproduce without custom development because it is a "structural" change. You can find the SAP CRM Belize Visual Theme guidelines here.
You have several options in order to make design changes to SAP themes:
- Use SAP Theme Designer: I gave it a try but was not able to get a satisfying result for CRM apps, although it is working pretty well for other technologies - note that you can import the CSS code I give you later in this blog directly in Theme Designer if needed;
- Import the official SAP Belize theme from CRM EhP4 and work your way from there: I also tried that, but there are too many structural changes that were made in order to accommodate specific Fiori features and I ended up giving up;
- Create a custom CSS file: This is the easiest way, even if you are not familiar with code or CSS. It takes a bit of patience but all you really have to do in the end is inspecting the different pages with any browser Developer tool and keep digging.
For this blog I will only cover the Business Role selection page because the process is straightforward. Below is a before/after comparison of the two screens (original Blue Crystal vs. modified Blue Crystal):
If you are lazy and/or just want to see the result in your system (probably lazy though!), you can find my own version of the Business Role Selection CSS here: https://github.com/sabatale/sapcrm_bluecrystal_fiori_theme_css and skip to Step 2.
Step 1 - Browser Developer Tools are your friend. I'm not kidding, those tools can be used for anything: performance tracing, debugging, design adjustments, etc. If you are not familiar with Developer Tools, simply open your browser and press F12 (the dark section from the screenshot below).
Then use CTRL+SHIFT+C and select any element on the screen: you will now see which piece of code the element corresponds to, as well as different properties such as its styles. The "styles" represent the pieces of code that are used to stylize an element (e.g. button).
You can change the styles properties on-the-fly directly from your browser! Of course these changes will not be saved on the server but it gives you a good idea on where changes are needed. For example, let me change the document title color to "bordeaux" red by clicking the color attribute on the right side, under ".th-l-title". As soon as I change the color value, the title turns red:
The simplest way to proceed is to identify which pages are to be changed. Then make and list your changes in a local file. Once you are happy with the result, save this file as a CSS file (format = .css). If you are keen on performance, I recommend you first paste your result into an optimizer such as https://css.github.io/csso/csso.html (for beautifying and optimizing).
Step 2 - First you have to understand that most CSS proeprties are included in a file in the following location: /BC/BSP/SAP/thtmlb_styles/styles.css. This is your starting point for any design changes. There are exceptions for Internet Explorer 11 but you will have to troubleshoot this particular browser in a second time anyway.
What we do next has no impact on the original theme, we only tell the CRM to look at our custom file first: if an element has been modified, it will apply the change; otherwise it will continue with the default styles.
Logon to the target CRM system and navigate to transaction SE80. Select type "BSP Application" and enter "thtmlb_styles". This BSP handles the different styles and themes. Now navigate to MIMEs/sap_skins/blue_crystal/ and upload your .CSS file (e.g. loadingpage.css).
Step 3 - Navigate to transaction SPRO and find the step "Define Path for CSS Files".
There, add a new entry as follow: Skin = BLUE CRYSTAL; Browser = Non Browser-specific; File URL = {name of the file you uploaded in Step 2}. Save your changes in a transport.
Step 4 - That's it, you are done. Easy, eh? You can now start working on the other pages. Again the styles.css file covers pretty much everything so you really have only one file to work with.
You may have noticed I've been using Belize as a reference. However feel free to play around with Quartz design guidelines instead and it will give you something like this!
3 Comments
