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

Tony Stark 21 Reputation points
2021-02-08T10:48:56.657+00:00

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?

65431-bild.png

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
9,796 questions
0 comments No comments
{count} votes

Accepted answer
  1. Echo Du_MSFT 17,116 Reputation points
    2021-02-09T02:35:57.137+00:00

    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"  
     }  
     ]  
    }  
    

    65569-2.png

    65593-1.png

    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.

    0 comments No comments

3 additional answers

Sort by: Most helpful
  1. Tony Stark 21 Reputation points
    2021-02-09T08:12:47.837+00:00

    @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

    0 comments No comments

  2. Corey H 1 Reputation point
    2021-12-09T18:52:00.933+00:00

    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:
    156318-image.png

    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

    0 comments No comments

  3. SP 1 Reputation point
    2022-08-06T20:57:03.29+00:00

    @Echo Du_MSFT

    Please can you help me ...

    What am I doing wrong here...

    228833-screenshot-2022-08-06-215520.png

    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.

    0 comments No comments