I built component to display data in a table format.

I want the backgroud color as below depending on the value of 'Progress' If Progress >0 and < 49 background color RED If Progress >=50 and <74 background color YELLOW If Progress >=75 and < 100 background color GREEN

I do not have much understanding on CSS or HTML

My component

<aura:handler name="init" action="{!c.doInit}" value="{!this}" />
<aura:attribute name="agreementRows" type="Training_Agreement__c[]"/> 

<ltng:require styles="/resource/SLDS102/assets/styles/salesforce-lightning-design-system-ltng.css" 
                  scripts="/resource/Jquery" />

<div class="slds">
    <b> My Enrolments  </b>
<table class="slds-table slds-table--bordered slds-max-medium-table--stacked" >
        <tr class ="slds-text-heading--label"> 
            <td class = "boldHeader slds-cell-wrap slds-size--1-of-6">Qualification Name</td>
            <td class = "boldHeader slds-cell-wrap slds-size--1-of-6">Start Date</td>
            <td class = "boldHeader slds-cell-wrap slds-size--1-of-6">Expected End Date</td>   
            <td class = "boldHeader slds-cell-wrap slds-size--1-of-6">Progress</td>  
            <td class = "boldHeader slds-cell-wrap slds-size--1-of-6">Training Outcome</td> 
            <td class = "boldHeader slds-cell-wrap slds-size--1-of-6">Training Outcome Date</td>
            <!--<th><strong> Trainee </strong></th>
            <th><strong> Qualification </strong></th>
            <th><strong> Type </strong></th>
            <th><strong> Completed </strong></th>  -->
        <aura:iteration var="cell" items="{!v.agreementRows}">
                <td data-label="Qualification Name"> {!cell.Qualification_Name__c} </td>
                <td data-label="Start Date">
                    <ui:outputDate value="{!cell.Start_Date__c}" /> </td>
                <td data-label="Expected End Date"> 
                    <ui:outputDate value="{!cell.Expected_Completion__c}" /> </td>
                <td data-label="Progress"> {!cell.Progress__c}% </td>
                <td data-label="Training Outcome"> {!cell.Training_Outcome__c} </td> 
                <td data-label="Training Outcome Date"> 
                    <ui:outputDate value="{!cell.Training_Outcome_Date__c}" /> </td>

  • Hi Jay, please upvote one or more of these answers if they worked for you - it's the polite thing to do. – Caspar Harmer Apr 13 '17 at 21:32

Probably the cleanest way would be to make three css classes and add them to the agreement rows in the your javascript code.

Since you haven't provided that code, we can go for the add in the markup technique:

Create three css classes:

.THIS .tier-one {
  background-color: red;

Then in your iteration add this to the tr:

<tr class="{! cell.Progress__c gt 74 ? ' tier-three ' : 
              cell.Progress__c gt 49 ? ' tier-two   ' : 
              cell.Progress__c gt 0  ? ' tier-one   ' : ''}">

This is a use of nested terniary operators that could get messy, but I've tried to keep it neat for you.

EDIT An alternative technique:

Iterate the rows and add the classes in your server method call handler. This assumes you can add properties to your sObject class. If this proves to be problematic, change it's type to a generic object.

In your callback, I'm assuming you are setting agreementRows from your response. Just before you do that, do this:

var agreements = response.getReturnValue();
  agreement.displayClass = (agreement.Progress__c > 74 ? ' tier-three ' : 
                            agreement.Progress__c > 49 ? ' tier-two   ' : 
                            agreement.Progress__c > 0  ? ' tier-one   ' : '' );

Then you can just have this in your markup:

<tr class="{!cell.displayClass}">
  • Thanks Caspar, I have added that piece of code didn't work. – Jay Weera Apr 13 '17 at 1:55
  • I have added my original code for the component. – Jay Weera Apr 13 '17 at 1:59
  • So are the cells rendering? Just the colors not working? Have you inspected the rows? Progress needs to be an integer for the expressions to work. Have you tried just hard-coding one of the classes to check they are working? Also, you need to make sure that the css class is more specific than any parent classes - get around this if you need by adding !important for each css statement – Caspar Harmer Apr 13 '17 at 2:02
  • <td class="{!cell.Progress__c >75 !cell.Progress__c <100" tier-three" cell.Progress__c >49 !cell.Progress__c <74 "tier-two" cell.Progress__c>0 !cell.Progress__c <49 "tier-one"}" data-label="Progress"> {!cell.Progress__c}% </td> – Jay Weera Apr 13 '17 at 2:09
  • 1
    That won't work - {! is only needed once. also, I've done it in the tr, not td. Use my exact syntax – Caspar Harmer Apr 13 '17 at 2:12

you could do the validation in your client side controller to determine the class name of your element: (in your callback, evaluate the response value from your apex class if it is an integer)


   cmp.set("v.classname", "some-class-name");
   cmp.set("v.classname", "someother-class-name");
   cmp.set("v.classname", "zero-class-name");

and in your component, add the class name attribute :

<aura:attribute name="classname" type="String" />

and populate the attribute name in the iteration with:

<tr class="{!v.classname}" />

and of course, dont forget to add the css color values in the stylesheet

  • Actually, that wouldn't work. You have to add it to the rows you are iterating through. – Caspar Harmer Apr 13 '17 at 2:13

Try this ;)


<aura:iteration var="cell" items="{!v.agreementRows}">
  <tr class="{! ((50 > cell.Progress__c)? 'lt50': ((75 > cell.Progress__c)? 'lt75': 'gt74'))  }">
    <td data-label="Progress"> {!cell.Progress__c}% </td>


.THIS .lt50{
  background-color: red;

.THIS .lt75{
  background-color: yellow; 

.THIS .gt74{
  background-color: green;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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