+ Start a Discussion
Sumit Budhiraja 9133Sumit Budhiraja 9133 

Force:inputfield isn't rendering lookup value.

I am rendering Accounts with their contacts in lightning component and showing account lookup field on child contacts But account lookup is not coming using force:inputfield in the contact section. However, when I  printed the accountid on page, it's coming but lookup not rendering.

Please help and find the below code!
<aura:component controller="Account_with_contacts_controller" implements="force:appHostable,flexipage:availableForAllPageTypes">    
    <aura:attribute name="listaccount" type="Account_with_contacts_controller.Wrapper_Account[]"/>    
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
   <aura:attribute name="contact" type="Contact" 
               default="{ 'sobjectType': 'Contact' }"/>
    <div class="slds-grid slds-m-around--medium ">
        <table class="slds-table slds-table--bordered slds-max-medium-table--stacked">
            <thead>
                <tr class="slds-text-heading--label">
                     <th scope="col"> </th>
                    <th scope="col">ID </th>
                    <th scope="col">Name</th>
                    <th scope="col">Phone</th>
                    <th scope="col">Billing City</th>

                </tr>
            </thead>
            <tbody>
                <aura:renderIf isTrue="{!v.listaccount.length!=0}">
                <aura:iteration items="{!v.listaccount}" var="item" indexVar="i">
                    <tr>
                        <td>
                          
                        </td>                           
                         <td>
                            <label class="slds-checkbox">
                                <ui:inputCheckbox class="selector" aura:id="{!i}" value="{!item.selected}" change="{!c.selectcheckbox}"/>
                                <span class="slds-checkbox--faux"></span>
                            </label>
                        </td>   
                        <td><ui:inputtext class="field" value="{!item.Name}"/></td>
                        
                        <td><ui:inputtext class="field" value="{!item.Phone}"/></td>
                        <td><ui:inputtext class="field" value="{!item.BillingCity}"/></td>
                         <aura:iteration items="{!item.Contacts}" var="contactitem" indexVar="j">
                          
                    <tr>
                        <td>
                          
                        </td>                           
                            
                        <td><ui:inputtext class="field" label="name" value="{!contactitem.Name}"/></td>
                        <td width="50%"><force:inputField value="{!contactitem.AccountId}"/> </td>
                        <td><ui:inputtext class="field" label="phone" value="{!contactitem.Phone}"/></td>
                        <td><ui:inputtext class="field" value="{!contactitem.Description}"/></td>
                        
                    </tr>      
                </aura:iteration> 
                    </tr>      
                </aura:iteration> 
                </aura:renderIf>
            </tbody>
        </table> 
    </div>
    
        <div>
        <button    style="float:centre" class="slds-button slds-button--brand slds-m-bottom--large slds-align--absolute-center btn-lg" onclick="{!c.UpdateAccounts}">Update Accounts</button>
        <br/>    
           </div>
</aura:component>
Best Answer chosen by Sumit Budhiraja 9133
Priyankar Pakhira 39Priyankar Pakhira 39
<force:inputField> is not rendering fields on UI when being used inside <aura:iteration> tag or inside nested components in Lightning application.
Please check below
https://success.salesforce.com/issues_view?id=a1p3A0000008gDzQAI
 

All Answers

Priyankar Pakhira 39Priyankar Pakhira 39
<force:inputField> is not rendering fields on UI when being used inside <aura:iteration> tag or inside nested components in Lightning application.
Please check below
https://success.salesforce.com/issues_view?id=a1p3A0000008gDzQAI
 
This was selected as the best answer
Sumit Budhiraja 9133Sumit Budhiraja 9133
Thanks, Priyankar! Could you please suggest me how to render lookup in aura:iteration? Any Sample Code?
Priyankar Pakhira 39Priyankar Pakhira 39
Hi Sumit,

