Applying JSON Formatting on SharePoint List

Introduction: 

Instead of using “PowerApps Customized Forms” in SharePoint, we can use the JSON formatting to create conditions, i.e., show/hide fields and change the structure of Input fields.  It helps us avoid using PowerApps, and we can perform the functions quickly by using JSON formatting.  

We will create an “Issue Tracker” list in this demo and apply JSON formatting to it.

For this demo, we  are going to use the “Issue Tracker” template List. 

 Follow the below given steps to create the list: 

1)  Click on the ‘New’ option and select the ‘List’ from the drop-down menu to create a new list. 

image001

2) Create a list  using the template  “Issue Tracker. 

image003

image005

3) Finish creating the list.

image007

Add New Columns
 

After creating the list, we create columns. 

1) Create the column named “Comments,”  using the option “Single Line of Text.” 

image009

2) Create a column named “Expected Completion Date” of type “Date and Time. 

image011

 Add Columns To Separate Sections Using JSON Formatting 

1) Now, we have created a list. Open the list and click on “New.” 

image013

2)  At the extreme top right corner, click on the icon and choose “Configure Layout. 

image015

3) A popup will open, as shown below. From the dropdown, choose “Body.”  

image017

 

Paste this JSON in the body! 

 

{ 

    “sections”: [ 

        { 

            “displayname”: “Issue”, 

            “fields”: [ 

                “Issue” 

            ] 

        }, 

        { 

            “displayname”: “Details”, 

            “fields”: [ 

                “Priority”, 

                “Assigned to”, 

                “Date reported” 

            ] 

        }, 

        { 

            “displayname”: “Other”, 

            “fields”: [ 

                “Status”, 

                “Issue description”, 

                “Days old”, 

                “Issue source”, 

                “Images”, 

                “Issue logged by”, 

                “Comments”, 

                “Expected Completion Date” 

            ] 

        } 

    ] 

} 

This JSON will separate the columns into three sections. 

If you look carefully at JSON, you will come to know that the “displayname ” shows the name of the section; for instance,  “displayname”: “Other.”  It will create the section with the heading “Other,” as  shown in the picture.

            “fields“: [ 

                “Status”, 

                “Issue description”, 

                “Days old”, 

                “Issue source”, 

                “Images”, 

                “Issue logged by”, 

                “Comments”, 

                “Expected Completion Date” 

            ] 

 

The “fields” will show the columns to be entered in the section. 

As we can see in the picture below, there are three sections.
 

These pictures correspond to the JSON formatting that we applied earlier. 

image019

Show/Hide Fields based on conditions 

In PowerApps, we can show/hide fields based on the conditions; fortunately, the same can be achieved using JSON formatting. To show/hide fields, perform the following actions: 

  1.  Click on “New.” 
  2. Click on the option at the top right and choose “Edit Columns,” as shown in the picture.  

image021

 

3) A popup will   appear showing the fields. Click on the three dots of any field and choose “Edit Conditional Formula. 

image023

 

For this example, we have chosen the “Issue Description Field. 

Type this in the popup: 

=if([$Priority]==’Critical’,’true’,’false’) 

The condition that we have written translates as follows.

If the field “Priority” has a value equal to “Critical,” then show the “Issue Description” field; otherwise, do not show.

Let us show another example. 

Open the “Edit Conditional Formula” for “Expected Completion Date” and type this.

=if([$Priority]==’High’,’true’,if([$Priority]==’Critical’,’true’,’false’))

 This condition translates as follows. 

 If the field “Priority” has a value equal to “Critical” or “High,” then show the “Expected Completion Date “field; otherwise, do not show.

As you can see in the picture below, the fields “Expected Completion Date” and “Issue Description” are not showing as the priority is set as empty. 

image025

 

If we  enter the priority as critical, then the fields of “Issue Description” and “Expected Completion Date” become visible, as shown in the picture below.

image027

Conclusion:

If we want to apply styling to the SP list and show/hide fields, we can use JSON object instead of using PowerApps.  

If you have any questions on this blog, reach out to us using the comment box below! We will be happy to assist you. 

You can also reach out to our BOLDEnthusiasts through our contact us form. 

Happy reading! 

Leave a Reply

Your email address will not be published. Required fields are marked *