SP Formatter: the big update

Column Formatting
4 min read
#vscode #column formatting #extension

At the end of 2020, I worked on a bunch of new features for SP Formatter. SP Formatter is a web extension (supports Chrome and Edge), which transforms the out-of-the-box SharePoint Column (View) Formatting experience and makes JSON editing a lot more convenient. You can watch a short demonstration video on youtube here.  This post covers changes I added in some details.

Dark mode

Enabling dark mode will immediately drastically increase your productivity, no matter what you’re doing. 

Unknown genius author

When talking seriously, almost every app nowadays has a dark theme or dark mode. Now SP Formatter also supports it! Simply enable it via the extension popup:

And you’re good to go:

It really nice looking at dark-enabled SharePoint sites :)

Full (split) screen mode

The window, where we modify column formatting JSON is really small. Especially the height of that window is extremely annoying. So, in a newer version of SP Formatter you have an option to expand the left area and kind of full-screen behavior:

Enhanced completions (suggestions, intellisense)

Before the update, SP Formatter had quite a good intllisense support. First of all, property suggestions based on the Column Formatting schema JSON (https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json). Additionally:

  • Office UI Fabric (Fluent UI) icons suggestion
  • css styles suggestion
  • HTML tag property suggestions  

The newer version adds support for token-based values like @currentField and field value injections like [$Title].

How it works:

You can type the ”@” symbol at any place of your JSON, then the editor will suggest all possible values available for a token, starting with @.

Similarly, if you type ”$”, it will show you a list of fields, available for the current list and available for inserting. 

If you’re curious, it’s implemented via custom completion provider for monaco-editor and HTTP call to SharePoint to get current list fields. 

VSCode integration

This one probably the most interesting one. Especially for developers, because a lot of developers use VSCode to modify Column formatting JSON. Additionally, most likely your JSON code is source control based, so it’s more natural to modify it inside IDE rather than in a browser and then copy it back.  

Before using VSCode integration mode, you should install the corresponding VSCode extension - SP Formatter. 

Now you should open any of your column formatting JSON files inside VSCode, right-click on that file, and select the “SP Formatter: start a new session” option:

In the bottom status bar area, you will see an indication, that SP Formatter is in listening mode:

What it means? It means, that your current file (let’s say drinks.json) is listening for an inbound connection from a web extension. As soon as the extension is connected, the content will be synchronized with a browser. 

Now if you open a column formatting in a browser and enable SP Formatter, you will see a message, that VSCode is connected:

And VSCode will be updated accordingly:

Now, if you make changes in drinks.json inside VSCode, the changes will be immediately available in a browser (live preview):

How it works? When you click “Start a new session”, the extension starts a new HTTP server with WebSockets support (using socket.io). It listens for an inbound connection from the browser. As soon as a connection is established, it starts communication - synchronize the content of the VSCode file with a browser. 

Important. HTTP port 11232 should be opened in order vscode extension to be able to start a web server

As you can see in the animation, inside VSCode also available replaceable tokens suggestions (with @) and fields (with $).

You can also have the have level of intellisense in VSCode as you have in a browser. VSCode extension adds JSON Validation extensibility. It means, that the extension provides suggestions and intellisense based on the file name template. 

If you want to sync another file, simply open it, run “SP Formatter: start a new session” again (it automatically disconnects the first session), change your column in a browser, and disable and then enable SP Formatter so that it picks the right column. 

To make it work, you should follow two simple rules:

  1. Remove “$schema” property from your JSON file
  2. Use special file naming convention - *.column-formatter.json, *.column.formatter.json, *.column-format.json, *.column.format.json for column and 
  3. *.view-formatter.json, *.view.formatter.json, *.view-format.json, *.view.format.json for view formatting

This is it, please enjoy the extension with new updates!

You can install it for Chrome and for Edge.