SharePoint Modern List Form JSON Formatting

SharePoint's Modern List Form has significantly enhanced the user experience by introducing JSON formatting. This feature allows you to customize the appearance and behavior of your lists without writing any code. By leveraging JSON, you can create visually appealing and intuitive forms that cater to your specific business needs.

JSON formatting in SharePoint Modern List Form provides a flexible and powerful way to control the look and feel of your lists. It enables you to apply styles, rearrange fields, and even hide or show columns based on specific conditions. In this article, we will delve into the world of JSON formatting, exploring its capabilities and providing practical examples to help you unlock its full potential.

Understanding JSON Formatting in SharePoint Modern List Form

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 is used to apply styles and customize the presentation of list items.

JSON formatting in SharePoint Modern List Form uses a set of predefined properties and functions to manipulate the appearance of list items. These properties and functions are organized into a JSON object, which is then applied to the list view. By understanding the structure and syntax of JSON, you can create sophisticated and dynamic list views that engage users and improve productivity.

JSON Formatting Syntax Basics

Before we dive into the specifics of JSON formatting in SharePoint, let's quickly review the basic syntax of JSON. JSON is written in key-value pairs, enclosed in curly braces ({}). Each key is followed by a colon (:), and the value can be a string, number, object, array, boolean, or null.

Here's a simple example of JSON syntax: ```json { "name": "John Doe", "age": 30, "isEmployee": true, "hobbies": ["reading", "hiking", "movies"] } ``` In SharePoint JSON formatting, you'll use this basic syntax to define the styles and properties of your list items.

SharePoint JSON Formatting Properties and Functions

SharePoint provides a wide range of properties and functions that you can use in your JSON formatting. These properties and functions allow you to control the appearance of list items, including fonts, colors, spacing, and more. Some of the most commonly used properties and functions include:

• fontWeight: Sets the font weight (boldness) of the text.
• color: Sets the text color.
• backgroundColor: Sets the background color of an element.
• padding: Adds space between an element and its content.
• margin: Adds space between an element and its neighboring elements.
• iconName: Sets an icon to display next to the text.
• iconColor: Sets the color of the icon.
• showColumn and hideColumn: Shows or hides a specific column based on conditions.

You can find a comprehensive list of SharePoint JSON formatting properties and functions in the official Microsoft documentation: JSON formatting overview.

Applying JSON Formatting to SharePoint Modern List Form

Now that we have a solid understanding of JSON formatting and its capabilities, let's explore how to apply JSON formatting to your SharePoint Modern List Form.

To apply JSON formatting to a list view, follow these steps:

1. Navigate to the list view where you want to apply the formatting.
2. Click on the Format current view button in the command bar.
3. Select JSON from the formatting options.
4. Enter your JSON code in the provided editor.
5. Click OK to apply the formatting.

You can also apply JSON formatting to a specific column by editing the column's properties and adding the JSON code in the JSON Formatting section.

Formatting a Column with JSON

Let's create a simple JSON formatting example that changes the font color and adds an icon to a column based on its value. In this example, we'll format the "Status" column to display a green checkmark icon for "Completed" items and a red exclamation point for "In Progress" items.

Here's the JSON code to achieve this: ```json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "span", "style": { "color": "=if([$Status] == 'Completed', '#3D9970', '#FF0000')" }, "attributes": { "iconName": "=if([$Status] == 'Completed', 'CheckMark', 'ErrorTriangle')", "iconColor": "=if([$Status] == 'Completed', '#3D9970', '#FF0000')" } } ``` In this example, we're using the if function to check the value of the "Status" column. If the value is "Completed", the text color and icon color are set to green, and a checkmark icon is displayed. If the value is "In Progress", the text color and icon color are set to red, and an exclamation point icon is displayed.

Conditional Formatting with JSON

JSON formatting also allows you to apply conditional formatting to your list views. Conditional formatting enables you to change the appearance of list items based on specific conditions, such as the value of a column or the result of a calculation.

Here's an example of conditional formatting that changes the background color of a row based on the value of the "Priority" column: ```json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "elmType": "div", "style": { "background-color": "=if([$Priority] == 'High', '#FFC1C1', if([$Priority] == 'Medium', '#FFFFC1', '#C1FFC1'))" } } ``` In this example, we're using nested if statements to check the value of the "Priority" column. If the value is "High", the background color of the row is set to light red. If the value is "Medium", the background color is set to light yellow. If the value is "Low", the background color is set to light green.

JSON formatting in SharePoint Modern List Form opens up a world of possibilities for customizing the appearance and behavior of your lists. By leveraging the power of JSON, you can create engaging and intuitive list views that enhance the user experience and improve productivity. So go ahead, experiment with JSON formatting, and unlock the full potential of your SharePoint lists!