SharePoint List Form JSON Formatting Examples

SharePoint list forms are a powerful way to manage and interact with data within your SharePoint environment. With JSON formatting, you can take this power to the next level by customizing the appearance and behavior of your list forms. In this article, we'll explore various SharePoint list form JSON formatting examples to help you unlock the full potential of this feature.

Before we dive into the examples, let's briefly understand what JSON formatting is. JSON (JavaScript Object Notation) is a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate. In the context of SharePoint, JSON formatting allows you to apply conditional styles, hide or show columns, and even add custom functionality to your list forms.

Basic JSON Formatting

Let's start with the basics. The foundation of JSON formatting is the JSON object, which consists of key-value pairs. In SharePoint, these keys correspond to different elements of your list form, such as 'FieldName' for the name of a column, 'DisplayName' for the column header, and 'Value' for the cell content.

Here's a simple example that changes the background color of a cell based on the value of a 'Status' column:

```json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "span", "style": { "background-color": "=if([$Status] == 'Completed', '#D1F1E0', '#FFF')" } } ```

Conditional Formatting

Conditional formatting is one of the most common use cases for JSON formatting. It allows you to apply different styles based on the value of a column. In the example above, we used an 'if' statement to change the background color based on the 'Status' column.

You can also use 'if' statements to show or hide columns. Here's an example that hides the 'Due Date' column if the 'Status' is 'Completed':

```json { "elmType": "span", "style": { "display": "=if([$Status] == 'Completed', 'none', 'block')" } } ```

Custom Functionality

JSON formatting also allows you to add custom functionality to your list forms. For example, you can use the 'executeJavaScript' function to run custom scripts. Here's an example that displays a confirmation dialog when a user tries to delete an item:

```json { "elmType": "span", "txtContent": "Delete", "style": { "cursor": "pointer" }, "customActions": { "onClick": { "command": "executeJavaScript", "parameters": { "script": "if(!confirm('Are you sure you want to delete this item?')){return false;}" } } } } ```

Advanced JSON Formatting

While the examples above demonstrate the basics of JSON formatting, SharePoint also supports more advanced features. For instance, you can use 'applyToAll' to apply formatting to all columns in a row, and you can use 'transform' to manipulate the data before it's displayed.

Here's an example that applies a strike-through style to all columns in a row if the 'Status' is 'Cancelled':

```json { "elmType": "tr", "style": { "text-decoration": "=if([$Status] == 'Cancelled', 'line-through', 'none')" }, "applyToAll": true } ```

Using JSON Formatting with Modern Experience

JSON formatting is fully supported in the modern experience of SharePoint. In fact, many of the out-of-the-box formatting options in modern experience are powered by JSON. Here's an example that changes the icon of a 'Choice' column based on the selected option:

```json { "elmType": "span", "style": { "padding-left": "20px" }, "txtContent": "=if([$Status] == 'Active', '🟢', if([$Status] == 'Inactive', '🔴', '🟡'))" } ```

JSON Formatting with Power Apps

JSON formatting can also be used in conjunction with Power Apps to create even more complex and interactive list forms. For example, you can use JSON formatting to conditionally show or hide fields based on user input in a Power App.

Here's a simple example that hides the 'Notes' field if the 'Priority' is 'Low':

```json { "elmType": "div", "style": { "display": "=if([$Priority] == 'Low', 'none', 'block')" } } ```

In conclusion, JSON formatting opens up a world of possibilities for customizing your SharePoint list forms. Whether you're looking to add a simple visual touch or build complex, interactive experiences, JSON formatting has you covered. So, start exploring and see what you can create!