0

i have one sharepoint list. i have one column called action, which is a calculative column drived value from other

i want if it's yes then it should be green or if no then red.

is it possible via CSS code?

please help

1
  • Are you using SharePoint Online? Modern experience? Apr 5, 2020 at 4:31

1 Answer 1

0

Yes, it can be done in multiple ways :

If this is your SharePoint online environment, it can be achieved with just few clicks:

Select the column DDL(IsApproved) from the view -> Click on the Column Settings -> Click on the Format this column -> In the right panel click on the switch to design mode ->

Format column in SharePoint Online

From this UI formatting - we can generate the equivalent JSON code as well.

Using the content editor web part:

<script type="text/javascript">
var colorCode = document.getElementsByTagName("td")// finding all the TD tags
var i=0; 
for (i=0;i
{
if (colorCode[i].className=="ms-vb2")  
{ 
if (colorCode[i].innerHTML=="Not Started")//finding the word to which the color has to be set
{ 
colorCode[i].style.backgroundColor='lightblue'; // setting the color depending upon the value
colorCode[i].style.color='Black'; // setting the color of the words inside the content                                     
} 
if (colorCode[i].innerHTML=="Started")  
{ 
colorCode[i].style.backgroundColor='Brown';
colorCode[i].style.color='Black';
} 
if (colorCode[i].innerHTML=="In Progress")  
{ 
colorCode[i].style.backgroundColor='Orange';
colorCode[i].style.color='Black'; 
} 
if (colorCode[i].innerHTML=="Completed")  
{ 
colorCode[i].style.backgroundColor='green';
colorCode[i].style.color='Black'; 
} 
if (colorCode[i].innerHTML=="Deffered")  
{ 
colorCode[i].style.backgroundColor='Red'; 
colorCode[i].style.color='Black'; 
} 
} 
}

Source:

Change the Color of a Column in a List in SharePoint

Using CSS and jquery:

$(document).ready(function(){

$Text = $(“td .ms-vb2:contains(‘Yes’)”).filter(function() {

return $(this).text() == “Yes”;})

$Text.parent().css(“background-color”, “#00FF66”);

$Text = $(“td .ms-vb2:contains(‘No’)”);

 $Text.parent().css(“background-color”, “#FF0000”);

 });

For details steps to the below article :

Changing colors in SharePoint List Rows – Conditional Formatting in SharePoint 2013/Online

Using the conditional calculated column:

=IF(Account="Hourly"," <div style="color:red;">Hourly</div>", IF(Account="Silver"," <div style="color:CCC2C2;">Silver</div>", IF(Account="Gold"," <div style="color:D9A441;">Gold</div>")))))

Here "Account" is the column name that has Dropdown value like hourly, silver, Gold - similarly, you just can have yes and no and modify the formula.

Reference URL :

Calculated Column to change text color in a custom list

Refer below code using JSON formatting(using JSON column formatting):

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
"class": "=if(Number([$StartDate]) == 0, 'sp-field-severity--blocked', if(@currentField == 'Yes','sp-field-severity--good','sp-field-severity--blocked')) + ' ms-fontColor-neutralSecondary'"

  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(Number([$StartDate]) == 0, 'Warning', if(@currentField == 'Yes','CheckMark','Warning'))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

Reference Source :

JSON Conditional formatting for Column

Here is a very good article from Microsoft with bunch examples about the conditionally change the color of the column text:

Use column formatting to customize SharePoint

6
  • I am using SharePoint 2016. What would be the best way..? Apr 5, 2020 at 9:02
  • is there any way that i can just put some code in script editor? i have already customized column like their width etc? Apr 5, 2020 at 10:59
  • You can use the above javascript code in the script editor or content editor web part... we can apply color coding in the calculated column itself but after June 2017 public update, custom html does not support in calculated column from SharePoint 2013, 2016 versions onwards, otherwise it would have very easy in calculated column itself.
    – SP 2022
    Apr 5, 2020 at 18:57
  • Hello Thanks for response.. i will add this jquery but i want to knw the process to add this in SharePoint and also this code doesn't specify the column name. 😔,. Pls help me with the same Apr 5, 2020 at 19:10
  • Refer this link, it explained how to use:sharepoint-works.blogspot.com/2012/05/…
    – SP 2022
    Apr 6, 2020 at 1:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.