SOLVED

JSON conditional formatting for mileages

Copper Contributor

Hello!

 

I am trying to code some conditional formatting for a mileage field in sharepoint.

I would like the field:

- to be green with a tick if the mileage in > 30000

- to be white with an arrow if the mileage is less than 3000 but greater than 1000

- to be yellow with an warning symbol if the mileage is less than 1000

- to be red with a warning symbol if the mileage is less than 100 and into negative numbers

 

I've been using the code below but the negative numbers are still coming up as white with an arrow, please can someone help??

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField > '3000', 'sp-field-severity--good', if(@currentField < '3000', 'sp-field-severity--low', if(@currentField < '1000', 'sp-field-severity--warning', if(@currentField < '100', 'sp-field-severity--severeWarning', 'sp-field-severity--blocked')))) + ' ms-fontColor-neutralSecondary'"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField > '3000', 'CheckMark', if(@currentField < '3000', 'Forward', if(@currentField < '1000', 'Error', if(@currentField < '100', 'Warning', 'ErrorBadge'))))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

 

2 Replies
best response confirmed by StuartReeves (Copper Contributor)
Solution

@StuartReeves have a go with the following JSON:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField >= 3000, 'sp-field-severity--good', if(@currentField < 3000 && @currentField >= 1000, 'sp-field-severity--low',if(@currentField < 1000 && @currentField >= 100, 'sp-field-severity--warning','sp-field-severity--blocked')))"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField >= 3000, 'CheckMark', if(@currentField < 3000 && @currentField >= 1000, 'Forward',if(@currentField < 1000 && @currentField >= 100, 'Error','ErrorBadge')))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

 

which results in:

 

mileageColorandIcon.png

 

Rob
Los Gallardos
Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)

Rob,

You are a god send! That worked perfectly! Thank you so much!

Stuart
1 best response

Accepted Solutions
best response confirmed by StuartReeves (Copper Contributor)
Solution

@StuartReeves have a go with the following JSON:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField >= 3000, 'sp-field-severity--good', if(@currentField < 3000 && @currentField >= 1000, 'sp-field-severity--low',if(@currentField < 1000 && @currentField >= 100, 'sp-field-severity--warning','sp-field-severity--blocked')))"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField >= 3000, 'CheckMark', if(@currentField < 3000 && @currentField >= 1000, 'Forward',if(@currentField < 1000 && @currentField >= 100, 'Error','ErrorBadge')))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

 

which results in:

 

mileageColorandIcon.png

 

Rob
Los Gallardos
Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)

View solution in original post