By 103,077 total views, 11 views today
In this article, we will learn about how to customize the list form using JSON in SharePoint Online step by step. In earlier, days in classic SharePoint, we used to customize the SharePoint list form using the InfoPath Form designer, back then in SharePoint Online we started actually using the PowerApps tool to customize the list form which works well, in fact, this current trend in the SharePoint Online /Office 365 work domain. In both, the tool is fast to customize the list form. In the long run, Microsoft always wanted to empower their customer in terms of using SharePoint Online as a content management system – so, keeping the user more productive in mind, Microsoft recently launched a new product as part of their regular roadmap plan where user can customize the list form using the JSON – which is very faster than other approaches (of course there are many limitations in this JSON way customizing, and it is not right to compare this JSON approach with the PowerApps ), with just a few clicks we can develop a nice looking form.
In the traditional approaches, the SharePoint list form looks flat where the columns are shown in order one after another where we cannot add the header, footer, and grouping of the body of the form. Using the JSON format we can add a header and footer in the list form and we can group the columns in many sections the way we want – exactly how we used to do in InfoPath and PowerApps.
Key-Highlights: Customize the list form using JSON in SharePoint Online
- How to configure the SharePoint list form layout?
- How to add a header in the SharePoint list form using the JSON formatting?
- How to add a footer in the SharePoint list form using the JSON formatting?
- How to customize the SharePoint list form body using the JSON formatting?
- How to configure the list form in SharePoint online?
- How to add header and footer in SharePoint online?
- How to create various sections in SharePoint online list form using JSON formatting?
In this demo, I will show how to customize the list form in SharePoint Online where I will add a header, and footer to the form and group the columns in various sections.
Below is the screenshot of the box item edit form in modern SharePoint Online.
Now we will learn how to customize the SharePoint Online list form using the JSON formatting step by step.
Step-by-step process to customize the SharePoint list form using the JSON formatting
I assume you have a SharePoint custom list with a few columns to it and at least an item.
Select and double click on the title link of the item, then from the right-side panel top corner, we could see a dropdown option that has three options:
- Edit columns
- Configure layout
- Customize with PowerApps
The above dropdown list is used to configure the SharePoint list form.
Click on the “Configure Layout” option.
In the next, we will land on the “Format” screen.
There we could see a dropdown list “Apply formatting to” with the below values:
- Header
- Body
- Footer
And, beneath that, we can see a big box for JSON formatting code.
Now, we will learn how to apply formatting in the Header, Body, and Footer using JSON one by one.
How to apply JSON formatting in SharePoint online list form header (JSON format SharePoint list form header)?
Now let us see what happens when we select “Header” in the Apply formatting to the dropdown list.
The message says “Change the display of this form header by adding JSON below. Remove the text from the box to clear the custom formatting.”
Add the below JSON text to the box:
{
"debugMode": true,
"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": "Group",
"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": "='Details for ' + [$Title]"
}
]
}
]
}
Then click on the preview button.
Then we can see the header at the top of the form “Details for Smith”. Here the “Title” column is mapped for the header (“txtContent”) which displays the Title of the list item in the header.
"txtContent": "='Details for ' + [$Title]"
Then, finally, if you are OK with the header look and feel, click on the “Save” button.
Now, we will learn how to apply the footer to the SharePoint Online list form.
How to apply JSON formatting in SharePoint online list form footer (JSON format SharePoint list form footer)?
Similarly, we need to select the “Footer” from the “Apply Formatting To” dropdown selection.
Now let us see what happens when we select “Footer” in the Apply formatting to the dropdown list.
The message says “Change the display of this form footer by adding JSON below. Remove the text from the box to clear the custom formatting.”
Add the below JSON text to the box:
{
"debugMode": true,
"elmType": "div",
"style": {
"width": "100%",
"text-align": "left",
"overflow": "hidden",
"border-top-width": "1px"
},
"children": [
{
"elmType": "div",
"style": {
"width": "100%",
"padding-top": "10px",
"height": "24px"
},
"children": [
{
"elmType": "a",
"txtContent": "='Details for ' + [$Title]",
"attributes": {
"target": "_blank",
"class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-semibold ms-fontSize-m ms-fontColor-neutralSecondary–hover ms-bgColor-themeLight–hover"
}
}
]
}
]
}
Now Click on the preview button, and we can see that a footer a added to the form.
If you are ok with the footer text and format, you can click on the Save button.
Finally, we will learn how to customize the form body using the JSON in SharePoint Online.
How to apply JSON formatting in SharePoint online list form body (JSON format SharePoint list form body)?
Similar to the header and footer, now you need to select the “Body” from the “Apply Formatting To” dropdown selection.
Now let us see what happens when we select “Body” in the Apply formatting to the dropdown list.
The message says “Change the display of this form body by adding JSON below. Remove the text from the box to clear the custom formatting.”
Add the below JSON text to the box:
{
"sections": [
{
"displayname": "Employee General Information",
"fields": [
"Title",
"Remark"
]
},
{
"displayname": "Employee Basic Information",
"fields": [
"EmpName",
"EmpDepartment",
"IsADUser"
]
},
{
"displayname": "Other Section",
"fields": [
"Test Comment",
"PnPTestColumn"
]
}
]
}
Once we add the above JSON code to the box and click on the preview button, we will see that the form body has been customized with the various sections like “Employee General Information”, “Employee Basic Information”, and “Other Section”.
Finally, if you are ok with the body formatting of the form, you can click on the “Save” button.
Format to customize the SharePoint list form:
Below is the sample JSON format to customize the list form.
{
"sections": [
{
//give a display name for the section
"displayname": "",
"fields": [
//reference your fields here using their display name
"Title"
]
},
{
//give a display name for the section
"displayname": "",
"fields": [
//reference your fields here using their display name
]
}
]
}
Below is the complete customize screen with the custom header, body, and footer.
Summary: What do we have here (customize the list form using JSON in SharePoint Online)?
Thus in this article, we have learned the below with respect to configuring and formatting the SharePoint Online list form using JSON:
- How to configure the SharePoint list form layout?
- How to add a header in the SharePoint list form using the JSON formatting?
- How to add a footer in the SharePoint list form using the JSON formatting?
- How to customize the SharePoint list form body using the JSON formatting?
- How to configure the list form in SharePoint online?
- How to add header and footer in SharePoint online?
- How to create various sections in SharePoint online list form using JSON formatting?
See Also: Customize the list form using JSON in SharePoint Online
You may also like the below SharePoint article:
- Column header formatting in SharePoint list Quick Edit or Datasheet View
- Learn HTML table formatting using Microsoft Power Automate step by step
- How to create a Tile view in modern SharePoint online lists and configure it.
- Create calendar view on any list or library in modern SharePoint Online
- SharePoint spaces to be available by default in New menu SharePoint Online
- Customize SharePoint List Forms Using PowerApps step by step Office 365
- SharePoint Online: private vs public office 365 groups in SharePoint online site
- Configure SharePoint search box in office 365 suite bar step by step
- Office 365: SharePoint vs Microsoft Teams – Understanding the Differences in o365
- How to enable SharePoint Syntex in Microsoft 365 tenant?
Looking for a PowerApps tutorial from the scratch? Then you are in the right place, below are a bunch PowerApps articles you may like:
- How to send email from PowerApps button click?
- How to open outlook from PowerApps step by step?
- Create your first chatbot in PowerApps step by step
- Cascading dropdown in PowerApps using SharePoint data
- CRUD operations in PowerApps using SharePoint online list
- CRUD Operation in PowerApps Using Excel OneDrive
- Phone number and email validation in PowerApps
- Connect to a SharePoint list in PowerApps step by step
- Collection variable in PowerApps
- Understand the difference between Set and UpdateContext function
- String concatenation function in PowerApps
- 3 ways to create Power Apps – Types of Power Apps
- Overview view of PowerApps development environment in Power Platform
- Customize SharePoint List Forms Using PowerApps step by step – Office 365
- Create free development environment using Power Apps Community Plan
- Show or hide columns conditionally in SharePoint list form
- SharePoint Online – Power Automate: How to Export and Import Microsoft Team Flows across environment
- Configure the list form
Buy the premium version of SharePoint Online & Office 365 administration eBook from here:
About Post Author
