Custom Themes in SAP Business Objects

[andreasja_schneider]

Hello:

Please, has anyone any great tips for using themes in SAP business Objects server platform?
The use seems quite limited in particular it looks like one can only use one (!) customized theme in SAP Business Objects.

Thanks,
Andreas J.A.

[andreasja_schneider · Accepted solution]

Good morning,

a more detailed/specific answer, e.g. which files need to be modified would be helpful.

Thanks,
Andreas J.A.

[ayman_salem]

Hallo Andreas,

I wasn't notified that you're asking again as it wasn't a comment on my answer.

so quick answer: (later i will write a blog with more details)

-- The idea is to use the existing "FioriBI.properties" to control the custom theme name and switch between them by changing the custom theme name and just restarting the application server (tomcat, ...).

.........\SAP BusinessObjects\tomcat\webapps\BOE\WEB-INF\config\custom\FioriBI.properties

# Set theme.enable to "custom" for enabling theming for Fiori BILaunchpad
theme.enable=customB

theme.enable=<name of custom theme>

-- The custom theme directory is in the form <theme name>-css under

... \SAP BusinessObjects\tomcat\webapps\BOE\WEB-INF\eclipse\plugins\webpath.FioriBI\web\com\sap\fioribi\css

example:
customA-css customB-css anyName-css

-- The following changes are made in 5 JS

== "custom" ----->>>  !="default"
custom-css  ----->>>  "+isThemeEnabled+"-css

the 5 js script are:

1. ......\tomcat\webapps\BOE\WEB-INF\eclipse\plugins\webpath.FioriBI\web\com\sap\fioribi\modules\logonpage\LogonpageView.view.js

Before change:
if (isThemeEnabled != null && isThemeEnabled.toLowerCase() == "custom") {
  BILaunchpadApp.includeStyleSheet("com/sap/fioribi/css/custom-css/Theme.css");
  srcPath = "com/sap/fioribi/css/custom-css/Company_logo.png";

After change:
if (isThemeEnabled != null && isThemeEnabled.toLowerCase() != "default") {
  BILaunchpadApp.includeStyleSheet("com/sap/fioribi/css/"+isThemeEnabled+"-css/Theme.css");
  srcPath = "com/sap/fioribi/css/"+isThemeEnabled+"-css/Company_logo.png";

2. ......\tomcat\webapps\BOE\WEB-INF\eclipse\plugins\webpath.FioriBI\web\com\sap\fioribi\modules\homepage\HomepageView.view.js

Before change:
if (isThemeEnabled != null && isThemeEnabled.toLowerCase() == "custom") {
  srcPath = "com/sap/fioribi/css/custom-css/Company_logo.png";

After change:
if (isThemeEnabled != null && isThemeEnabled.toLowerCase() != "default") {
  srcPath = "com/sap/fioribi/css/"+isThemeEnabled+"-css/Company_logo.png";

3. ......\tomcat\webapps\BOE\WEB-INF\eclipse\plugins\webpath.FioriBI\web\com\sap\fioribi\app\BILaunchpadView.view.js

Before change:
if (isThemeEnabled != null && isThemeEnabled.toLowerCase() == "custom") {
  BILaunchpadApp.includeStyleSheet("com/sap/fioribi/css/custom-css/Theme.css");

After change:    
if (isThemeEnabled != null && isThemeEnabled.toLowerCase() != "default") {
  BILaunchpadApp.includeStyleSheet("com/sap/fioribi/css/"+isThemeEnabled+"-css/Theme.css");

4. .....\tomcat\webapps\BOE\WEB-INF\eclipse\plugins\webpath.OpenDocument\web\com\sap\opendoc\modules\logonpage\LogonpageView.view.js

Before change:
if (isThemeEnabled != null && isThemeEnabled.toLowerCase() == "custom") {
  jQuery.sap.includeStyleSheet("../com/sap/opendoc/css/custom-css/Theme.css");
  srcPath = "com/sap/opendoc/css/custom-css/Company_logo.png";

After change:
if (isThemeEnabled != null && isThemeEnabled.toLowerCase() != "default") {
  jQuery.sap.includeStyleSheet("../com/sap/opendoc/css/"+isThemeEnabled+"-css/Theme.css");
  srcPath = "com/sap/opendoc/css/"+isThemeEnabled+"-css/Company_logo.png";

5. .....\tomcat\webapps\BOE\WEB-INF\eclipse\plugins\webpath.FioriBI\web\com\sap\fioribi\modules\UserSettings\SettingsDialog\Appearence\Themes\ThemesView.view.js

Before change:
if (isThemeEnabled != null && isThemeEnabled.toLowerCase() == "custom") {
  IsEnabled = false;

After change:
if (isThemeEnabled != null && isThemeEnabled.toLowerCase() != "default") {
  IsEnabled = false;

Result:

theme.enable=Default or theme.enable=

theme.enable=customA

theme.enable=customB

......

I hope this gives you an idea of the idea, more on that later

[andreasja_schneider]

Sadly, restarting the JAVA Web APP Server /Tomcat is not an option, because:

- It requires admin access to the Web App Server, including a restart of that server (service interruption)

- It would affect all users and all users would have to use the very same Theme.

Use case:
Users individually set their theme and are immediately affected by it.
One user chooses for example High Contrast Theme, another user chooses a Dark theme.

[andreasja_schneider]

Thank you a lot for replying, I will have to digest the info, I am not a real coder, but I have a github account, somewhere ,-)

Have a great weekend.

[ayman_salem]

Unfortunately, you can only use one custom theme.

Workaround:
with a small code change in 4 JS files (in just two lines of code) you can define any number of custom themes and to switch between using the existing configuration file and just restart the application server (tomcat, . .)

The defined custom theme is valid for all users and the user cannot change it in BILaunchpad.