Conditional coloring on a lightning component

Question

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>

Answer 1

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}">

Answer 2

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)

controller.js

if(response.getReturnValue()>0){
   cmp.set("v.classname", "some-class-name");
}
if(response.getReturnValue()<0){
   cmp.set("v.classname", "someother-class-name");
}
else{
   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

Answer 3

Try this ;)

Component

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

CSS

.THIS .lt50{
  background-color: red;
}

.THIS .lt75{
  background-color: yellow; 
}

.THIS .gt74{
  background-color: green;
}