Using JSON Formatter to Format SharePoint Forms

Introduction

SharePoint forms are essential for data entry and management, but default forms can sometimes be bland and unstructured. With JSON formatting, you can customize the appearance and behavior of SharePoint list forms to enhance user experience and improve data visibility. In this blog, we will explore how to use JSON formatting to style SharePoint forms and control field visibility.

What is JSON Formatting in SharePoint?

JSON (JavaScript Object Notation) is a lightweight data format used to define how SharePoint list views, columns, and forms appear. SharePoint allows users to apply JSON formatting to form elements to customize labels, colors, visibility, and even interactive behavior without requiring complex coding.

Why Use JSON Formatting for SharePoint Forms?

Enhanced UI: Improves the visual appeal of forms.
Conditional Formatting: Controls field visibility based on user inputs.
Improved User Experience: Highlights important fields and sections.
No Code Solution: Allows customization without writing scripts or custom web parts.

Applying JSON Formatting to SharePoint Forms

To customize a SharePoint form using JSON formatting, follow these steps:

1. Open the List Form Customization Panel

Navigate to your SharePoint list.
Click on the New Item button to open the form.
In the top-right corner, click Edit Form > Customize with JSON.

2. Basic JSON Formatting Structure

Here’s a basic JSON snippet to format a form section:

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"sections": [
{
"displayname": "Personal Details",
"fields": ["FirstName", "LastName", "Email"]
}
]
}

This code groups the fields into a section named Personal Details.

3. Conditional Formatting Example

To hide a field unless a checkbox is selected, use this JSON:

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"fields": {
"Department": {
"visible": "=if([$IsManager] == true, true, false)"
}
}
}

This ensures that the Department field is only visible when the IsManager checkbox is selected.

4. Styling Fields

You can also apply color and styling using JSON. The following example highlights a field in red if it is empty:

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"fields": {
"Priority": {
"style": {
"background-color": "=if([$Priority] == '', 'red', 'white')"
}
}
}
}

Testing and Applying JSON Formatting

After entering the JSON in the formatting panel:

Click Save to apply the changes.
Refresh the form to see the updates.
Test different conditions to ensure functionality.

Conclusion

JSON formatting is a powerful tool for customizing SharePoint forms without extensive coding. By utilizing conditional visibility, section grouping, and styling options, you can create user-friendly and visually appealing forms. Start experimenting with JSON in your SharePoint environment and enhance your form usability today!