Forum Discussion
SharePoint List color rows based upon date ranges relative to the Due Date
I would like to know how to color the rows on my SharePoint list.
I have a Due Date column in my list
Here is what I am looking to do:
If Today's date is within 14 days of the Due Date then the entire row should be the color red
If Today's date is between 15 days and 21 Days out from the Due Date, then the entire row color should be orange
If Today's date is between 21 days and 30 days out from the Due Date, then the entire row should be yellow
If Today's date is 31 days or more out from the Due Date, then the entire row should be Green
I am assuming I will be using Client Side Rendering (I don't know I am guessing).
1. What files will I need to create (a .txt file or a .txt file that is converted to a .js file?
2. Will I have to use Content Editor Web Part to refernece the .txt or .js file?
For SharePoint 2013, you can use Client Side Rendering (CSR) which represents a rendering engine for list views.
You can refer the code samples given in below links and modify it according to your conditions:
- How to highlight the row in red if expiration date is passed for SharePoint 2013 list
- SharePoint 2013 on-prem conditional formatting row by dueDate
Please click Mark as Best Response if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
7 Replies
You can easily achieve this using SharePoint JSON View formatting.
You need to use additionalRowClass to highlight the row based on conditions. Check my answers given at below links. It should help you to get started with it:
- Need Help with “Format View” feature in Modern List based on Condition
- color formatting a date column - Refer the date conditions to check how you can use "@now" in JSON
Please click Mark as Best Response if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
Are you using SharePoint Online and modern lists experience? For modern lists experience view formatting is done with JSON.
Matti PaukkonenI am not. We are using SharePoint 2013 on-premise
For SharePoint 2013, you can use Client Side Rendering (CSR) which represents a rendering engine for list views.
You can refer the code samples given in below links and modify it according to your conditions:
- How to highlight the row in red if expiration date is passed for SharePoint 2013 list
- SharePoint 2013 on-prem conditional formatting row by dueDate
Please click Mark as Best Response if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
