Adding Conditional Formatting for a List Form Header with JSON

The article Configure the list form | Microsoft Docs is instructive, but only scratches the surface of the possibilities. In fact, the example given for the header is great, but throws an error if you’re on a New Form and haven’t filled in the Title – because there isn’t a Title value yet. It doesn’t prevent the form from working, but it’s ugly, that message “Failure: Title was not found on the data object.”

There are a couple of things going on here. First, the message is shown because of this line at the top of the JSON.

"debugMode": true,

That tells SharePoint to let you know if there are any issues. You should generally remove it – or never add it – unless you need to debug issues.

Second, the formula for the text in the header is always going to look a little funny on the New Form, regardless whether there’s a value for the Title.

"txtContent": "='Contact details for ' + [$Title]"

Contact details for… Who?

Wouldn’t it be better if the JSON you used handled this better? Of course it would. Here’s what we came up with. We removed the "debugMode": true, so we wouldn’t see the message, ever. Then we added a condition to display a more pleasant header: "txtContent": "=if([$Title]=='','New Project Request', 'Project Request for '+[$Title])"

Here’s the full JSON. Obviously, you may not be creating a Project Request, but you can easily change that text.

{
    "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-neutralTertiary"
     },
     "style": 
     {
         "width": "99%",
         "border-top-width": "0px",
         "border-bottom-width": "1px",
         "border-left-width": "0px",
         "border-right-width": "0px",
         "border-style": "solid",
         "margin-bottom": "16px"
      },
      "children": [
      {
          "elmType": "div",
          "style": 
          {
              "display": "flex",
              "box-sizing": "border-box",
              "align-items": "center"
           },
       "children": [
       {
           "elmType": "div",
           "attributes": 
           {
               "iconName": "TextDocument",
               "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
               "title": "Details"
            },
        "style": 
        {
            "flex": "none",
            "padding": "0px",
            "padding-left": "0px",
            "height": "36px"
         }
      }
    ]
  },
  {
      "elmType": "div",
      "attributes": 
      {
          "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24"
       },
       "style": 
       {
           "box-sizing": "border-box",
           "width": "100%",
           "text-align": "left",
           "padding": "21px 12px",
           "overflow": "hidden"
        },
       "children": [
       {
           "elmType": "div",
           "txtContent": "=if([$Title] == '',
           'New Project Request', 
           'Project Request for '+[$Title])"
        }
    ]
  }
]
}

Here’s what that gives us for the New Form…

And once we’ve filled in the Title and in the Edit Form…

Source: Paper.li

The Tech Platform

www.thetechplatfrom.com