Another member of the Microsoft community, Adam Wójcik, pointed out to me recently the existence of a tool called SP Formatter. I checked out the product, and was immediately interested. It is a Visual Studio code extension that offers Intellisense-like support for JSON formatting. It also has a browser extension which allowed VS Code changes to be synchronized with the JSON editor window in SharePoint. I’ve tried this out, and am ready to talk about my initial thoughts.
Benefits of Using SP Formatter
The SP Formatter is a browser extension that allows you to customize your SharePoint column, view, or form layout formatting JSON using a full-featured editor instead of the default one. It offers several benefits:
- Enhanced Customization: SP Formatter provides a more powerful and flexible editor for formatting JSON in SharePoint. With its full-featured interface, you can easily create complex formatting rules and customize the appearance of your SharePoint lists and libraries.
Don’t forget to enable the browser extension on the tab - Improved Productivity: By using SP Formatter, you can save time and effort when formatting JSON in SharePoint. The extension offers a user-friendly interface with syntax highlighting, auto-completion, and error checking, making it easier to write and debug your formatting rules.
- Simplified Maintenance: With SP Formatter, you can easily manage and update your formatting rules. The extension allows you to organize your rules into reusable templates, making it simple to apply consistent formatting across multiple columns, views, or forms.
- Community Support: SP Formatter has an active community of users who share their knowledge and expertise. You can find helpful resources, tutorials, and examples online to learn more about formatting JSON in SharePoint and get inspiration for your own projects.
- Compatibility: The SP Formatter is compatible with Google Chrome and Microsoft Edge (Chromium), ensuring that you can use it on your preferred browser.
To install the SP Formatter browser extension and start enjoying these benefits, follow these steps:
- Open the Chrome/Edge extensions page.
- Search for “SP Formatter” in the search bar.
- Click on the SP Formatter extension from the search results.
- Click on the Install/Get button to install the extension.
To install the (optional) SP Formatter VS Code extension, follow these steps:
- Open VS Code
- Click on the Extensions icon in the left sidebar or press Ctrl+Shift+X (Cmd+Shift+X on macOS) to open the Extensions view
- In the Extensions view, search for SP Formatter
- Click on the Install button next to it.
My course will teach you JSON formatting in SharePoint!
How is it using SP Formatter?
The browser plugin alone gives you great benefits like Intellisense. It lets you easily browse through the available field references (like @currentField), making the construction of your JSON formatters a breeze.
Bring in the VS Code extension, and the power is at a whole other level. Now, your JSON formats can be natively saved in a folder, while also being synchronized to SharePoint’s JSON editor pane.
It still has the Intellisense-like feature, but now with the JSON formats saved to files, I can more easily build repositories of all my JSON formats. This means I can quickly apply the same JSON formats to multiple fields, even across multiple SharePoint sites.
Final Thoughts
I think a big challenge to learning JSON formatting isn’t always the HTML knowledge, but the JSON itself and SharePoint-specific syntax to reference fields. This product can greatly reduced the barrier to learning how to use JSON formatting and is something I recommend.