Skip to Content
Author's profile photo Sarbjeet Singh

Changing the legend color in SAP Fiori My Leave Request Calendar

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.

      /wp-content/uploads/2015/10/1_814945.png

         Press F12 in chrome to open the developer tool

/wp-content/uploads/2015/10/2_815024.png

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 )

/wp-content/uploads/2015/10/3_815025.png

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

4.PNG

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.

5.PNG

6.PNG

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.


7.PNG


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

8.PNG

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

9.PNG

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

10.PNG

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

11.PNG

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

12.PNG

13.PNG

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)

14.PNG

Thanks and Regards,

Sarbjeet Singh

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      This worked a treat!  Thanks very much for sharing 🙂

      Author's profile photo Patrick Gotauco
      Patrick Gotauco

      Are changes to this app considered "Enhancements" or "Modification" ? 🙂

      Author's profile photo Satyanarayana Moorthy Kesemsetty Venkata
      Satyanarayana Moorthy Kesemsetty Venkata

      This is the theme.

      This is not classed as App change.

      Author's profile photo Oscar Maina
      Oscar Maina

      Hi Sarbjeet Singh,

       

      How can I access theme designer?

      Thanks