[SalesForce] Conditional rendering for Account list in Lightning component

I have the list of accounts in lighting component and I want to display it with if condition if accounts list is zero then display the message.

My code works fine the only problem is that whenever I open the page first it shows my message that accounts not found for a while then display the accounts. how I handle this issue?

JS Controller

({
    doInit : function(component, event) {
        var action = component.get("c.findAll");
        action.setCallback(this, function(a) {
            component.set("v.accounts", a.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})

Apex Controller

public with sharing class AccountController {
    @AuraEnabled
    public static List<Account> findAll() {
        return [SELECT id, name FROM Account LIMIT 10];
    }
}

Component code

<aura:component controller="AccountController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="accounts" type="Account[]"/>
        <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

        <ul>

      <aura:if isTrue="{!(v.accounts.length > 0 )}">
                     <aura:iteration items="{!v.accounts}" var="account">
                 <li><a>{!account.Name}</a></li>
            </aura:iteration>
                         <aura:set attribute="else">                                               
                            <div >You don’t have any account. </div>
                        </aura:set>

                    </aura:if> 
      </ul> 
</aura:component>

Best Answer

According to lightning lifecycle, your component is rendered first and then your doInit method is called.

What you can do is use a boolean flag which you set it in your JS when init method is successful. .

<aura:attribute name="accounts" type="Account[]"/>
<aura:attribute name="initDone" type="Boolean" default="false" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <ul>

<aura:if isTrue="{!v.initDone}">
  <aura:if isTrue="{!(v.accounts.length > 0 )}">
        <aura:iteration items="{!v.accounts}" var="account">
            <li><a>{!account.Name}</a></li>
        </aura:iteration>
        <aura:set attribute="else">                                               
            <div >You don’t have any account. </div>
        </aura:set>

    </aura:if> 
</aura:if>
  </ul> 
</aura:component>

JS Code: (

{
doInit : function(component, event) {
    var action = component.get("c.findAll");
    action.setCallback(this, function(a) {
        component.set("v.accounts", a.getReturnValue());
        component.set("v.initDone","true");
    });
    $A.enqueueAction(action);
}
})

Source : https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_lifecycle.htm

Related Solutions

[SalesForce] save two records in two objects with a single save button with lightning components

Here are my recommendation:

QuestionLi Attribute is defined as simple object but when it's passed to server, you are assuming it's list of object. Update this attribute as List of object.
As a best practice, your apex method should return some value to identify, possibly String. Keep your DML in try catch block and return exception if any occurs so that you can debug properly.

public static String saveQuestions (....){
```
   try{

      insert ...

      return 'SUCCESS';

   catch(Excpetion e){ return e.getMessage();}
}
```

[SalesForce] Display a list with data from more than one Object

What you are looking for is to merge two list into a third one. I won't post step-by-step code because your lack of details makes it difficult for me to go in relevant detail. However, I can post a generic approach that shouldn't be hard for you to translate into your reality.

My example assumes that your objects will have either properties with the same name or that you will combine attributes from different names into a common one.

Here it goes. In the component, add a generic list and reset your iteration to it

<aura:attribute name="myList" type="Object" />

<aura:iteration items="{!v.myList}" var="myRec">
    {!myRec.Id}
    {!myRec.Name}
    {!myRec.Prop2__c}
    {!myRec.Prop3__c}
</aura:iteration>

In your helper/controller, you will first get your records (I assume you know how to do that) an then combine them into this new object like so

var myList = [];
var accounts = component.get('v.accounts');
var otherRecs = component.get('v.otherRecs');

//a for loop is faster than a .foreach
for (var i = 0; i < accounts.length; i++) {
  var rec = {};

  rec.Id = accounts[i].Id;
  rec.Name = accounts[i].Name;
  rec.Prop2__c = accounts[i].SomeProp2__c;
  rec.Prop3__c = accounts[i].SomeProp3__c;

  myList.push(rec);
}

for (var i = 0; i < otherRecs.length; i++) {
  var rec = {};

  rec.Id = otherRecs[i].Id;
  rec.Name = otherRecs[i].Name;
  rec.Prop2__c = otherRecs[i].SomeProp2__c;
  rec.Prop3__c = otherRecs[i].SomeProp3__c;

  myList.push(rec);
}

component.set('v.myList', myList);

Voila!

PS: Obviously, replace the variable names with real ones. On the left, the properties of your rec records should be identical in both lists. On the right, however, you can use any property on the accounts and otherRecs. My advice, however, is that you use properties of the same types (numbers, dates, etc) for the same rec property, to avoid issues when formatting (unless you want to treat them all as strings)

PPS: Other suggestions on this topic suggest to do the same thing it in Apex. If possible, that is desired since it'll save you a trip to the db... but it may make your code harder to maintain. Or, perhaps, you already have all the data and need to aggregate on the front end. If the latter, then I'd do it in JS.

Best Answer

Related Solutions

[SalesForce] save two records in two objects with a single save button with lightning components

[SalesForce] Display a list with data from more than one Object

Related Topic