Within the experienced SAP GUI users, it is known to set for different SAP systems different system colors. That enables us to visually differentiate between non-prod and prod environments. A guide on how to achieve that can be found here:
https://blogs.sap.com/2013/07/22/changing-you-sap-gui-colours/.
Sadly it is not possible to configure the same for SAP CPI, the API Portal nor the standard development portal.
As I think that it is very unsatisfying to differentiate by URL (e.g. l100001, l100004) the different tenants. I have developed a workaround:
I am ingesting custom CSS to the page based on the specific URLs of the tenants. As we use mostly Chrome we are using this Plugin
Stylebot. The result is:
SAP CPI
API Portal
Developer Portal
In all of the tenants, the plugin ingests CSS to change the color of the header as well as to insert the type [development/test/production] and system abbreviation. The applied styles are only shown in case the plugin is installed and activated.
How to use this for your own CPI and API-Management tenants?
You can either use the selector and editor by the plugin or import the following code per system:
SAP CPI
{"[BASE URL]":{"_enabled":true,"_rules":{"comment0":{"comment":"/* [SYSTEM TYPE] */"},"div#shell--toolHeader":{"color":"#[COLOR]","background-color":"#[COLOR]"},"span#__title0-inner:after":{"color":"#FFF","content":"\" - [SYSTEM TYPE] [[SYSTEM ABBREVIATION]]\"","font-weight":"bold"}}}}
** Version with company logo can be found in this comment by
r_herrmann:
Click here **
API Portal
{"[BASE URL]":{"_enabled":true,"_rules":{"comment0":{"comment":"/* [SYSTEM TYPE] */"},"div#shell--toolHeader":{"color":"#[COLOR]","background-color":"#[COLOR]"},"span#__title0-inner:after":{"color":"#FFF","content":"\" - [SYSTEM TYPE] [[SYSTEM ABBREVIATION]]\"","font-weight":"bold"}}}}
Developer Portal
{"[BASE URL]":{"_enabled":true,"_rules":{"comment0":{"comment":"/* [SYSTEM TYPE] */"},"div.appHeader":{"background-color":"#[COLOR]","color":"#[COLOR]"},"a#navigationLink, a.haasLoginItems, .headerBackgroundWhiteForHaas>.navbar .logout":{"color":"#ffffff"},"div.navbar-header:first-of-type:after":{"content":"\"[SYSTEM TYPE] [[SYSTEM ABBREVIATION]]\"","color":"#ffffff","font-weight":"bold","position":"fixed","top":"10px","left":"10px"}}}}
To apply these configurations to your tenants you need to:
- Open the options of the Stylebot from your chrome head bar
- Open the import dialog by navigation to the "Backup" section and click on Import backup
- Copy one of the above CSS code snippets into the dialog and edit the overwrite the following values:
- [BASE URL] --> Base URL of your tenant (e.g. lxxxxxx-tmn.hci.eu1.hana.ondemand.com)
- [COLOR] --> Color of that system type (e.g. green: #38f038 | yellow: #f0f038 | red: #f03838)
- [SYSTEM TYPE] --> Type of your system (e.g. development, test, prod)
- [SYSTEM ABBREVIATION] --> Abbreviation of the system, if applicable (e.g. CID, CIC, CIP)
- Redo step 3 for all of you CPI, API Portal and Development Portal tenants.
One general remark on this: As soon as SAP changes the HTML/CSS structure of CPI, API Portal or the Developer Portal, then this CSS code needs to be adjusted.
I hope that this might help you, that you enjoyed reading and appreciate your feedback, thoughts, and comments.