UI Branding and Personalization of Fiori apps

[hemant1]

What is CSS?

Information such as text, links and images, which are displayed in web pages are written in Hypertext Markup Language (HTML). Web browser understands HTML and renders contents of the web page. For any HTML based applications like SAP UI5/Fiori, visual appearance is controlled by Cascading Style Sheet (CSS). CSS is a styling sheet used to control how elements are displayed in HTML pages. Thus, presentation layer of any web and mobile application is described in CSS.

What is a CSS preprocessor?

As CSS is a style sheet and not a programming language, it lacks flexibility, reusability, modularity, scalability, dynamicity and productivity that comes with a programming language. To overcome this, CSS preprocessor like LESS, Sass etc. are used. A CSS preprocessor allows you to write programmable CSS code in any language like LESS or Sass and then convert them into a CSS style sheet which is understood by all browsers. Using a CSS preprocessor is extremely useful when dealing with huge CSS code.

What is CSS theming?

CSS theming is a process of creating a CSS theme Style Sheet. This CSS Style Sheet define fonts, colors, background, sizes, etc. of various HTML elements used throughout the application. As a result of theming, you do not have to re-style HTML element when you create it.

What is UI Branding?

Same web application can be used by different business unit, for example: Richemont is a luxury goods holding company which has several subsidiaries such as Cartier, MontBlanc, etc. Same retail portal application could be used by different brands such as Cartier and MontBlanc. But both these brands are different in terms of their brand logo, brand fonts, brand colors, etc. Thus, Richemont would need to personalize their retail portal application for different brands. When Cartier opens the retail portal application, colors, fonts, logo used in the application should be specific to that brand and same goes with MontBlanc. This approach of rendering the same application with different logo, colors, background, fonts, etc. for different brands is called as UI branding.

What is UI personalization?

An application can have different users and different users can have different preferences when it comes to look and feel of the application. Some users would prefer light themed UI, some would go for darker themed UI and some might go a blend of dark and light theme. This approach of rendering same application with different colors, backgrounds, fonts, etc. for different users is called as UI personalization.

What is the standard way of implementing branding and UI personalization?

The standard way of implementing branding and UI personalization is by using CSS theming. In this approach, you create a different CSS theme based Style Sheets and based on different brands or users switch these CSS Style Sheet files at run time (when the application is running).

What are disadvantages of using CSS theming for UI branding and UI personalization?

1. If an application is used by 10 different brands, then 10 different CSS theme files need to be created. Similarly, if an application supports numerous themes for UI personalization, then an equal number of CSS theme files need to be created.
2. This results in a lot of redundant coding and no code reusability.
3. Even for a minor style update, all CSS theme files needs to be changed.
4. This also requires testing application with all CSS theme for every minor style updates.
5. Switching themes on run time requires application to make unnecessary HTTP request.
6. If the browser caches more than one CSS Style Sheet then it might result in CSS style conflict and undesirable style overriding.

What is a better approach?

A better approach will be to use CSS branding instead of CSS theming.

CSS branding is a process of handling the requirement of UI branding and/or UI personalization using a single CSS Style Sheet generated by any CSS preprocessor.

In this approach, we identify the part of the CSS style which will vary across different brands or users and put it in a functional module, the rest of the Style Sheet remains untouched. This module is then executed under various brand/user specific CSS wrapper class with different style parameters.

Thus, switching themes can be easily achieved just by adding the brand/user specific CSS wrapper class to the HTML root node.

What are advantages of CSS Branding over CSS Theming?

1. Irrespective of the number of brands and/or users, only one CSS Style Sheet is created.
2. There is no redundant coding and all brand/user related styles are written in a functional module and are reused.
3. Any style updates require changes in only one place and it will be reflected for all brands/users.
4. As a result, an application need not be tested for each and every brand/user. Testing for any single brand/user is sufficient.
5. Switching themes on run time does not require the application to make any additional HTTP request.
6. CSS branding will never result in CSS style conflicts or undesirable style overriding.

How CSS branding is implemented?

Let’s say we need two different themes, one will be a dark theme and another will be a light theme.

These themes can be used for two different brands or two different users. Refer fig. 1, 2, 3, 4, 5 and 6.

Fig 1: Light theme Home page

Fig 2: Dark theme Home page

Fig 3: Light theme Detail List page

Fig 4: Dark theme Detail List page

Fig 5: Light theme Detail Grid page

Fig 6: Dark theme Detail Grid page

Below are the steps to implement CSS branding

1. Create a global LESS file and name it as style.less. This file will be used to generate style.css by any CSS preprocessor compiler. Refer Fig  7
2. Styles which will be common across all brands/users will be written in style.less. Refer Fig  7
3. All the code written in style.less should be nested inside a main class. Let’s name it as “.default_theme”. This will prevent code conflict and style overriding in environment such as SAP Fiori. Refer Fig  7
4. Create a less file and name it as brandingTemplate.less. Create a functional module named “.getBrandSpecificStyle()” in this less file. Refer Fig  8
5. Import brandingTemplate.less in style.less. Refer Fig  7
6. Styles which vary for various brands and users should be written in brandingTemplate.less. Note: do not hardcode any color, font, background, size etc. in brandingTemplate.less. Use variables here. For example: use “background: @PageBg”, rather than “background: Grey”. Refer Fig  8
7. Create two more less files and name them as darkTheme.less and lightTheme.less. Refer Fig  7
8. All variables used in brandingTemplate.less should be specified with values in these less files. For example: darkTheme.less will have “@PageBg : Black” and lightTheme.less will have “@PageBg : Grey”. Refer Fig  9 and Refer Fig  10
9. Import lightTheme.less and call .getBrandSpecificStyle() inside the class “.light_theme” and similarly, import darkTheme.less and call .getBrandSpecificStyle() inside the class “.dark_theme”. Note 1: Inside the class “.light_theme” as we are importing lightTheme.less before calling function .getBrandSpecificStyle(), the variable “@PageBg” will have value as Grey which is specified in lightTheme.less whereas that variable will have the value Black inside the class “.dark_theme”. Note 2: This is how it will look in the generated CSS file, default_theme.dark_theme {background: Black} and default_theme.light_theme {background: Grey}
10. Add the class “default_theme” to the HTML root element. In addition to this, toggle the class “light_theme” and “dark_theme” in the same HTML root element for changing the theme to light and dark theme respectively. Refer Fig  12 and Refer Fig  13

Fig 7:

Fig 8:

Fig 9:

Fig 10:

Fig 11:

Fig 12:

Fig 13: