One of the announcements during Microsoft Ignite was ability to apply column formatting (conditional formatting, actions links) using JSON definitions, without JavaScript code and Field Customizers.
Now it's rolling out and I want to combine some thoughts and known information on this type of customization.
Purpose
The purpose of declarative column formatting is to apply some styling to the cell based on its value/content and some conditions.One of the most popular use cases might be
- Highlight wit different colors/icons tasks statuses
- Add action icon to send email to project owner
- Display task completion with "progress bar"
- And many more...
Who can use it
Anyone who's familiar with JSON. But most probably this functionality will be used by so called citizen developers or power users.Features
"Declarative" formatting means that you cannot use scripting (JavaScript) in you scenarios. The reason for that is obvious - it is not secure and may lead to script injections to the page.However it's still a very functional feature that will allow to implement most standard scenarios. So, what can you do with formatting?
- Apply the formatting to different types of columns - Single line of text, Number, Choice, Person or Group, Yes/No, Hyperlink, Picture, Date/Time, and even item Title and document Name
- Select what HTML element to use to display the cell - div, span, a, img, svg, path. img, svg and path elements give you ability to create unlimited number of icons, images and shapes to display the data in the way you want. For example (I haven't tried, and it definitely will be a complicated task), someone could even try to create Sparklines using this feature
- Apply CSS styles to the cell's element
- Apply CSS classes to the cell's element
- Use Office UI Fabric Icons
- Add link actions to the cell
- Nest rules and elements one in one
Resources
The greatest resource to get full information on declarative conditional formatting is Official documentation. It contains full description of what is available and what is not. And also provides samples of some basic but super helpful scenarios that can be used right away.For those who wants to dig into JSON structure - you can go directly to JSON schema
Also, there is a page to play with formatting. Additionally, there is a GitHub repo for the examples on how to apply different types of formatting.
And lastly, look at Column Formatting Web Part by Chris Kent
Some Q&As
Do I need to activate some feature to make this functionality available?
No. It's rolling out and will be available by default. I don't even think that there will be an option to disable it.Is it a replacement of Field Customizer Extension?
No. Declarative formatting can be used in scenarios that do not assume any scripting, and probably it will be used by power users, but not developers. If you're a developer or you need a complicated custom logic - use Field Customizers.How does this formatting applied to Site Columns?
Any formatting is applied on List level. It means that if you have column Site Column 'Income' in multiple lists you can apply different formatting in each list, or apply formatting in single list only. The same is true for Field Customizers if you use CSOM to apply it to the column in specific list.What if I apply both Declarative Formatting and Field Customizer...
To be honest - I haven't tried as my tenants don't have declarative formatting yet. But I think that someone will win. And I bet on Field Customizer.When should I expect this feature on my tenant?
It's rolled out to First Release tenants and will be rolling out to GA soon.That's all I have on Declarative column formatting for now.
Have fun!
Comments