Column formatting not working correctly (sp-field-severity--severeWarning)

Question

I have found that sp-field-severity--severeWarning renders to the same color as sp-field-severity--blocked and not to the correct one according to the documentation (see below screenshot)

I have tested with the simplest of JSON in different browsers and two tenants and sp-field-severity--severeWarning simply doesn't work but all the others renders correct color.

What could be the issue?

Answer 1

Hello @Tony Stark ,

The color provided by the system for the "sp-field-security--serverWarning" class is very similar to the color of the "sp-field-security-blocked" class. When the resolution is not high, the two will make people think that they are the same color.

You could use the following color formatting:

Please note the case of @currentField == '**field value**'

{  
 "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",  
 "elmType": "div",  
 "style": {  
 "background-color": "=if(@currentField == 'Done', '#A9F5BC', if(@currentField == 'In progress', '#FFFFFF', if(@currentField == 'In Review', '#F5DA81', if(@currentField == 'Has Issues', '#F79F81', '#FA5858'))))"  
 },  
 "children": [  
 {  
 "elmType": "span",  
 "style": {  
 "display": "inline-block",  
 "padding": "0 4px"  
 },  
 "attributes": {  
 "iconName": "=if(@currentField == 'Done', 'CheckMark', if(@currentField == 'In progress', 'Forward', if(@currentField == 'In Review', 'Error', if(@currentField == 'Has Issues', 'Warning', 'ErrorBadge'))))"  
 }  
 },  
 {  
 "elmType": "span",  
 "txtContent": "@currentField"  
 }  
 ]  
}  

Thanks,
Echo Du

================

If an Answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

@Echo Du_MSFT

Hi, I will accept your answer....but I will not accept that I have low resolution screen :-D

Anyways, using hex color codes is more flexible, so greatly appreciated!

/TS

Answer 3

I just came across this issue today. It doesn't seem that they just look like the same colour, they seem to actually be the same colour.

Left, SharePoint List, Right, Microsoft Documentation:

Same display and you can clearly see the colour differences. Seems like a bug with SharePoint, or incorrect colours on the Microsoft documentation. I doubt it was an issue with the colour-depth of @Tony Stark screen.

Or maybe I am just finding out now that I am Red/Slight Orange Red colourblind...

@Echo Du_MSFT Thank you for the workaround.

Edit: I used instant eyedropper to compare the two colours, both show as #FDE7E9.

severeWarning in the Microsoft Documentation shows as #FBD9CC and blocked shows as #FCAFD3

Answer 4

@Echo Du_MSFT

Please can you help me ...

What am I doing wrong here...

My Past = works fine

My Today shows = Yesterday

My Tomorrow show = Today

My 2+ Days.... shows = One day ahead!

Please see the screenshot attached..

Code -

"txtContent": "='(' +
if(floor(Number(Date([$DueDate]) - Date(@now ))/86400000)==0,'Today',

if(floor(Number(Date([$DueDate]) - Date(@now ))/86400000)==1,'Tomorrow',

if(floor(Number(Date([$DueDate]) - Date(@now ))/86400000)==-1,'Yesterday',

if(floor(Number(Date([$DueDate]) - Date(@now ))/86400000)>=2,floor(Number(Date([$DueDate]) - Date(@now ))/86400000) + ' days',

if(floor(Number(Date([$DueDate]) - Date(@now ))/86400000)<=2,floor(Number(Date(@now )-Date([$DueDate]))/86400000) + ' days ago',''))))) + ')'",

Can you please help me fix this code?

I would be really grateful to you all.