The Tech Platform
Apr 22, 20212 min
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…