Column formatting in SharePoint Modern List View

Requirement:

While working with one of SharePoint Modern UI project, there was requirement to display Reminder Date with red background color in  default List View, if it is due within next 7 days from today.

Challenge: 

JS link is the one way to meet the requirement. But in OOTB Modern List view, there isn't any option to reference JS link in Miscellaneous section which is available in Classic view.

Solution:

Using Column Formatting option, we've achieved the desired results. You can find this option while editing the column as shown in below screenshot.

Here, we need to write JSON code to format the field value. Here is code snippet to display "Reminder Date" field with red background and text color in white.

{

  "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",

  "elmType": "div",

  "debugMode": true,

  "txtContent": "@currentField",

  "style": {

       "color":  "=if([$Reminder_x0020_Date] <= @now+604800000, if([$Reminder_x0020_Date]                            >= @now,'#ffffff',''), '')",

"background-color":"=if([$Reminder_x0020_Date]<= @now+604800000,if([$Reminder_x0020_Date] >= @now,'#ff0000',''), '')" }

}

Note: 604800000 is in millisecond, equals to 7 days.

Output: Date column will be rendered in default list view as per below screenshot.

Limitation:

• It will not work with SharePoint Online Classic View.
• If formatting of the column is based on value of another column from the list, than that column must be available in List View.

If you have any questions you can reach out our SharePoint Consulting team here.