cancel
Showing results for 
Search instead for 
Did you mean: 

SAP Fiori Theme Designer - App-specific Theming

Former Member
0 Kudos

Hi all,

I have a question about the creating of SAP Fiori themes.

Is it possible to create a specific theme for each Fiori application?

We implemented among others the SAP Fiori App "My Leave Requests" and "My Team Calendar".

Currently we want to change our corporate SAP Fiori theme with the CSS editor, because the current colors don`t match with the SAP Fiori App "My Leave Requests".

So far everything worked. But the problem is, that of course the new theme apply to all other SAP Fiori apps and the new colors don`t match everywhere, for example in the SAP Fiori App "My Team Calendar".

Is there any chance to create a application-specific theme?

Thanks a lot!

Best regards

Maximilian Haala

Accepted Solutions (1)

Accepted Solutions (1)

LeonardoGomez
Advisor
Advisor
0 Kudos

Hi Maximilian,

Some apps have a manifest.json file where you can change themes.

For others you can change the component.js file

BUT, the theme should be the same for all apps, if you don't explicitly change it inside the app. There is a Fiori design principle called "Coherence" in which all apps should look the same. So it's better to select one theme as the default and use it for all apps. It can be the case where you want to use more than one theme depending on the user, in that case you can use the "sap-theme=<theme ID>@<theme-root>" paramter in the launchpad url.

Check out transaction /n/UI5/THEME_TOOL to get theme ids and theme roots.

Cheers,

Leonardo.

Answers (2)

Answers (2)

Former Member
0 Kudos

Thanks for the very helpful answers!

@Jocelyn: We already used the SAP Fiori Theme Designer for creating our corporate Fiori theme. I meant the CSS editor inside the Theme Designer

But I have an additional problem....

I published the new changed SAP Fiori Theme with the Theme Designer and set it as the standard theme with the TA /UI2/NWBC_CFG_CUST.

Then I cleared the Gateway cache (TA  /iwfnd/cache_cleanup), the UI cache (TA /UI2/DELETE_CACHE) and the browser cache. But somehow the changes of the theming don`t appear in the SAP Fiori App.

Is there anything addintional I have to consider? Is there any trick?

Would be very helpful! Thanks.

Best regards

Maximilian

LeonardoGomez
Advisor
Advisor
0 Kudos

Hi Maximilian,

If you changed a theme and it's not being reflected in the app go to transaction /n/UI5/THEME_TOOL and click on "Invalidate cache".

I would also try with transaction /UI2/INVALIDATE_GLOBAL_CACHES.

Regards,

Leonardo.

Jocelyn_Dart
Product and Topic Expert
Product and Topic Expert
0 Kudos

Hi Maximilian

Is there some reason why you haven't used the standard tool UI Theme Designer for your corporate theming?

The UI Theme Designer is the correct and standard provided tool for applying corporate theming to ensure coherence across all apps - both custom apps and standard apps - available for all unified rendering apps - so it covers you for Fiori and Web Dynpro ABAP and other scenarios as well.

I agree with Leonardo - app specific theming is dangerous as it breaks the principle of coherence.  Lack of coherence degrades user productivity.

By the way, you should always permit users to choose High Contrast Black theme in addition to your corporate theming. This is also for productivity reasons and to ensure you are providing a UX that works for as many people as possible - e.g. to cope with issues such as colour blindness (8% of males) and low vision (e.g. ageing workforce, shift workers, late night work etc.).

Rgds,

Jocelyn