Customizing SharePoint List Forms Using JSON

Introduction

 
In the modern UI, the SharePoint team is adding more features. Recently they have introduced SharePoint list form formatting using JSON. Using JSON formatting for lists, we can have
  • Conditional formatting applied to fields, which is basically hiding and showing fields based on certain values
  • Adding logo, header information to the list form
  • Adding footer information to the list form
  • Adding sections if the form is large, and arranging the columns side by side
  • And much more
The beauty of it is all these things can be achieved directly from the UI, without any custom development using SPFx or CSOM. If you have use case where you need to design form with minimal rules and sections you can take advantage of this JSON formatting.
 
In this article series, we will cover the following,

Creating List from List template

 
To keep this article simple, we will create a list from one of communication site, and then modify the list form. 
 
Step 1
 
Login to your communication site and go to site contents

Customizing SharePoint List Forms Using JSON
 
Step 2
 
From the site contents page, click on new button and select list
 
Customizing SharePoint List Forms Using JSON
 
Step 3
 
For this example, I have selected employee onboarding. You can chose any other list.
 
Customizing SharePoint List Forms Using JSON
 
Step 4
 
Leave the default title and proceed to next. You can update the title to your needs. I have left it for simplicity.
 
Customizing SharePoint List Forms Using JSON
 
Customizing SharePoint List Forms Using JSON
 
Step 5
 
Check the default new form. It should display just like below.
 
Customizing SharePoint List Forms Using JSON
 
Customizing SharePoint List Forms Using JSON
 

Conclusion

 
Thus in this section, we have seen how to create a list from existing list templates in Modern SharePoint site. This finishes Part one in the series of Customizing List Forms Using JSON Formatting.