Please can you share JS controller and apex classes (including wrapper class)
Sumit Budhiraja 9133Sumit Budhiraja 9133
Please find the Component/ Controller/ Apex class.
Component:
<aura:component controller="Account_with_contacts_controller" implements="force:appHostable,flexipage:availableForAllPageTypes">    
    <aura:attribute name="listaccount" type="Account_with_contacts_controller.Wrapper_Account[]"/>    
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
   <aura:attribute name="contact" type="Contact" 
               default="{ 'sobjectType': 'Contact' }"/>
    <div class="slds-grid slds-m-around--medium ">
        <table class="slds-table slds-table--bordered slds-max-medium-table--stacked">
            <thead>
                <tr class="slds-text-heading--label">
                     <th scope="col"> </th>
                    <th scope="col">ID </th>
                    <th scope="col">Name</th>
                    <th scope="col">Phone</th>
                    <th scope="col">Billing City</th>

                </tr>
            </thead>
            <tbody>
                <aura:renderIf isTrue="{!v.listaccount.length!=0}">
                <aura:iteration items="{!v.listaccount}" var="item" indexVar="i">
                    <tr>
                        <td>
                          
                        </td>                           
                         <td>
                            <label class="slds-checkbox">
                                <ui:inputCheckbox class="selector" aura:id="{!i}" value="{!item.selected}" change="{!c.selectcheckbox}"/>
                                <span class="slds-checkbox--faux"></span>
                            </label>
                        </td>   
                        <td><ui:inputtext class="field" value="{!item.Name}"/></td>
                        
                        <td><ui:inputtext class="field" value="{!item.Phone}"/></td>
                        <td><ui:inputtext class="field" value="{!item.BillingCity}"/></td>
                         <aura:iteration items="{!item.Contacts}" var="contactitem" indexVar="j">
                          
                    <tr>
                        <td>
                          
                        </td>                           
                            
                        <td><ui:inputtext class="field" label="name" value="{!contactitem.Name}"/></td>
                        <td width="50%">{!contactitem.AccountId}<force:inputField value="{!contactitem.AccountId}"/> </td>
                        <td><ui:inputtext class="field" label="phone" value="{!contactitem.Phone}"/></td>
                        <td><ui:inputtext class="field" value="{!contactitem.Description}"/></td>
                        
                    </tr>      
                </aura:iteration> 
                    </tr>      
                </aura:iteration> 
                </aura:renderIf>
            </tbody>
        </table> 
    </div>
    
        <div>
        <button    style="float:centre" class="slds-button slds-button--brand slds-m-bottom--large slds-align--absolute-center btn-lg" onclick="{!c.UpdateAccounts}">Update Accounts</button>
        <br/>    
           </div>
