{"id":2485,"date":"2017-12-01T09:50:31","date_gmt":"2017-12-01T08:50:31","guid":{"rendered":"http:\/\/www.itidea.nl\/?p=2485"},"modified":"2017-11-27T09:51:03","modified_gmt":"2017-11-27T08:51:03","slug":"spfx-column-formatting-using-json-blur-field","status":"publish","type":"post","link":"https:\/\/www.itidea.nl\/index.php\/spfx-column-formatting-using-json-blur-field\/","title":{"rendered":"SPFx Column formatting using JSON – blur field"},"content":{"rendered":"

Recently a new feature called column formatting is released.
\nColumn formatting changes how data in a list item is displayed. It uses a JSON object that describes the element(s) that are displayed.<\/p>\n

The basics of column formatting can be found in the Microsoft docs ‘Use column formatting to customize SharePoint<\/a>‘.<\/p>\n

A while ago I created a post<\/a> about a really simple SPFx field customizer extension which could blur the contents of a field and make the contents of the field readable again when hovering over the field.
\nSince this is a purely CSS solution it should be a candidate for column formatting.<\/p>\n

Needed<\/h4>\n

The JSON of a field has to reference a custom class which implements the style to blur the contents of the field and a style definition for the :hover selector to make the contents of the field readable again when hovering over the field.<\/p>\n

That’s all!<\/p>\n

The documentation lists the predefined classes<\/a> one can use, but we need to reference our own.<\/p>\n

To reference a custom style sheet I use an SPFx Application Customizer which references the style sheet at the page level.
\nThe SCSS file can be placed in the SPFx Application Customizer project, but then all style sheet classes will be post-fixed with a unique random string. This is the smart way SPFx avoids conflicting CSS definitions, but it’s quite impossible to reference the appropriate class in the JSON object, because the post-fix will change every time the SCSS file is compiled again into CSS.<\/p>\n

So I’m going to deploy the style sheet to Azure in this case so keep the class names as I like. The downside of this is that I’m fully responsible to avoid conflicting CSS definitions. Therefor SCSS is used to create nested CSS rules and I try to create a unique parent.<\/p>\n

Style definition<\/h5>\n

The contents of the SCSS file looks like this:<\/p>\n

\r\n.ITIdeaGlobal {\r\n .blurredCell {\r\n  background-color: #e5e5e5;\r\n  display: inline-block;\r\n  filter: blur(2.5px);\r\n  margin-left: 3px;\r\n }\r\n .blurredCell:hover {\r\n  filter: none;\r\n  }\r\n}\r\n<\/pre>\n
Reference the style sheet<\/h5>\n
The SPFx Applicaton Customizer class is implemented as:<\/p>\n
\r\nexport default class GlobalCssApplicationCustomizer\r\n extends BaseApplicationCustomizer<IGlobalCssApplicationCustomizerProperties> {\r\n\r\nprivate _cssUrl: string = "https:\/\/itideadev.azurewebsites.net\/css\/ITIdeaGlobalSASS.css";\r\n\r\n@override\r\npublic onInit(): Promise<void> {\r\n  console.log("Adding ITIdeaGlobalCss");\r\n\r\n  let linkTag: HTMLLinkElement = document.createElement("link");\r\n  linkTag.href = this._cssUrl;\r\n  linkTag.rel = "stylesheet";\r\n  document.getElementsByTagName("head")[0].appendChild(linkTag);\r\n\r\n  console.log("Added ITIdeaGlobalCss");\r\n\r\n  return Promise.resolve();\r\n }\r\n}\r\n<\/pre>\n
The code adds a link tag to the <head> element of the page and references the css file at the location specified.<\/p>\n
Change the display of the field<\/h5>\n
Now the css classes can be referenced in the JSON object to display a field in SharePoint.
\nTo demonstrate this a number field is created in a SharePoint list.
\nThen open the column formatting pane by selecting the drop down menu of the heading of the field and select ‘Format this column’ in ‘Column settings’ as show in figure 1.<\/p>\n
\"\"<\/a><\/p>\n
Figure 1 – Format this column<\/p>\n
JSON can be added in the box shown in Figure 2.<\/p>\n
\"\"<\/a><\/p>\n
Figure 2 – JSON object<\/p>\n