Employee Center Badges Color in My Request widget

[Javier Tirado1]

Are you struggling with the color of the badges in Employee Center? Colors don't seem to match the state of the records?

I bring you the solution!

It seems it's a temporary issue as the widget is quite new, but SN Devs didn't seem to have had in count the states of Requests (Closed Complete / Incomplete / Skipped), thus rendering the badge of those state as blue and confusing My Requests users.

You can update the color scheme of your badges by modifying the Script Include RequestLabelColorConstants [sn_ex_sp.RequestLabelColorConstants] to include other states and customize the colors (although I recommend to modify colors from the theme record of your portal).

KEEP IN MIND! The state label must only have the first character in upper-case, and only the first one. If you write 'Closed Complete' it won't work, as the scripts fetch the reference flattening the string and then UpperCasing the first character.

[Javier Tirado1 · Accepted solution]

Quick addition:

If colors in the Script Include reference CSS tags from the 'EC Request List Item' widget. These tags reference at the same time the theme variables, so it's definitely better to just update theme variables, don't modify the label-x-color on the script.

[Chris D]

Edit: sorry, I'm dumb and figured it out I think - you're referring to the !default (which I show in my screenshot), which says to use the hardcoded value only if that variable wasn't already defined (i.e. by the theme) - I hadn't realized what that meant 🙂

What version are you on? I'm on Zurich patch 10 and there's no reference to theme variables (which would indeed be proper ootb design).

Just to fully explain what I'm seeing, the colors in the the RequestLabelColorConstants script include (which, if it helps anybody for context, are called from RequestUtilSNC.getLabelColorBackground()) simply maps State value to a color variable/class, i.e. "label-warning-color"...

And the "EC Request List Item", as well as "EC Request Card", widgets have these "colors" as local CSS classes, which are referencing a CSS variable - within the same stylesheet - that has the actual color hardcoded (again, in the widget).