0

I'd like to adapt the JSON code for a Project Gantt Chart formatting a list I got from github (credit to Geert de Kooter).

I'm unable to replace the default background colours that are used to colour the task bars (currently blue,red, green and grey). Ganesh Sanap sent a link to colours which can be used with Sharepoint Online, I'd like to use these types of background to format my list.

Specifically I'd like to use the .sp-css-backgroundColor-* class of colours; for instance .sp-css-backgroundColor-BgMintGreen for a completed task. (Other colours like .ms-bgColor-blue work fine).

Is it possible the .sp-css-backgroundColor- type of colours are not recognised by JSON?

When I have tried to use one of these colours it has not been recognised, instead the coloured background appears transparent instead.

Below is my code, I've already changed it a bit from Geert's original code. While being edited in the code console in Teams/Sharepoint Online it shows as line 162, so it's towards the end; if you do a ctrl+F search on "ms-bgColor-sharedYellowGreen10" and you'll find the relevant section.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "height": "=if(@rowIndex == 0, '7.3em', '4em')",
      "display": "block",
      "width": "100%"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-gray20"
        },
        "style": {
          "width": "100%",
          "display": "=if(@rowIndex == 0, 'flex', 'none')",
          "height": "3em",
          "padding": ".2em",
          "font-weight": "bold"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "Task",
            "style": {
              "width": "220px",
              "text-align": "left",
              "padding-left": "0.4em",
              "box-sizing": "border-box"
            },
            "attributes": {
              "class": "ms-fontSize-16"
            }
          },
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1",
              "height": "100%",
              "position": "relative"
            },
            "attributes": {
              "class": "ms-fontSize-14"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "=toLocaleDateString([$ProjectStart])",
                "style": {
                  "text-align": "left"
                }
              },
              {
                "elmType": "span",
                "txtContent": "=toLocaleDateString([$ProjectDue])",
                "style": {
                  "position": "absolute",
                  "right": "0"
                }
              },
              {
                "elmType": "span",
                "txtContent": "=toLocaleDateString( @now)",
                "style": {
                  "position": "relative",
                  "width": "100px",
                  "z-index": "100",
                  "display": "=if([$ProjectDue] < @now , 'none', 'block')",
                  "left": "=floor( (Number(@now)-Number([$ProjectStart])) / (Number([$ProjectDue])-Number([$ProjectStart])) * 100 ) + '%'"
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "width": "100%",
          "display": "flex",
          "padding": "0.2em"
        },
        "children": [
          {
            "elmType": "span",
            "style": {
              "width": "21px",
              "padding-top": "0.55em"
            },
            "attributes": {
              "iconName": "=if([$Progress] >= 1, 'completed', if([$TaskDue] > [$ProjectDue], 'WarningSolid', if([$TaskStart] > @now, 'clock', if([$TaskDue] < @now, 'error', 'locationcircle'))))",
              "title": "=if([$Progress] >= 1, 'Complete', if([$TaskDue] > [$ProjectDue], 'Due date is past project due date', if([$TaskStart] > @now, 'Upcoming task', if([$TaskDue] < @now, 'Overdue', 'In progress'))))",
              "class": "='ms-fontSize-16 ms-fontColor-' + if([$Progress] >= 1, 'sharedGreen20', if([$TaskDue] > [$ProjectDue], 'sharedRed20', if([$TaskStart] > @now, 'gray100', if([$TaskDue]< @now, 'sharedRed20', 'sharedCyanBlue20'))))"
            }
          },
          {
            "elmType": "button",
            "txtContent": "[$Title]",
            "customRowAction": {
              "action": "editProps"
            },
            "style": {
              "width": "199px",
              "max-height": "2em",
              "padding": "0",
              "border": "none",
              "background-color": "transparent",
              "cursor": "pointer",
              "text-decoration": "none",
              "text-align": "left",
              "outline": "none",
              "display": "inline-block",
              "overflow": "hidden",
              "text-overflow": "ellipsis",
              "white-space": "nowrap"
            },
            "attributes": {
              "title": "[$Title]",
              "class": "ms-fontSize-16 ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
            }
          },
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1",
              "position": "relative",
              "height": "3em",
              "border-style": "dotted",
              "border-width": "1px 0 1px 0"
            },
            "attributes": {
              "class": "ms-borderColor-sharedGray20"
            },
            "children": [
              {
                "elmType": "div",
                "txtContent": "=toLocaleDateString([$TaskStart]) + ' - ' + toLocaleDateString([$TaskDue])",
                "style": {
                  "position": "relative",
                  "box-sizing": "border-box",
                  "display": "flex",
                  "border-radius": "1em",
                  "z-index": "1",
                  "top": "0.2em",
                  "height": "3em",
                  "overflow": "hidden",
                  "word-break": "break-word",
                  "padding": "0.2em 0.4em",
                  "font-size": "10px",
                  "line-height": "12px",
                  "border-width": "1px",
                  "border-style": "solid",
                  "left": "=  (Number([$TaskStart])-Number([$ProjectStart])) / (Number([$ProjectDue])-Number([$ProjectStart])) * 100  + '%'",
                  "width": "= if( [$TaskDue] > [$ProjectDue],  (Number([$ProjectDue])-Number([$TaskStart])+ 86400000) / (Number([$ProjectDue])-Number([$ProjectStart])+ 86400000) * 100  ,  (Number([$TaskDue])-Number([$TaskStart])+ 86400000) / (Number([$ProjectDue])-Number([$ProjectStart])+ 86400000) * 100 ) + '%'"
                },
                "attributes": {
                  "title": "=[$Title] + ' - ' + toLocaleDateString([$TaskStart]) + ' - ' + toLocaleDateString([$TaskDue])",
                  "class": "=if([$Progress] >= 1, 'ms-borderColor-sharedGreen20 ms-bgColor-sharedYellowGreen10', if([$TaskDue] > [$ProjectDue], 'ms-borderColor-sharedRed20 ms-bgColor-sharedRed10', if([$TaskStart] > @now, 'ms-borderColor-gray100 ms-bgColor-gray40', if([$TaskDue]< @now, 'ms-borderColor-sharedRed20 ms-bgColor-sharedRed10', 'ms-borderColor-sharedCyanBlue20 ms-bgColor-sharedCyanBlue10'))))"
                }
              },
              {
                "elmType": "span",
                "attributes": {
                  "title": "=toLocaleDateString(@now)",
                  "class": "ms-borderColor-blue"
                },
                "style": {
                  "position": "relative",
                  "display": "=if([$ProjectDue] < @now , 'none', 'block')",
                  "top": "-2.6em",
                  "z-index": "100",
                  "border-left-width": "5px",
                  "border-left-style": "solid",
                  "height": "3em",
                  "width": "1em",
                  "left": "=(Number(@now)-Number([$ProjectStart])) / (Number([$ProjectDue])-Number([$ProjectStart])) * 100 + '%'"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

For reference

I've posted a previous semi-related question here

3
  • 1
    As per the PnP List formatting samples, those classes should be supported. Check list of available background color classes at: pnp.github.io/List-Formatting/groupings/classes/… Jun 20, 2023 at 13:57
  • One of my colours was spelled using the English spelling of grey instead of 'gray: .sp-css-backgroundColor-BgLightGray It worked when I copied the colour values direct from the link you provided Ganesh, thank you. Also I had to leave off the initial '.' from before the .spp-css-backgroundColor-*
    – Tally
    Jun 20, 2023 at 16:13
  • Great, glad it worked for you! Jun 20, 2023 at 17:08

1 Answer 1

1

The CSS classes you mentioned are still supported and recognized by the SharePoint JSON formatting.

You can find the complete list of CSS classes related to background colors with JSON column/view formatting samples on PnP list formatting official website at: Samples by Class: sp-css-backgroundColor-*

Note: You have to use the class names in JSON formatting without initial ., simply like sp-css-backgroundColor-BgCoral. Check the existing samples on PnP list formatting official website and you will get idea about how to use those CSS classes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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