Using JSON Formatting Inside Web Parts

Question

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.

Answer 1

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