Adding Conditional Formatting for a List Form Header with JSON
The recently added capability to perform simple layout changes on a SharePoint list form using JSON is the bee’s knees.
As is the case with many insect joints, the examples out there mostly are the same and the documentation isn’t full featured enough for most people’s taste.
Sue Hanley (@SusanHanley) and I were working on some list form formatting JSON today and we had a devil of a time figuring out a simple little thing. We wanted the Header of the form to say “New Project Request” if it was, well, a new Project Request. If we were editing an existing Project Request, we wanted the header to say “Project Request for Foo”, where “Foo” was the value of the list item’s Title. Simple, right?
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…
Hi Marc! Don’t You know if we can shrink last column to fit 100%? Wanted to add Comments with ‘Appended changes’. Looks like it supports this, but column is very narrow:
https://www.upload.ee/image/13336364/img-2021-07-23_173136.jpg
Also, as I inderstand – we can’t make fields readonly (for July 2021, at least)
Documentation says nothing about it, the only thing we can is to conditionally show/hide fileds, as I understand..
Best regards, Gennady
@Rockie:
I assume you mean grow to 100%? Have you tried putting Description in its own section?
M.
Hi Marc!
yes, Description is in its own section:
https://i.postimg.cc/155DWm3d/marc-2021-07-26-183104.jpg
I also tried to add “style” attribute with 100% but no luck..
Best regards, Gennady
Is there any simple option on formating those feilds to read only or locked?
@Martin:
I’m not sure I totally understand the question, but only people who have permissions can make changes like this.
M.
Hello, is there a way to enter a new sentence in the code you posted above? For example, if I wanted to give a brief explanation under “New Project Request” in my example below it’s CONTACTS FOR QUESTIONS.
Please note: I DO NOT do this for a living and do not understand code. I mostly copy and paster everything I do.
It reads like this now:
CONTACTS FOR QUESTIONS – 1st CONTACT: [email protected] or 555-555-5555 2nd CONTACT (if first contact is out of the office: [email protected]
How I would like it to read:
CONTACTS FOR QUESTIONS
1st CONTACT: [email protected] or 555-555-5555
2nd CONTACT: [email protected]
{
"elmType": "div",
"txtContent": "CONTACTS FOR QUESTIONS - 1st CONTACT: [email protected] or 555-555-5555 ~ 2nd CONTACT (if 1st contact is out of the office: [email protected]"
}
]
}
]
}