SharePoint List Form Formatting JSON Examples

SharePoint list form formatting can significantly enhance the user experience and improve data input accuracy. One powerful way to achieve this is by utilizing JSON formatting. JSON (JavaScript Object Notation) allows you to customize the appearance and behavior of SharePoint list forms, making them more intuitive and engaging. In this article, we'll explore SharePoint list form formatting using JSON, with practical examples to help you get started.

Before delving into JSON formatting, ensure that your SharePoint list is set to allow JSON formatting. You can do this by clicking on the list settings gear icon, selecting 'List settings', then under 'Form settings', choose 'Enable JSON formatting'.

Understanding the Basics of JSON Formatting

JSON formatting in SharePoint is based on the modern experience. It uses a set of predefined properties and functions to style and control the behavior of list forms. Familiarizing yourself with these properties and functions is crucial for effective JSON formatting.

To apply JSON formatting, click on the list item or new item form, then select 'Format this web part' (or 'Format this item') from the command bar. This will open the 'Format web part' (or 'Format item') panel, where you can paste your JSON code.

JSON Formatting Properties

JSON formatting properties allow you to style various elements of the list form, such as background color, text color, font size, and more. Here's a simple example that changes the background color of a list item:

<?json<
{
  "backgroundColor": "#FFFF00"
}
</?>

In this example, replace `"#FFFF00"` with the desired background color code. You can find a list of predefined properties and their possible values in the SharePoint documentation.

JSON Formatting Functions

JSON formatting functions enable you to control the behavior of list forms, such as showing or hiding fields based on user input, displaying conditional content, and more. Here's an example that shows or hides a field based on the value of another field:

<?json<
{
  "field": {
    "Name": "MyField",
    "Show": "@currentWeb.Fields.getByName('MyConditionField').Value == 'Yes'"
  }
}
</?>

In this example, replace `'MyField'` and `'MyConditionField'` with the actual names of your fields. This function will show the 'MyField' field only when the 'MyConditionField' value is 'Yes'.

JSON Formatting Examples

Now that we've covered the basics, let's explore some practical JSON formatting examples to help you create more engaging and user-friendly SharePoint list forms.

Styling List Item Cards

JSON formatting allows you to style list item cards, making them more visually appealing and easier to navigate. Here's an example that changes the text color, font size, and adds a border to list item cards:

<?json<
{
  "style": {
    "spFieldQuery": {
      "color": "white",
      "font-size": "18px",
      "border": "1px solid black"
    }
  }
}
</?>

You can customize this example to suit your specific needs by modifying the color, font size, and border properties.

Conditional Formatting

Conditional formatting allows you to display different styles or content based on the value of a field. Here's an example that changes the background color of a list item based on the status of a 'Status' field:

<?json<
{
  "style": {
    "spFieldQuery": {
      "background-color": "@currentField == 'Completed' ? '#D1FAE5' : '@currentField == 'In Progress' ? '#FFFF00' : '#FFC7CE'"
    }
  }
}
</?>

In this example, replace the color codes and field names with your desired values. This function will apply different background colors to list items based on the status of the 'Status' field.

JSON formatting in SharePoint offers a wealth of possibilities for customizing list forms. By mastering the basics of JSON formatting properties and functions, you can create engaging, user-friendly, and efficient list forms that enhance the overall SharePoint experience. So go ahead, experiment with different styles and behaviors, and make your SharePoint lists truly your own!