Have been attempting to integrate JSON formatting into a SharePoint WebPart List. Using a Kanban styled approach with a table containing several list view web parts.

Need to be able to designate the list and column in the JS file, and perform the formatting for the desired list view.

This is the JS formatting I am attempting to use, just simply to color code a number field based on a Boolean argument.

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", "debugMode": true, "elmType": "div", "attributes": { "class": "=if(@getFieldRef(Days In progress)>10,'sp-field-severity--blocked', '')" }, "children": [ { "elmType": "span", "style": { "display": "inline-block", "padding": "0 4px" } }, { "elmType": "span", "txtContent": "@currentField" } ] }

If anyone has worked with these methods, I would greatly appreciate any direction or advice given.


Give this a try:

  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if([$Days_x0020_In_x0020_progress]>10,'sp-field-severity--blocked', '')"
  "children": [
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
     "elmType": "span",
     "txtContent": "@currentField"

The key difference is that @getFieldRef is not part of the syntax. Instead you'll want to put the internal name of a field between [$InternalName]. See more details here: https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#fieldname

Also, keep in mind that Calculated Columns are not available to get their values within column formatting. So if Days in progress is a calculated column (it sounds like one), then you'll need to do the date calculation yourself inside the format. Here's an example of that: https://github.com/SharePoint/sp-dev-list-formatting/issues/99

  • 1
    Hi Chris, is it possible to use custom css class instead of the pre-defined sp-field-severity--blocked – Kannan Jan 15 at 2:20
  • Unfortunately, not natively. However, you can use a technique demonstrated by David Warner to use an Application Customizer to make your styles available then take advantage of them in List Formatting. Demo here – theChrisKent Jan 15 at 20:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.