April 7, 2021

aura:if expression check inside aura:iteration in Salefsorce

 Apex Class:
public class AccountListController {
 
    @AuraEnabled
    public static List < Account > fetchAccts() {
        return [ SELECT Id, Name, Industry, Number_1__c, Number_2__c FROM Account LIMIT 10 ];
    }
    
}

Aura Component:
<aura:component implements="force:appHostable"  controller="AccountListController">
    
    <aura:attribute type="Account[]" name="acctList"/>    
    
    <aura:handler name="init" value="{!this}" action="{!c.fetchAccounts}"/>
    
    <table class="slds-table slds-table_bordered slds-table_cell-buffer">
        <thead>
            <tr class="slds-text-title_caps">
                <th scope="col">
                    <div class="slds-truncate" title="Account Name">Account Name</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate" title="Industry">Industry</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate" title="Number 1">Number 1</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate" title="Number 2">Number 2</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate" title="Number Check">Number Check</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.acctList}" var="a">
                <tr>
                    <td data-label="Account Name">
                        <div class="slds-truncate" title="">{!a.Name}</div>
                    </td>
                    <td data-label="Industry">
                        <div class="slds-truncate" title="">{!a.Industry}</div>
                    </td>
                    <td data-label="Number 1">
                        <div class="slds-truncate" title="">{!a.Number_1__c}</div>
                    </td>
                    <td data-label="Number 2">
                        <div class="slds-truncate" title="">{!a.Number_2__c}</div>
                    </td>
                    <td data-label="Number Check">
                        <div class="slds-truncate" title="">
                            <!-- Expressions for number check -->
                            <aura:if isTrue="{!a.Number_1__c == a.Number_2__c}">
                                Same Numbers
                                <aura:set attribute="else">
                                    Not Same Numbers
                                </aura:set>
                            </aura:if>
                        </div>
                    </td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>
</aura:component>

Aura JavaScript:

({
    fetchAccounts : function(component, event, helper) {
        var action = component.get("c.fetchAccts");
        action.setParams({
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.acctList", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    }
})


Output:


No comments:

Post a Comment