Column Formatting VS SPFx Field Customizer

By João Ferreira Nov 23, 2017 Development, Office 365 2 Comments

If there is something that SharePoint cannot be accused of is to be a static platform, new features are released weekly and sometimes it’s hard to keep up with all the new functionalities.

With so many new features seem that some of them are doing the same thing as the Column Formatting and the SPFx Customizer.

Both features were released this year and both are used to format data in SharePoint lists and even though the result might be similar the purpose of each one is different.

Column Formatting

Column formatting allow you to easily format data displayed on list columns, it does not require much technical knowledge other than JSON and the principles of HTML tags and CSS formatting.

This feature can be used by anyone with permissions to manage views in a list and allows a predefined set of HTML elements and attributes which is enough to highlight the important information from lists.

The formatting is not available to all default column types, and excluded from this feature are Managed Metadata, Filename (in Document Libraries), Calculated Fields and Retention Label, all the other column types can be modified by the column formatting.

The column formatting feature is only available for the modern view of lists and it can be defined to new or existent columns.

Field Customizer

The Field Customizer is more powerful when compared with the Column Formatting. It allows custom code, however it’s harder to setup and requires SPFx development knowledge other that higher permissions to be installed and applied to the lists.

The Field Customizer does not present any limitation in terms of HTML elements and attributes that can be used. With this method you can use JavaScript libraries to format the data however it brings a small limitation, columns being rendered with the filed customizer might have a small delay to display the information.

This “limitation” is part of the design and exists to avoid displaying to different types of data while the formatting code is being executed.

Example

In the Image bellow I have my events list with the name of the event (text), it’s location (text) and the person assigned to it (person).

The Assigned To column is being formatted with the Column Formatting, using the properties returned by the person type, the profile picture was added to the column next to the name. Bellow is the code being used to generate the profile picture.

{
   "elmType": "div",
   "children": [
   {
      "txtContent": "@currentField.title",
      "elmType": "img",
      "attributes": {
      "src": 
	  {
	     "operator": "+",
	     "operands": [
		    "/_layouts/15/userphoto.aspx?size=S&username=",
		    "@currentField.email"
	     ]
         } 				   
      },			
      "style": {
         "padding-right": "8px",
         "width":"32px",
         "height":"32px"
      }            
   }
   ]
}

You can learn more about the Column Formatting options from the official documentation that includes a lot of examples.

The Location column is being formatted using the Field Customizer that adds the temperature for the city to the column using the jQuery Weather sample available at the PNP GitHub repository, you can download it from here.

Conclusion

Both methods have their pros and cons but they are an awesome feature added to the modern experience and in my opinion, this might be the feature that will convince the users to abandon the classic experience in favor of the modern one.

Hand vector created by Freepik