How to add extra formatting to a column?

Occasional Contributor

I am currently working on a list to track different equipment we have on site and each item requires different configurations of servicing, recalibrating and PAT testing. So I have the list formatted that so when you say an item needs just calibrating and servicing, it'll grey out the date where the next PAT test date needs to go to signify that it isn't required. below is the code that SharePoint generates to do this.

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "box-sizing": "border-box",
    "padding": "0 2px"
  },
  "attributes": {
    "class": {
      "operator": ":",
      "operands": [
        {
          "operator": "<",
          "operands": [
            {
              "operator": "indexOf",
              "operands": [
                "[$Doesthisitemneed_x002e__x002e__x]",
                "Calibrating"
              ]
            },
            0
          ]
        },
        "sp-css-backgroundColor-BgLightGray sp-css-borderColor-LightGrayFont",
        ""
      ]
    }
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "line-height": "16px",
        "height": "14px"
      },
      "attributes": {
        "iconName": {
          "operator": ":",
          "operands": [
            {
              "operator": "<",
              "operands": [
                {
                  "operator": "indexOf",
                  "operands": [
                    "[$Doesthisitemneed_x002e__x002e__x]",
                    "Calibrating"
                  ]
                },
                0
              ]
            },
            "",
            ""
          ]
        },
        "class": {
          "operator": ":",
          "operands": [
            {
              "operator": "<",
              "operands": [
                {
                  "operator": "indexOf",
                  "operands": [
                    "[$Doesthisitemneed_x002e__x002e__x]",
                    "Calibrating"
                  ]
                },
                0
              ]
            },
            "sp-css-color-LightGrayFont",
            ""
          ]
        }
      }
    },
    {
      "elmType": "span",
      "style": {
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "padding": "0 3px"
      },
      "txtContent": "[$Prev_x002e_Calibration.displayValue]",
      "attributes": {
        "class": {
          "operator": ":",
          "operands": [
            {
              "operator": "<",
              "operands": [
                {
                  "operator": "indexOf",
                  "operands": [
                    "[$Doesthisitemneed_x002e__x002e__x]",
                    "Calibrating"
                  ]
                },
                0
              ]
            },
            "sp-field-fontSizeSmall sp-css-color-LightGrayFont",
            "sp-field-fontSizeSmall"
          ]
        }
      }
    }
  ]
}

 

Now what I want to do is to format the dates that are added to show if they are in date, upcoming or overdue. the code below shows how I achieve this:

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "attributes": {
    "class": "=if([$NextCalibration] <= @now, 'sp-field-severity--blocked' , if([$NextCalibration] -2419200000 >= @now , 'sp-field-severity--good' , 'sp-field-severity--warning'))"
  }
}

 

My main questions is: How do I combine these to.

I don't particularly understand the JSON code that SharePoint has generated so is there somewhere i can place my code to do what I need it to do? 

 

Thanks in advance

0 Replies