Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Column Formatter in SharePoint Online

126 views

Published on

Slidedeck from my introduction to the Column Formatter session. With links for samples and more information.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Column Formatter in SharePoint Online

  1. 1. Mark Rackley mrackley@paitgroup.com Customizing SharePoint Using the Column Formatter (and view formatter… shhhh... I snuck this in…)
  2. 2. Thank you #SPSTC sponsors!
  3. 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. 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. 5. Agenda • What is the Column Formatter? • Column Formatter Basic Usage • Column Formatter Essentials • What’s this view formatter?? • Demos, Demos, Demos
  6. 6. What is the Column Formatter
  7. 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. 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. 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. 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. 11. Column Formatter in Site Design < Column Formatter Goes Here >
  12. 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. 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. 14. Column Formatter • Accessing the Column Formatter • FROM LIST VIEW
  15. 15. Column Formatter • Accessing the Column Formatter • FROM LIST SETTINGS
  16. 16. Column Formatter Basic Usage
  17. 17. The JSON Object
  18. 18. The JSON Object
  19. 19. The JSON Object
  20. 20. The JSON Object
  21. 21. The JSON Object
  22. 22. The JSON Object
  23. 23. The JSON Object "style": { "font-weight": "bold" }
  24. 24. The JSON Object "attributes": { "class": "sp-field-severity--warning" }
  25. 25. The JSON Object "elmType": "a", "target": "_blank", "href": "https://www.bing.com"
  26. 26. The JSON Object "target": "_blank", "href": { "operator": "+", "operands": [ "https://www.bing.com/search?q=", "@currentField" ]
  27. 27. Column Formatter Essentials
  28. 28. Supported Elements (elmType) div span a img svg path button
  29. 29. Supported Field Types Single line of text Number Choice Person or Group Yes/No Hyperlink Picture Date/Time Lookup Title (in Lists)
  30. 30. Unsupported Field Types Managed Metadata Filename (in Document Libraries) Calculated Retention Label
  31. 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. 32. Column formatting schema
  33. 33. Operators
  34. 34. Operators
  35. 35. Operators
  36. 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. 37. children
  38. 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. 39. Demos, Demos, Demos
  40. 40. thank you questions? WWW.MARKRACKLEY.NET@MRACKLEY http://www.paitgroup.com http://www.markrackley.net mrackley@paitgroup.com @mrackley

×