0

This is what I have implemented:

CMP:

<aura:attribute name="displayRecs" type="List" />
<aura:attribute name="defaultText" type="String" default="No notifications at this moment!"/>
 <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

<table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
<thead style="background-color: wheat;">
    <tr class="slds-text-heading--label">
        <th scope="col"><div class="slds-truncate" title="Name">Name</div></th>
        <th scope="col"><div class="slds-truncate" title="Type">Type</div></th>
        <th  scope="col"><div class="slds-truncate" title="Created By">Created By</div></th>
        <th scope="col"><div class="slds-truncate" title="Phone">Phone number</div></th>
    </tr>
</thead>
<tbody>
    <aura:if isTrue="{!(v.displayRecs != null) }">
    <aura:iteration items="{!v.displayRecs}" var="rec">
        <tr>
            <td style="width: 40%"><div class="slds-truncate" title="{!rec.Name}">{!rec.Name__c}</div></td>
            <td><div class="slds-truncate" title="{!rec.Type__c}”>{!rec.Type__c}</div></td>
            <td><div class="slds-truncate" title="{!rec.CreatedBy.Name}”>{!rec.CreatedBy.Name}</div></td>
            <td><div class="slds-truncate" title="{!rec.CreatedBy.Phone}">{!rec.CreatedBy.Phone}</div></td> 
        </tr>
    </aura:iteration>
</aura:if>


<aura:if isTrue="{!(v.displayRecs == null) }">
    <tr>
        <td><div class="slds-truncate" title="Default Value" scope="col">No notifications at this moment!</div></td>
    </tr>
</aura:if>

</tbody>

JS controller:

({
doInit : function(cmp, event, helper) {
    var action = cmp.get('c.getOrangeRecs');
    action.setCallback(this, function(response){
        var state = response.getState();
        if (state === "SUCCESS") {
            cmp.set('v.displayRecs',response.getReturnValue());
        }
    });
    $A.enqueueAction(action);
 } 
})

Apex Controller:

@AuraEnabled
public static List<Orange__c> getOrangeRecs(){
    List<Orange__c> newList = [Select Name, Type__c, FlagIt__c,
                                    CreatedDate, CreatedBy.Name,  
                                    FROM Orange__c WHERE FlagIt__c =: FALSE
                                    ORDER BY CreatedDate DESC];
    System.debug('Data:' +newList);
    return newList;

}

First aura:if is working as expected, but I am not sure why the second one not displaying the static text.

Also tried to implement using <ui:outputText value="{!v.myData}" /> which didn't work either. What's wrong in here? Do I need to implement in different way?

1 Answer 1

1

Placing consecutive aura:if next to each other may cause issues. Instead, use "else":

    <aura:if isTrue="{!(v.displayRecs != null) }">
        <aura:iteration items="{!v.displayRecs}" var="rec">
            <tr>
                <td style="width: 40%"><div class="slds-truncate" title="{!rec.Name}">{!rec.Name__c}</div></td>
                <td><div class="slds-truncate" title="{!rec.Type__c}”>{!rec.Type__c}</div></td>
                <td><div class="slds-truncate" title="{!rec.CreatedBy.Name}”>{!rec.CreatedBy.Name}</div></td>
                <td><div class="slds-truncate" title="{!rec.CreatedBy.Phone}">{!rec.CreatedBy.Phone}</div></td> 
            </tr>
        </aura:iteration>
        <aura:set attribute="else">
        <tr>
            <td><div class="slds-truncate" title="Default Value" scope="col">No notifications at this moment!</div></td>
        </tr>
        </aura:set>
    </aura:if>

Edit: The result of a query is never null. To use your logic, set the attribute to null when there are no results:

({ doInit : function(cmp, event, helper) { 
        var action = cmp.get('c.getOrangeRecs');
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS" && response.getReturnValue().length > 0) {
               cmp.set('v.displayRecs',response.getReturnValue()); 
             } else {
               cmp.set('v.displayRecs', null);
             }
         }); 
    $A.enqueueAction(action);
 } 
})
3
  • Let us continue this discussion in chat.
    – SatyaV
    Commented Aug 30, 2017 at 21:05
  • @ArnoldJr. The result of a query is never null. In your callback, set the attribute to null when length is zero. I'll edit this in my answer.
    – sfdcfox
    Commented Aug 30, 2017 at 21:44
  • AWESOME! Thank you very much! My 4 hours long work is fruitful now! :)
    – SatyaV
    Commented Aug 30, 2017 at 22:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .