1. Office 365 Column Formatting (with Column Formatter)
Chris Kent
Office 365 Practice Lead

2. “Me” Indianapolis, IN @theChrisKent theChrisKent.com
Office Development
Office 365 Practice Lead
@theChrisKent
Can I possibly get my name on a single slide even more? Wow.
“Me”
theChrisKent.com

3. O365 Column Formatting
Declarative modern listview customization

4. The Modern Listview No XSLT Responsive No Calculated Column Trickery
Fancy
Boring

5. Dapper
The Modern Listview

7. JSON Format (Totally NOT custom code)
Elements – elmType
div, span, a, img, svg, path, button
Content - txtContent
Attributes - attributes
class, href, src, rel, target, title, role, d, aria, iconName
Style - style
Children – children
Operators & Operands
basic math, comparison, conversion, logical

8. OOTB Column Formatting
Demo
OOTB Column Formatting

9. Column Formatting vs Field Customizer
Customization
Column Formatting
Field Customizer
Conditional Formatting based on item values
Supported

10. Column Formatting vs Field Customizer
Customization
Column Formatting
Field Customizer
Conditional Formatting based on item values
Supported
Action Links
Static links (no script)
Any type of link

11. Column Formatting vs Field Customizer
Customization
Column Formatting
Field Customizer
Conditional Formatting based on item values
Supported
Action Links
Static links (no script)
Any type of link
Visualizations
Simple Visualizations (HTML & Styles)
Whatever!

12. Column Formatting vs Field Customizer
Customization
Column Formatting
Field Customizer
Conditional Formatting based on item values
Supported
Action Links
Static links (no script)
Any type of link
Visualizations
Simple Visualizations (HTML & Styles)
Whatever!
Page Context
Full context!

13. Column Formatting vs Field Customizer
Customization
Column Formatting
Field Customizer
Conditional Formatting based on item values
Supported
Action Links
Static links (no script)
Any type of link
Visualizations
Simple Visualizations (HTML & Styles)
Whatever!
Page Context
Full context!
JS Libraries
Nope
Go for it!
Custom CSS Classes
Nope, limited subset & inline styles
Interactivity
Nope (not even hover)

14. Column Formatting vs Field Customizer
Customization
Column Formatting
Field Customizer
Conditional Formatting based on item values
Supported
Action Links
Static links (no script)
Any type of link
Visualizations
Simple Visualizations (HTML & Styles)
Whatever!
Page Context
Full context!
JS Libraries
Nope
Go for it!
Custom CSS Classes
Nope, limited subset & inline styles
Interactivity
Nope (not even hover)
Developer Required
“No”
Yes
Solution Deployment
Not needed
Required
Use Column Formatting whenever possible, but know it’s limits

15. SharePoint Patterns & Practices
Learn. Reuse. Share.

17. Column Formatter Easy editor for modern listview Column Formatting
github.com/SharePoint/SP-Dev-Solutions/tree/master/Solutions/ColumnFormatter