Mark Rackley presented on customizing SharePoint using column and view formatters. He discussed what column formatters are, how they can be accessed and used to format list views without changing the underlying data. He covered the basics of using the JSON schema including supported elements, field types, predefined classes and operators. The presentation concluded with demonstrations of column formatters.

1. Mark Rackley
mrackley@paitgroup.com
Customizing SharePoint Using the Column Formatter
(and view formatter… shhhh... I snuck this in…)

2. Thank you #SPSTC
sponsors!

3. © 2015 PAIT Group
Mark Rackley / Partner & CSO
• 20+ years software architecture and
development experience
• Office 365 MVP, SharePoint Junkie since 2007
• Event Organizer (www.collabsummit.org)
• Blogger, Writer, Speaker
• Podcaster (www.techsplaining.net)
@mrackley - www.MarkRackley.net - www.PAITGroup.com

4. © 2015 PAIT Group
The North American Collaboration Summit
Save 33% with Discount Code “SPSTC”
•50+ Speakers including
MVP’s from all over the
world
•70+ Sessions
•Optional 3rd day of full
day workshops
•Non-Profit event with
registrations starting at
$150

5. Agenda
• What is the Column Formatter?
• Column Formatter Basic Usage
• Column Formatter Essentials
• What’s this view formatter??
• Demos, Demos, Demos

6. What is the Column
Formatter

7. Column Formatter
• JSON object that helps you format your modern lists views
• It does not change the data in the list
• Anyone who can create and manage a list view can use column formatting
• It does not work on Classic views 

8. Column Formatter
• JSON object that helps you format your modern lists views
• It does not change the data in the list
• Anyone who can create and manage a list view can use column formatting
• It does not work on Classic views 

9. Column Formatter
• JSON object that helps you format your modern lists views
• It does not change the data in the list
• Anyone who can create and manage a list view can use column formatting
• It does not work on Classic views 

10. Benefits of the Column Formatter
Customize list views without having to be a developer
(Okay…. Fine… maybe you do need to be a developer.. I mean.. I know they say you don’t
need to be one, but have you ever seen a JSON object? How are non-devs support to
understand that? Maybe IIT Pros? But end users are going to struggle… good thing there is
cut and paste…)
Modern replacement for Calculated Fields
Modern replacement for many uses of the DataViewWebPart
Can deploy them in Site Designs

11. Column Formatter in Site Design
< Column Formatter Goes Here >

12. Column Formatter Capabilities
Apply Custom Formatting
Apply conditional formatting
Create clickable actions
Create simple data visualizations
Create a button to launch a Flow

13. Column Formatter vs SPFx Field Customizer
Field type Column formatting Field Customizer
Conditional formatting based on item values and
value ranges
Supported Supported
Action links Support for static hyperlinks that do not launch
script
Support for any hyperlink, including those that
invoke custom script
Data visualizations Support for simple visualizations that can be
expressed using HTML and CSS
Support for arbitrary data visualizations

14. Column Formatter
• Accessing the Column Formatter
• FROM LIST VIEW

15. Column Formatter
• Accessing the Column Formatter
• FROM LIST SETTINGS

16. Column Formatter Basic
Usage

17. The JSON Object

18. The JSON Object

19. The JSON Object

20. The JSON Object

21. The JSON Object

22. The JSON Object

23. The JSON Object
"style": {
"font-weight": "bold"
}

24. The JSON Object
"attributes": {
"class": "sp-field-severity--warning"
}

25. The JSON Object
"elmType": "a",
"target": "_blank",
"href": "https://www.bing.com"

26. The JSON Object
"target": "_blank",
"href": {
"operator": "+",
"operands": [
"https://www.bing.com/search?q=",
"@currentField"
]

27. Column Formatter
Essentials

28. Supported Elements (elmType)
div
span
a
img
svg
path
button

29. Supported Field Types
Single line of text
Number
Choice
Person or Group
Yes/No
Hyperlink
Picture
Date/Time
Lookup
Title (in Lists)

30. Unsupported Field Types
Managed Metadata
Filename (in Document
Libraries)
Calculated
Retention Label

31. Predefined Classes
sp-field-customFormatBackground
sp-field-severity--good
sp-field-severity--low
sp-field-severity--warning
sp-field-severity--severeWarning
sp-field-severity--blocked
sp-field-dataBars
sp-field-trending--up
sp-field-trending--down
sp-field-quickAction

32. Column formatting schema

33. Operators

34. Operators

35. Operators

36. children
Optional property that specifies child elements of the element specified by
“elmType”
Array of element objects
Property is ignored if the element has the “txtContent” property

37. children

38. For more information
Chris Kent’s Column Formatter
https://github.com/SharePoint/sp-dev-
solutions/tree/master/solutions/ColumnFormatter
Docs.Microsoft.com
https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting
Icons
https://developer.microsoft.com/en-us/fabric#/styles/icons
View Formatting
https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/view-formatting
Samples
https://github.com/SharePoint/sp-dev-list-formatting

39. Demos, Demos, Demos

40. thank you
questions?
WWW.MARKRACKLEY.NET@MRACKLEY
http://www.paitgroup.com
http://www.markrackley.net
mrackley@paitgroup.com
@mrackley