Skip to Content
Author's profile photo Joey Yang

C4C Theme Integration

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>’);

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Pramodkumar Ramjeet Pal
      Pramodkumar Ramjeet Pal

      Hi Joey,

      Thanks for writing this blog.

      I have a question for you: Is it possible to change the background color of FormPane in custom screen created via SDK? In SDK, for “FormPane”, there is an option in Appearance->BodyStyle in properties. I selected it to “FILL” but I don’t see any option to set any color.

      System defaults the bodystyle to “Transparent”.  Can you please suggest on how to achieve this?

      Thanks,

      Pramodkumar

      Author's profile photo Joey Yang
      Joey Yang
      Blog Post Author

      Hi Pramodkumar,

      Very sorry for late reply, in my understanding you are trying to edit a FormPane in UI Designer, actually this 'FormPane' is a custom control developed by C4C team and basically this is a container rather than a UI control, so there is no open API to set the background color so there is no way to set this property via UI designer, if you want to change the color for it, you might need to contact below people to get help as they are author of the FormPane:

      Pavan Nayak, Benjamin Spieler
      
      

      Thanks,

      Joey

      Author's profile photo Manindra Kumar Tiwari
      Manindra Kumar Tiwari

      Hi Joey,

      I am using multivalued dropdown for one of custom requirement in C4C RUI screen and requirement is as follows-

      1- Multivalued dropdown should support values display by grouping-

      Group1

               Value1

               Value2

               Value3

      Group2

               Value4

               Value5

               Value6

      ......

      2- MultiValue dropdown should support search with filter option "contains" not the "startsWith"

      Please suggest the possible way to achieve the same solution.

      Thanks !!!

      Manindra

       

      Author's profile photo Joey Yang
      Joey Yang
      Blog Post Author

      Hi Manindra,

       

      Sorry for late reply, I'm thinking that you are saying the UI5 control- ComboBox .

       

      If so, currently the standard control in C4C only can support the flat view for drop down list, if you want to implement above requirement, suppose you need to use custom control, will check with colleague and let you know.

       

      Author's profile photo Joey Yang
      Joey Yang
      Blog Post Author

      Hi Manindra,

      Just checked with my colleague, currently there is no way to implement this custom control in C4C, the only way to implement this requirement is edit xml file directly which is not allowed. Sorry for that.

      Thanks ,

      Joey