Last Update: Sep 19, 2022

Platform: Web

Designer: Fischer, Anton

Image
SF Theme Manager.png

Intro

When we talk about Fiori Horizon adoption in the SuccessFactors BizX suite, it's not as simple as loading the 'Master' theme provided by SAP Design and be done with it. At SuccessFactors, we work on a complex tech stack with UIs from several generations of product development. With this comes the need to support a range of frontend technologies such as JUIC, UI5 and React (web components). An approach could be to simply re-implement older UIs using the current state of the art, but this is not (yet?) regarded an economical alternative.

When we roll out a new visual theme to our customers, we need to make sure that all these UIs are presented in a consistent manner, at the same time as being as close as possible to the provided SAP Fiori Horizon theme. Currently, this can only be achieved through the use of our SF-specific Theme Manger.

Structure: 2 layers of theming

To understand the theming in SF UIs, you need to understand that we currently apply two layers of theming:

The BizX Theme Manager makes sure that there is a base layer of consistency across components in all our UI technologies that are in use today. In order to make sure that our customers can theme their instances and, e.g., use their brand color on SF UIs, we expose theming parameters through the Theme Manager. These parameters are mapped to UI elements. Any change in these parameters will cause a change in visual appearance in all UI elements that use this parameter.

Image
SF Theme Manager – Create Theme.png

However, the mapping between the underlying SAP Fiori Horizon theme and the SF BizX Theme Manager is imperfect. The underlying theme has more parameters than the SF BizX Theme Manager can expose. The result of that can be some differences – a delta between the SAP Fiori Horizon theme and the way a UI5 or React (with web components) UI shows up inside a SF instance. The web experience team is aware of this fact.

In order to bring visibility to these problems, we decided to log the issues we encounter in this table that Piao, Junjie provided. With the collected issues, we will decide whether it makes sense to raise Jira tickets to try and fix them in theming.

Testing

Before you can test the Horizon Theming in an instance, make sure it is turned on using the Theme Manager. You'll need administrator rights to do so. More information can be found on this page: Fiori Next Adoption – End User Testing.

We used to do testing using URL Parameters which would turn on the Horizon theming in any instance. This was done for early preview purposes and was replaced by the approach mentioned above which is also the way it would be done in a customer instance.

Application-specific examples (usage in SF modules)

Image
Time Sheet – Theming Issues.png

Outlool

It is planned to introduce UI5 Theme Designer support at SuccessFactors WEF-5766 - [TG10] IES - Introduce UI5 Theme Designer Support (Phase I) OPEN and to sunset the SF-specific Theme Manager in the future. UI5 Theme Designer is the standard SAP technology for theming of applications. It will allow more options for customization (more parameters) and will allow us to get rid of the second layer of SF-theming on top of the SAP Horizon theme.

Resources