SharePoint JSON Formatting Examples

SharePoint, a robust platform for document management and collaboration, offers a powerful feature called JSON formatting. This feature allows users to customize the look and feel of SharePoint lists and libraries, enhancing user experience and improving productivity. Let's delve into the world of SharePoint JSON formatting with some practical examples.

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 SharePoint, JSON formatting is used to apply conditional formatting, apply styles, and display data in a more engaging way.

Understanding the Basics of JSON Formatting in SharePoint

Before we dive into examples, let's understand the basic structure of JSON formatting in SharePoint. JSON formatting is applied using the 'Format' column option in SharePoint. The JSON code is written in the 'Value' field, and the 'Apply to' field determines where the formatting will be applied.

Here's a simple example of a JSON object that changes the text color of an item based on its status:

```json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "span", "txtContent": "@currentField", "style": { "color": "=if(@currentField == 'Active', 'green', if(@currentField == 'Inactive', 'red', 'black'))" } } ```

Conditional Formatting with JSON

Conditional formatting is one of the most powerful uses of JSON in SharePoint. It allows you to apply different styles based on the value of a column. The above example demonstrates conditional formatting based on the status of an item.

Here's another example that changes the background color of an item based on its priority:

```json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "style": { "background-color": "=if(@currentField == 'High', 'red', if(@currentField == 'Medium', 'yellow', 'green'))" } } ```

Formatting with Icons

JSON formatting also allows you to add icons to your SharePoint lists and libraries. This can make your data more engaging and easier to understand at a glance. Here's an example that adds a status icon based on the value of a column:

```json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "span", "attributes": { "iconName": "=if(@currentField == 'Active', 'StatusCompleted', if(@currentField == 'Inactive', 'StatusWarning', 'StatusError'))" }, "style": { "padding-right": "5px" } } ```

Advanced JSON Formatting in SharePoint

While the above examples demonstrate the basics of JSON formatting, SharePoint offers much more. You can create complex JSON objects that display data in unique ways, apply styles to multiple columns, and even create custom views.

For instance, you can create a JSON object that displays a 'Due Date' column as a countdown timer. This can help users see how much time is left until a task is due, making it a powerful tool for project management.

Creating a Countdown Timer with JSON

Here's an example of a JSON object that creates a countdown timer:

```json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "txtContent": "=if([$DueDate] >= @now, 'Due in ' + Math.floor(([$DueDate] - @now) / (1000 * 60 * 60 * 24)) + ' days', 'Overdue')" } ```

Displaying Data in a Custom View

JSON formatting can also be used to create custom views of your data. For example, you can create a JSON object that displays a 'To Do' list, complete with checkboxes and a 'Mark as Complete' button.

While creating such advanced JSON objects requires a good understanding of JSON syntax and SharePoint's column formatting schema, the possibilities are endless. With JSON formatting, you can transform your SharePoint lists and libraries into powerful, engaging tools that meet the unique needs of your organization.

As you explore the world of SharePoint JSON formatting, remember that practice makes perfect. Don't be afraid to experiment with different JSON objects and see what you can create. With a little creativity and a lot of trial and error, you can turn your SharePoint lists and libraries into something truly unique.