Applies To: Office 365
Update
This solution is now officially a part of SharePoint PnP! Please use this repo for all updates, issues, contributions, and more. Whoo Whoo!
Modern listviews support the addition of custom formatting for most field types. This is an awesome feature designed to make custom formatting simpler and less administratively difficult than packaged solutions.
Unfortunately, the tooling is still very minimal. Users are given a simple text field within a panel to paste the JSON code and a preview and save button. The panel is clearly not designed to enable editing meaning that not only do users have to write code, they have to find someplace to do it.
The official suggestion is to use VS Code which will provide some auto completion using the standard schema. However, there are several downsides to this approach:
- Requires a desktop client to be installed
- Non developers that may have hung on past the initial mention of JSON are mostly gone by now
- Once you do get VS Code up and running and begin editing your JSON:
- The intellisense and syntax checking are very limited
- There is no preview of your format
- While some examples exist, there’s still a huge learning curve
I previously released a verbose schema which makes editing in VS Code a lot easier, but still doesn’t solve the preview problems, learning curve, or the need to use a tool outside of O365.
Column Formatter
Column Formatter is a SharePoint Framework client-side webpart I’ve created using React and Redux. It’s designed to give the full power of VS Code editing while providing easy to use templates and wizards all within the browser! The goal is to make writing and applying Column Formatting easier and quicker for both developers and end users.
Development Details
I originally set out to make an Application Customizer SPFx extension that would sit directly on the modern listview page. Unfortunately, there aren’t APIs available (at least that I could find) to load the CustomFormatter library on the page if none of the columns are using it yet, nor a way to trigger applying the formatting to the listview without actually changing the field’s CustomFormat value.
So I’ve extracted the CustomFormatter library into my project and am faking it by providing it only the dependencies it actually needs. While this gives me full control to enable “as you type” live preview of rendering, it also means that things could get out of sync with O365 development. For now, I’ll do my best to keep things updated but ultimately I’d like to be able to load the office CustomFormatter module on demand.
Similarly, I had to extract the styles of the modern listview and the unique classes for CustomFormatter.
The editor is a custom build of the Monaco Editor (the editor that powers VS Code). Getting this built as a module that worked in SPFx was a real challenge, but worth it because of the immense power it adds.
This was my first experience with Redux. It was hard to wrap my head around at first and there is a significant amount of boilerplate code required (largely to play nice with Typescript), but I wouldn’t do any React webpart of even minor complexity without it! It simplifies state management and makes additional iterations of features much easier.
What’s next
There are a few templates and wizards included currently, but there are way more that could be added. I plan to keep adding these and am open to both pull requests and suggestions.
I have submitted this webpart as an entry in the Hack Productivity 3 hackathon (Go vote for it, please!) which is why it’s currently hosted on my github. I’d like to get it included in SharePoint PnP if they’re open to it, although I’m not sure where it should go just yet.
More Information
You can find a lot more details about features and how to use Column Formatter in the ReadMe in the repo. I also created a demonstration video that covers a lot of the features:
Awesome, A very good job thanks theChrisKent
Awesome stuff Chris! Where did you find docs on Monaco? I just did a PR for a CodeEditor Propertypane control using the Ace editor (https://yetanothersharepointblog.wordpress.com/2017/12/23/code-editor-property-pane-control-for-spfx-webparts/). I could not find docs on how to use Monaco.
@russgove The Monaco Editor has pretty extensive documentation on it’s use and configuration here: https://microsoft.github.io/monaco-editor/api/index.html
However, getting it to load as a module within SPFx was not so simple. I was able to customize a build using Tim Kendrick’s loader project and then adding some polyfills and some other tweaks to get it added to my bundle and work within IE11 (https://github.com/timkendrick/monaco-editor-loader).
The Ace editor looks really cool though, hadn’t seen that one (might have saved myself some headaches!)
Very impressive tool, should be named SharePoint tool of the year, the apply to local list feature is à Killer feature too ?
[…] via Column Formatting Client-Side Web Part: Column Formatter — The Chris Kent […]
Any up coming tool for generating site designs 😀 ? Thanks again for your extension
Not from me directly, but Yannick Plenevaux (@yp_code) is working on something here: https://github.com/ypcode/sp-site-designs-studio
Hi Chris,
looked ad your github project. According to the readme I should be able to get the webpart at
https://github.com/SharePoint/sp-dev-solutions/blob/master/solutions/ColumnFormatter/assets/column-formatter.sppkg
But no luck. I am getting a 404 page. Any idea on this.
Looks to me it is a great project and would suit a whole lot of requirements that users may have.
Tia
Tia,
Thanks for pointing this out! I have updated the solution to add the missing file. Please let me know if you have any trouble. Thanks again!
[…] custom column formatting that does not require you to know JSON, I highly recommend Chris Kent’s column formatting web part that makes it easier to make […]
[…] custom column formatting that does not require you to know JSON, I highly recommend Chris Kent’s column formatting web part that makes it easier to make […]