function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Sylvie SerpletSylvie Serplet 

If statement not working in Lightning Component Javascript Controller

Hi,
I have a Lightning Component that display a simple value and need a conditional formating depending of the value. The component display the correct value but my if statement to set the color is not working. Could you please tell me what is wrong with my code? Thanks in advance for your help.

Result (should be green)
User-added image
Component
<aura:component controller="MyCPDPointsThisYearAPEXController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >
 
    <aura:attribute name="status" type="String" /> 
    <aura:attribute name="myPoints" type="CPD_Points_Total__c" />
    <aura:attribute name="ID" type="String" />      
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <lightning:card title="{! 'My CPD Points for ' + v.myPoints.CPD_Year__c}" >    
        <p class="slds-p-horizontal--small slds-align_absolute-center" >
             <div aura:id="chart" >
                <lightning:layout >
                    <lightning:layoutitem class="{! 'points-block ' + v.status}" >
                        <div class="points">{!v.myPoints.Total_Points__c}</div>points  
                    </lightning:layoutitem>                                    
                </lightning:layout>
             </div> 
            </p>  
    </lightning:card>
</aura:component>

Javascript Controller
({
    doInit : function(component) {       
        
        var action = component.get("c.getMyPoints");    
        action.setParams ({
            ID :component.get("v.ID")                         
        })         
        action.setCallback(this, function(actionResult) {    
            component.set("v.myPoints", actionResult.getReturnValue());
            
        var status ;
            var totalpoints = "Total_Points__c";
            if (totalpoints > 25){
                status = "green";
            } else {
                status = "orange";
            }            
            component.set("v.status", status);

        });        
        
        $A.enqueueAction(action);     
    }
})
Style
.THIS .points-block {
	text-align: center;
    margin-right: 8px;
    padding: 8px 12px;
    border-radius: 0.25rem;
    border: solid 1px rgb(216, 221, 230);
} 
.THIS .points-block.green {
	color: #008000;
    border: solid 3px #008000;
} 
.THIS .points-block.orange {
	color: #ff6633;
    border: solid 3px #ff6633;
} 
.THIS .points {
	font-size: 32px;
	line-height: 32px;
	font-weight: 500;
    margin-right: 12px;
    margin: 0;
    padding: 0;
} 
.THIS .chart {
    position: relative;
    height: 40px;
}
APEX Controller
public class MyCPDPointsThisYearAPEXController {
     
   @AuraEnabled
    public static CPD_Points_Total__c  getMyPoints(Id ID){        
        
        if (ID ==null){
        return [select Id, CPD_Year__c, Total_Points__c from CPD_Points_Total__c where (Contact_ID_Test__c = 1 or Contact_ID_HO_Test__c = 1) and (CreatedDate = THIS_YEAR) LIMIT 1] ;     
        }
        
        List<CPD_Points_Total__c> points = [select Id, CPD_Year__c, Total_Points__c from CPD_Points_Total__c where (Id = :ID) and  (Contact_ID_Test__c = 1 or Contact_ID_HO_Test__c = 1) and (CreatedDate = THIS_YEAR) LIMIT 1] ;     
       
        if (points.size() ==0){
            return [select Id, CPD_Year__c, Total_Points__c from CPD_Points_Total__c where (Contact_ID_Test__c = 1 or Contact_ID_HO_Test__c = 1) and (CreatedDate = THIS_YEAR) LIMIT 1] ;     
        }else {            
            return points[0];
        }         
    }     
}

 
Best Answer chosen by Sylvie Serplet
Nayana KNayana K

Try below code
({
    doInit : function(component) {       
        
        var action = component.get("c.getMyPoints");    
        action.setParams ({
            ID :component.get("v.ID")                         
        })         
        action.setCallback(this, function(actionResult) {    
            component.set("v.myPoints", actionResult.getReturnValue());
            
        var myPoints = component.get("v.myPoints") ;
         var status;
            var totalpoints = myPoints.Total_Points__c;
            if (totalpoints > 25){
                status = "green";
            } else {
                status = "orange";
            }            
            component.set("v.status", status);

        });        
        
        $A.enqueueAction(action);     
    }
})

​var totalpoints = "Total_Points__c";
if (totalpoints > 25){ 
lines doesn't make sense! Because totalpoints > 25 always fails and will go to else block.

All Answers

Nayana KNayana K

Try below code
({
    doInit : function(component) {       
        
        var action = component.get("c.getMyPoints");    
        action.setParams ({
            ID :component.get("v.ID")                         
        })         
        action.setCallback(this, function(actionResult) {    
            component.set("v.myPoints", actionResult.getReturnValue());
            
        var myPoints = component.get("v.myPoints") ;
         var status;
            var totalpoints = myPoints.Total_Points__c;
            if (totalpoints > 25){
                status = "green";
            } else {
                status = "orange";
            }            
            component.set("v.status", status);

        });        
        
        $A.enqueueAction(action);     
    }
})

​var totalpoints = "Total_Points__c";
if (totalpoints > 25){ 
lines doesn't make sense! Because totalpoints > 25 always fails and will go to else block.
This was selected as the best answer
Sylvie SerpletSylvie Serplet
Hi Nayana, thank you so much. It works now.