The following are three top ways to use JSON to customize a SharePoint list form:
1) Custom Header Design:
The header section of a list form has essential context and branding. One can use JSON to create a custom header with icons, colors, and dynamic content.
See this sample JSON code for a custom header:
{
"elmType": "div",
"attributes": { "class": "ms-borderColor-neutralTertiary" },
"style": {
"width": "90%",
"border-top-width": "0px",
"border-bottom-width": "1px",
"border-left-width": "0px",
"border-right-width": "0px",
"border-style": "solid",
"margin-bottom": "10px",
"background-color": "blue"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"box-sizing": "border-box",
"align-items": "center"
},
"children": [
{
"elmType": "div",
"attributes": {
"iconName": "Group",
"class": "ms-fontSize-35 ms-fontWeight-regular ms-fontColor-themePrimary",
"title": "Details"
},
"style": {
"flex": "none",
"padding": "0px",
"padding-left": "10px",
"height": "25px",
"color": "white"
}
}
]
},
{
"elmType": "div",
"attributes": {
"class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-20"
},
"style": {
"box-sizing": "border-box",
"width": "95%",
"text-align": "left",
"padding": "15px 10px",
"overflow": "hidden",
"color": "white"
},
"children": [
{
"elmType": "div",
"txtContent": "='Employee Details - ' + [$Employee]"
}
]
}
]
}
This JSON snippet creates a header with a blue background, an icon, and a dynamic title based on an employee’s name.
2) Conditional Formatting:
Use JSON to apply conditional formatting to form fields based on specific conditions. Example: one can hide or show fields dynamically based on user input or calculated values.
JSON can create rules that adjust the visibility, styling, or behavior of form elements.
3) Footer Customization:
Enhance the footer section of a list form by adding relevant information, links, or buttons.
Customize the footer using JSON to create a cohesive design that aligns with needed branding.
