![The JSON Object
"target": "_blank",
"href": {
"operator": "+",
"operands": [
"https://www.bing.com/search?q=",
"@currentField"
]](https://image.slidesharecdn.com/columnformatter-181117212435/85/Column-Formatter-in-SharePoint-Online-26-320.jpg)
Uploaded byMark Rackley
Column Formatter in SharePoint Online
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.
![[Lonsdale/Jugo] Using Column Formatting in Lists and Libraries](https://cdn.slidesharecdn.com/ss_thumbnails/yxiyq4sttoi2sgpxx9o7-signature-d4523b3bf020616e67040d2a940ba8bf9aeab187b20da49956548f98de22ea12-poli-180606121949-thumbnail.jpg?width=640&height=640&fit=bounds)
Column Formatter in SharePoint Online
- 1. Mark Rackley mrackley@paitgroup.com Customizing SharePointUsing the Column Formatter (and view formatter… shhhh... I snuck this in…)
- 2.
- 3. © 2015 PAITGroup 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 PAITGroup 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 isthe Column Formatter? • Column Formatter Basic Usage • Column Formatter Essentials • What’s this view formatter?? • Demos, Demos, Demos
- 6. What is theColumn Formatter
- 7. Column Formatter • JSONobject 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 • JSONobject 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 • JSONobject 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 theColumn 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 inSite Design < Column Formatter Goes Here >
- 12. Column Formatter Capabilities ApplyCustom Formatting Apply conditional formatting Create clickable actions Create simple data visualizations Create a button to launch a Flow
- 13. Column Formatter vsSPFx 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 • Accessingthe Column Formatter • FROM LIST VIEW
- 15. Column Formatter • Accessingthe Column Formatter • FROM LIST SETTINGS
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 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.
- 28.
- 29. Supported Field Types Singleline of text Number Choice Person or Group Yes/No Hyperlink Picture Date/Time Lookup Title (in Lists)
- 30. Unsupported Field Types ManagedMetadata Filename (in Document Libraries) Calculated Retention Label
- 31.
- 32.
- 33.
- 34.
- 35.
- 36. children Optional property thatspecifies child elements of the element specified by “elmType” Array of element objects Property is ignored if the element has the “txtContent” property
- 37.
- 38. For more information ChrisKent’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.
- 40.