</aura:component>
JS Controller:
({
    doInit : function(comp, event, helper) {
    var action = comp.get("c.GetAccount_Contact_Both");
        alert('I am here');
        action.setCallback(this, function(a) {  
            var result = a.getReturnValue();
            console.log(result);
            comp.set("v.listaccount", result);
            console.log(result[0].Contacts[0].AccountId);
            });
            $A.enqueueAction(action);        
    },
    UpdateAccounts: function(comp, event) {
    var action1 = comp.get("c.UpdateAccountsclass");
        action1.setParams({
            "Accountsupdate" : JSON.stringify(comp.get("v.listaccount"))
        });
                         console.log(comp.get("v.listaccount"));

        action1.setCallback(this, function(a) { 
            var result = a.getReturnValue();
             

            });
            $A.enqueueAction(action1);        
    }
                             
})​
Apex Controller:
public class Account_with_contacts_controller{
      @AuraEnabled
    Public static list<Wrapper_Account> GetAccount_Contact_Both()
    {
        list<account> listacc=new list<account>();
        
        list<Wrapper_Account> listaccWrap=new list<Wrapper_Account>();
        listacc=[select id,name,billingcity,phone,(select id,name,accountid,description,phone from contacts) from account limit 5];
        for(account acc:listacc)
        {
            List<wrapper_contact> wrapcontact=new list<wrapper_contact>();
            for(contact c:acc.contacts)
            {
                wrapcontact.add(new wrapper_contact(false,c.name,c.phone,c.description,c.id,c.AccountId));                
            }
            listaccWrap.add(new Wrapper_Account(false,acc.name,acc.phone,acc.billingcity,wrapcontact,acc.id));
        }
        return listaccWrap; 
    }
   @AuraEnabled
    Public static void UpdateAccountsclass(String Accountsupdate)
    {
         List<wrapper_account> ListAccountsupdate = (List<wrapper_account>)JSON.deserialize(Accountsupdate,List<wrapper_account>.class);
        list<account> acc= new list<Account>();
        system.debug('list'+ListAccountsupdate);
        list<contact> contactstoupdate = new list<contact>();
       If(ListAccountsupdate.size()>0)
       {
           for(wrapper_account a:ListAccountsupdate)
           {
           
            acc.add(new account(name=a.name,billingcity=a.billingcity,phone=a.phone,id=a.id));
               for(wrapper_contact c :a.contacts)
           {
            contactstoupdate.add(new contact(firstname=c.name,description=c.description,phone=c.phone,id=c.id));   
           }
           
           }
           
       }
       update acc;
       update contactstoupdate;
        
    }
    Public class Wrapper_Account
    {
         @AuraEnabled
        public boolean selected {
            get;
            set;
        }
        @AuraEnabled
        public String Name {
            get;
            set;
        }
        @AuraEnabled
        public String BillingCity {
            get;
            set;
        }
        @AuraEnabled
        public String Phone;
        @AuraEnabled
        public String Id {
            get;
            set;
        }
         @AuraEnabled
        public List<wrapper_contact> Contacts {
            get;
            set;
        }
       Public Wrapper_Account(boolean selected,string name,string Phone,string Billingcity,list<wrapper_contact> contacts,String ID)
       {
           this.selected=selected;
           this.name=name;
           this.phone=phone;
           this.billingcity=billingcity;
           this.contacts=contacts;
           This.Id=ID;
       }
        
    }
    Public class Wrapper_Contact
    {
         @AuraEnabled
        public boolean selected {
            get;
            set;
        }
        @AuraEnabled
        public String Name {
            get;
            set;
        }
        @AuraEnabled
        public String Description {
            get;
            set;
        }
        @AuraEnabled
        public String Phone;
        @AuraEnabled
        public String Id {
            get;
            set;
        }
        @AuraEnabled
        public String AccountId {
            get;
            set;
        }
       Public Wrapper_Contact(boolean selected,string name,string Phone,string description,String ID,String AccountId)
       {
           this.selected=selected;
           this.name=name;
           this.phone=phone;
           this.description=description;
           This.Id=ID;
           This.AccountId=AccountId;
       }
        
    }
}​


 
Priyankar Pakhira 39Priyankar Pakhira 39
Hi

Please use a component (with force:inputfield) and use this component under aura:iteration .
Sumit Budhiraja 9133Sumit Budhiraja 9133
Hi Priyankar,
I tried it & it's not working.
Here is my code:
Lookup Component:
<aura:component >
    <aura:attribute name="Accountlookup" type="Contact"/>
    
<div aura:id="lookup-pill" class="slds-pill-container">
                    <span class="slds-pill" style="width:100%">
                        <force:inputField aura:id="contactName" class="slds-select"
                                 value="{!v.Accountlookup.AccountId}"/> 
    </span>
    </div>
</aura:component>
Updated code in main Compoent:
<td><ui:inputtext class="field" label="name" value="{!contactitem.Name}"/></td>
                        <td width="50%"><c:Accountlookup Accountlookup="{!contactitem}"></c:Accountlookup> </td>
                        <td><ui:inputtext class="field" label="phone" value="{!contactitem.Phone}"/></td>
                        <td><ui:inputtext class="field" value="{!contactitem.Description}"/></td>