C4C Theme Integration

[former_member521519]

Requirement

We have received a requirement that user want to build 2 new theme(sap_belize_dark & sap_belize_light) based on a UI5 standard theme named “sap_belize” so that user can switch theme under the theme builder:

How the standard theme works on the current system

1. There is a table(APUI_THEME_MASTER) stored these information.


2. When user change the theme , the UI5 core method “applyTheme” will be executed and the argument will be the name of the theme (i.e. ‘sap_bluecrystal’).


3. The program will find the ‘library.css’ from relative path, also will load ‘library.css’ from standard library which is under the ‘components’ :

 

4. The program will assign these stylesheet on the UI so the theme change will be applied.

How the custom theme works on the current system

1. There is a customize theme stored in the backend system which is child for ‘sap_bluecrystal’ (this is the only standard theme in the current system related to the RUI).


2. When user select the custom theme on the UI, the system will load stylesheet related(only color information) data from backend system.


3. The system will apply the ‘sap_bluecrystal’ theme and then use the loaded stylesheet to replace some part of the current stylesheet(currently only the color can be replaced since the custom theme will only store the color information).


4. When user publish the custom theme, the color information will be sent to backend system and will be stored.

What we have tried( UI5 Theme builder)

We have tried to create a custom theme by UI5 theme builder and copied them into the ‘components’ , then we can apply it but I’m not sure why the UI looks so funny after apply it.

Also we have a message from Shuai(our UX) that the theme build by UI5 theme builder cannot used for C4C.

 

i.e.

Solutions

Solution 1 to implement

1. Create 2 set of data in backend system for ‘sap_belize_dark’ & ‘sap_belize_light’.


2. Adjust the backend logic to handle the multiple standard theme.


3. We need to create a new folder which is under the same path of the ‘sap_bluecrystal’ for all relative path, also we need another base folder for ‘sap_belize’. These two folder is to cover the difference between ‘sap_bluecrystal’ & ‘sap_belize’, but the same between ‘sap_belize_dark’ & ‘sap_belize_light’.


4. Create 1 set of the stylesheet for ‘sap_belize’, 1 set of the stylesheet for ‘sap_belize_dark’ and 1 set of the stylesheet for ‘sap_belize_light’.


5. Since there is only ‘sap_belize’ standard theme under the ‘components’ but there is no ‘sap_belize_dark’ or ‘sap_belize_light’ under it, so when user change the theme to ‘sap_belize_dark’ or ‘sap_belize_light’ we should apply the ‘sap_belize’ firstly(execute the applyTheme but the argument will be ‘sap_belize’) and then use the specific stylesheet to replace like what we did for customize theme, but we need to figure out where to store the specific stylesheet.

• Q:Why we cannot apply the ‘sap_belize_dark’ or ‘sap_belize_light’ directly?


• A:Since there is no set of stylesheet named ‘sap_belize_dark’ & ‘sap_belize_light’ under the ‘ components‘, but when the applyTheme executed , the program will find stylesheet from the ‘components’, so this will result the very wired screen.


• Q:Why we cannot just added two set of stylesheet for ‘sap_belize_dark‘ & ‘sap_belize_light’?


• A:These standard themes is developed by UI5 dev team , this is why we have listed solution2 below.

Solution 2 to implement (might need UI5 Dev team help)

1. Create 2 set of data in backend system for ‘sap_belize_dark’ & ‘sap_belize_light’.


2. Adjust the backend logic to handle the multiple standard theme.


3. Create 2 new standard theme under the ‘components’ named ‘sap_belize_dark’ & ‘sap_belize_light’. (might need help from UI5 Dev team)


4. Create 2 set of the stylesheet for ‘sap_belize_dark’ & ‘sap_belize_light’.


5. When user change the theme on the UI , we just apply the theme based on what user choose.(execute the applyTheme , the argument will be ‘sap_belize_dark’ or ‘sap_belize_light’).

Solution 3 to implement(current solution)

1. Create 2 set of data in backend system for ‘sap_belize_plus’(for belize dark) & ‘sap_belize’(for belize light).


2. Adjust the backend logic to handle the multiple standard theme.


3. Create 2 set of the stylesheet for ‘sap_belize’ & ‘sap_belize_plus’.


4. When user change the theme on the UI , we just apply the theme based on what user choose.(execute the applyTheme , the argument will be ‘sap_belize’ or ‘sap_belize_plus’).
   
   
   
   • Q:Why this solution don't need create new theme in standard library?
   
   
   • A:Because there are 'sap_belize' & 'sap_belize_plus' themes in the standard library, and the name of our theme which are built in the backend system is the same as the stanadrd , so the program will load theme both from standard library & customize library , while in the solution2 , there is no 'sap_belize_dark'  & 'sap_belize_light' in the standard library, so we need to create them.
   
   
   
   

Theme Layer

Current Layer:

The layer After Applied Solution3:

Backend Table & Function Module

function module: APUI_THEME_BUILDER

Apply the Theme in C4C in code level

method: sap.ui.getCore().applyTheme('<theme name>');