Changing the legend color in SAP Fiori My Leave Request Calendar

[gill367]

Please follow the below steps to change the calendar color legends in SAP Fiori application “My Leave Request”

I have used SAP Provided UI Theme designer for the same.

1. Run your application in the browser (I have used chrome for this) to find out the CSS classes used to provide the colors to the legend set.
2. Suppose we want to change the color of public holiday and non-workday color legends to some other desired colors. We need to find out the classes for the same using the developer tools in the browser.

     

         Press F12 in chrome to open the developer tool

3.  Click on the magnifying glass as shown in the image above and then navigate in the web page to the element which you want to inspect. (IN this case any date which is having color legend for public holiday )

   4.  In Parallel, you will get the corresponding source code in the html code of the page in developer tool as shown below.

The highlighted css element which provides the background color is shown in the right hand side.

Copy this full class name parameter. It will be used in theme designer.

.sapMeCalendarApproval > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarType06

Similarly find the corresponding css element for the reference legend color below the calendar. For example, using public holiday as reference, following class parameter is found.

CSS parameter for same is

.sapMeCalendarLegendApproval .sapUIMeLegendColorForType06

5. Now we need to change the background color property of these parameters using the theme designer. Open the theme designer and select the leave request application after selecting blue crystal theme as the base theme or the custom theme if you are already using the custom theme.

6.  Select the last option to make the change in the theme (CSS option as highlighted above). In this option write the code for changing the background color for the above found CSS classes as shown below

7. Click on apply and you will see the colors changed for the respective color legend.

8.  After this save and build the theme from menu as shown below

9.  Then go to the tcode /UI5/THEME_TOOL in the server. Invalidate the cache first.

10. Click on info for your theme and find out the sap-theme url for your Fiori application to use.

11. Use it as the url parameter till /~client-005/.

12. So end result will look like this. (I have changed the color of non-workday also in a same manner)

Thanks and Regards,

Sarbjeet Singh