Sharepoint: Apply background color to custom list column based on other column value
Today we are going to learn how to apply the background color to a custom list column based on other column value, firstly, I tried this scenario using calculated formula column type but some javascript code is needed to render the background color based on calculated formula value, so I did some research and come up with the best easy way…..
STEPS:
I have created a simple custom list and name it as ‘My List‘
Modified the ‘Title‘ column name as ‘Student Name‘
Created one more column ‘Subject‘ which is of type single line text
Also, created one column ‘Marks‘ which is of type Number min is 1 and max is 100
Open the AllItems.aspx page using Sharepoint Designer 2007
Select the list, right click and Convert into XSLT mode
Write the XSL condition in between the ‘Subject‘ TD tag as show in the below image
Here goes the XSL code……
<!–custom code for background color starts–>
<xsl:choose>
<xsl:when test=”@Marks >=’70′”>
<xsl:attribute name=”style”>background-color:Green;</xsl:attribute>
</xsl:when>
<xsl:when test=”@Marks <=’70′ and @Marks >=’50′”>
<xsl:attribute name=”style”>background-color:Yellow;</xsl:attribute>
</xsl:when>
<xsl:otherwise>
<xsl:attribute name=”style”>background-color:Red;</xsl:attribute>
</xsl:otherwise>
</xsl:choose>
XSL condition in Sharepoint Designer 2007
Output:
Background color to Sharepoint Custom List column based on Marks
