SharePoint Online: List Conditional Formatting in Classic Experience

  • Article

In SharePoint Online, Conditional formatting of column in a list is only available in modern experience using JSON based Column Formatting. But if you are using classic experience then the only available option is JavaScript.

This article, is going to show you how to format SharePoint list column, based on its value means conditional formatting of column.

Suppose you have a list with two columns 

  1.  Subject 
  2.  PercentageScore.

If PercentageScore >=60, Show GREEN Symbol. 

If PercentageScore >=33 AND PercentageScore < 33, Show YELLOW Symbol 

If PercentageScore <=33 Show RED Symbol. 

Below is the code

<style>
 .greenSymbol {
 height: 18px;
 width: 18px;
 background-color: Green;
 border-radius: 50%;
 display: inline-block;
 } 
 .redSymbol {
 height: 18px;
 width: 18px;
 background-color: Red;
 border-radius: 50%;
 display: inline-block;
 } 
 .yellowSymbol {
 height: 18px;
 width: 18px;
 background-color: Yellow;
 border-radius: 50%;
 display: inline-block;
 } 
</style>
 
<script type="text/javascript">
 SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function(){
 (
 function () {
 var condFieldCtx = {};
 condFieldCtx.Templates = {};
 
 condFieldCtx.Templates.Fields = {
 "PercentageScore": {"View": PercentageScoreFormat},
 };
  
 SPClientTemplates.TemplateManager.RegisterTemplateOverrides(condFieldCtx);
 }  
 )();
 /*Project Scope*/
 function PercentageScoreFormat(ctx){
 var PercentageScoreValue = ctx.CurrentItem.PercentageScore;
 if(PercentageScoreValue >= 60){
 return "<div style='text-align:center'><span class='greenSymbol'></span></div>";
 }
 if(PercentageScoreValue >= 33 && PercentageScoreValue < 60  ){
 return "<div style='text-align:center'><span class='yellowSymbol'></span></div>";
 }
 if(PercentageScoreValue <= 33){
 return "<div style='text-align:center'><span class='redSymbol'></span></div>";
 }
 else{
 return ctx.CurrentItem.PercentageScore;
 }
 }
 })
</script>

 

Output: