[SalesForce] Conditional coloring on a lightning component

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">
<p>
    <b> My Enrolments  </b>
</p>
<br>
</br>
<table class="slds-table slds-table--bordered slds-max-medium-table--stacked" >
    <thead>
        <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>  -->
        </tr>
    </thead>
    <tbody>
        <aura:iteration var="cell" items="{!v.agreementRows}">
            <tr>
                <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>
            </tr>
        </aura:iteration>
    </tbody>
</table>

Best Answer

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;
}
/*etc*/

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();
agreements.forEach(function(agreement){
  agreement.displayClass = (agreement.Progress__c > 74 ? ' tier-three ' : 
                            agreement.Progress__c > 49 ? ' tier-two   ' : 
                            agreement.Progress__c > 0  ? ' tier-one   ' : '' );
});
component.set("v.agreementRows",agreements);

Then you can just have this in your markup:

<tr class="{!cell.displayClass}">
Related Topic