Introducing SP Formatter: a Google Chrome extension which enhances your SharePoint Column (View) formatting experience
Column formatting allows you to customize look and feel for columns and views in modern SharePoint. That’s a cool feature and gives you a lot of space for applying nice styling for your SharePoint data. It’s called column formatting despite that you can customize views as well. You do not have to be a developer to use column formatting, yet you should have some knowledge of CSS and HTML. To learn more about this feature please read Use column formatting to customize SharePoint and check out an awesome list of community samples around column formatting.
To apply formatting, you should enter a special JSON into the textarea on a SharePoint list page. There is one thing here which I don’t like very much. As a developer, I expect that column formatting experience provides code suggestions (also called intellisense in developer world), live preview, search and replace, brace matching and some other things available in a normal integrated development environment. You can partially improve the situation if you edit your formatting JSON in Visual Studio Code with custom JSON schema applied. However even in that case, if you want to see how your column formatting looks like in SharePoint, you have to copy-paste it into SharePoint and click Preview, which is inconvenient. Also, the schema in Visual Studio Code lacks some additional features available in SP Formatter.
Of course, default SharePoint column formatting experience doesn’t provide rich editing features, because it’s simply a textarea element. To improve it I created SP Formatter - a Google Chrome extension which transforms default column formatting into the full-featured editor.
To see how it works in action please check out below short video:
For those who are familiar with Visual Studio Code and monaco editor, SP Formatter uses the same monaco editor component used by VSCode.
Let’s go through the main features of SP Formatter.
Live Preview
With SP Formatter you don’t have to click the Preview button every time when you want to see how your column formatting JSON looks like when applied to a list:
Instead, it gives you a preview as you type.
Suggestions (intellisense) based on Column or View formatting schema
Suggestions can be activated in two different ways. If you start typing a property name, you will see an inlined suggestion (if suggestions are available for this property). If you want to activate suggestions explicitly, you can press Ctrl+Space (it’s indicated in the video). Suggestions in SP Formatter go beyond default column formatting schema. SP Formatter adds below additional features to suggestions:
- css properties and values suggestions (based on the availability list)
- Office UI Fabric icon names suggestion
- adds value suggestion for rel, role, target attributes
- some txtContent suggestion - @currentField, @me, @now, etc.
This is how it works:
JSON validation with error messages
If you have your JSON schema wrongly formatted, you will receive a red indication in the right side panel:
Help tooltips
if you hover over an element, you will helper text about that particular property:
Hotkeys
You can use keyboard shortcuts (aka hotkeys) for some common operations:
- CTRL + Space: Explicitly request suggestions
- CTRL + F: Search
- SHIFT + ALT + F: Format document
- F1: Show command palette
- CTRL + Z, CTRL + Y: Undo\Redo
- and some others available in monaco editor. You can press F1 to show command palette and explore what else is available.
Here is a short demonstration:
And some other goodies
- Color highlights
- Line numbers
- brace matching
- collapsible regions
SP Formatter works in both SharePoint Online and SharePoint 2019 (which supports only column formatting, not view).
The source for the extension is available at GitHub here. Please use it for issues or questions.
Please install SP Formatter using below link and tell me what do you think: