Applies to: Office 365

Column Formatter 1.2 is now available! Column Formatter is the Easy editor for modern listview Column Formatting. It is a free webpart available from SharePoint PnP that brings the full power of VS Code editing while providing easy to use templates and browsers all within the browser – and now it’s even better!

Quick start

• You can find the full details in the official Change Notes
• Here’s the updated package (no need to build it yourself)
• Deployment instructions
• Update instructions
• Full documentation
• The official repository

What’s new

Editor properties

Layout options

A height property was added in 1.1, and with 1.2 Column Formatter now supports full-width sections. With these changes you can dramatically increase the size of the editor on your page:

Line Numbers

You can optionally enable line numbers in the editor. This is especially helpful when working with longer formats:

Indent Guides

The editor has always had indent guides on by default, but now you can disable them if you prefer a “cleaner” code surface:

Mini Map

You can optionally enable the Mini Map navigation/preview in the editor. This is especially helpful for quickly scrolling through long formats:

Site column saving/loading

In addition to downloading, copying to the clipboard, saving to a document library, and applying directly to a list field, you can now save your format at the Site Column level. You can even have those changes pushed to all lists that are using your column!

You can, of course, also load site column formats as needed.

Wizards

With v1.2, Column Formatter now has 14 wizards/templates covering every column type:

New wizard: Donut

The new Donut wizard for number columns allows you to create dynamic donut or pie charts:

You can provide a custom range, size, colors, value display, and more.

This wizard is adapted from the number-piechart sample by Aaron Miao.

New wizard: Start Flow

The new Start Flow wizard makes it easy to create an inline button to launch a flow for a selected item:

Just provide the Flow id and then quickly customize the look and feel to make launching flows even easier for users.

This wizard is adapted from the generic-start-flow sample by Yannick Borghmans.

New template: Overdue Task

The new template Overdue Task takes the concept of highlighting a due date when it’s past due and demonstrates how to add an additional condition based on another column. In this case, the due date will only be highlighted if it’s both past due AND the status column isn’t Complete:

New wizard: Twitter Pic

The new wizard Twitter Pic makes displaying Twitter profile pictures super easy:

Now it’s even easier to go bug Marc or write a Dear Vesa style tweet!

Localization

Column Formatter is now more accessible than ever!

Thanks to PooLP, Column Formatter is available in French. Magnifique!

Also, thanks to Thomas Goelles, we’ve got German as well. Glücksschweine!

Everything else

• Theme options have moved to the property pane to clean up the editor and to ensure preferences are saved as expected.
• Each wizard has it’s own documentation page.
• In fact, there’s quite a bit more documentation in general.
• New wizard controls made for reuse:
  • Standard colors dropdown (UI Fabric colors)
  • Icons dropdown (UI Fabric icons)
  • Spin button with suffix
• Updated solution to use SPFx 1.4.1 and PnPJS
• Several minor bugs were murdered
• The Mini Map wizard was renamed to Tiny Map to avoid confusion with the new editor feature

Conclusion

If you’re interested in contributing, please do! If you find any bugs or have ideas or are lonely or have questions or whatever, please post in the Issues list – it is greatly appreciated!

Let me know what you think, thanks!