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
Raghu Rao 12Raghu Rao 12 

Embedded Child Lightning Card component not displaying results

Hi 
I am capturing Last Name and Email on the parent component and then passing on the search results on to an embedded child Lightning Card component. Though it fetches the contact record(s) it does not display Lightning Card component (c:DisplayMembers) on the Lightning Tab. Below are the markup, controller and helper code.

Component Markup:
<aura:component implements="force:appHostable" controller="SearchDevoteeMember" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
   <aura:attribute name="contact" type="Contact" default="{ 'sobjectType': 'Contact' }"/>
   <aura:attribute name="contacts" type="Contact[]"/>
    <aura:attribute name="contactList" type="Contact[]"/>
   <aura:attribute name="hasErrors" type="Boolean" description="Indicate whether there were failures or not" />
    <aura:attribute name="isVisible" type="boolean" default="false"/>

  

  <div class="slds-page-header" role="banner">
      <p class="slds-text-heading--label">Search Member</p>
   </div>
   <br/>

   <aura:if isTrue="{!v.hasErrors}">
      <!-- Load error -->
      <div class="userCreateError">
         <ui:message title="Error" severity="error" closable="true">
            Please review the error messages.
         </ui:message>
      </div>
   </aura:if>

   <div class="slds-form--stacked">

      <div class="slds-form-element">
         <label class="slds-form-element__label" for="lastName">Enter last name: </label>
         <div class="slds-form-element__control">
            <ui:inputText class="slds-input" aura:id="lastName" value="{!v.contact.lastname}" required="true" />
         </div>
      </div>

      <div class="slds-form-element">
         <label class="slds-form-element__label" for="userEmail">Enter email:</label>
         <div class="slds-form-element__control">
            <ui:inputEmail class="slds-input" aura:id="userEmail" value="{!v.contact.Email}" required="true"/>
         </div>
      </div>

      <div class="slds-form-element">
         <ui:button class="slds-button slds-button--neutral" press="{!c.cancel}" label="Cancel" />
         <ui:button class="slds-button slds-button--brand" press="{!c.searchContacts}" label="Search Member" />
      </div>
   </div>
    <div>
   <!-- Iterate over the list of contacts and display them -->
   <aura:iteration var="contact" items="{!v.contactList}">
    <c:DisplayMembers contact="{!contact}"/>
</aura:iteration>
   </div>
</aura:component>

Controller JS:
({    
   doInit : function(component) {
    

   },
    
 
   searchContacts : function(component, event, helper) {
      var last = component.get("v.contact.lastname");
      var email = component.get("v.contact.Email");

         helper.searchContacts(component,last,email); 
        
       
   },
    
   cancel : function(component, event, helper) {
      $A.get("e.force:closeQuickAction").fire();
   }
})

Helper JS:
({
   searchContacts: function(component, last, email) {
      //Save the user and close the panel
      var action = component.get("c.getContacts");
         action.setParams({
            "LastName": last,
            "Email": email
         });

      action.setCallback(this, function(response) {
        // var response = a.getReturnValue();
         var state = response.getState();
         if(component.isValid() && state == "SUCCESS"){
            component.set("v.contacts", response.getReturnValue());
            component.set("v.contactList", response.getReturnValue());
            $A.get("e.force:closeQuickAction").fire();
            var toastEvent = $A.get("e.force:showToast");
            toastEvent.setParams({
                  "title": "Success!",
               "message": "Member Record(s) found!!"
            });
            toastEvent.fire();
            $A.get('e.force:refreshView').fire();
         } else if (state == "ERROR") {
            console.log('There was a problem and the state is: '+ action.getState());
         }
      });
      $A.enqueueAction(action);
      },

})

 
Pramodh KumarPramodh Kumar
If possible could you share the DisplayMembers component.

for your event  searchContacts you dont have to refresh the component once the response is done.

$A.get('e.force:refreshView').fire();  not required.


Thanks
Pramodh
allaboutlightning.com
Raghu Rao 12Raghu Rao 12
Thanks Pramodh,
Below is the DisplayMembers component markup, controller code
<aura:component >
    <aura:attribute name="contact" type="Contact" />
<lightning:card variant="Narrow" title="{!v.contact.Name}" iconName="standard:contact">
<aura:set attribute="actions">
    <lightning:button name="details" label="Details" onclick="{!c.goToRecord}"/>
    </aura:set>
    <aura:set attribute="footer">
        <lightning:badge label="{!v.contact.Email}"/>
    </aura:set>
    <p class="slds-p-horizontal_small">
        {!v.contact.Phone}
    </p>
    <p class="slds-p-horizontal_small">
        {!v.contact.MailingStreet}
    </p>
</lightning:card>
</aura:component>

DisplayMemberController.js
({
    goToRecord : function(component, event, helper) {
        // Fire the event to navigate to the contact record
        var sObjectEvent = $A.get("e.force:navigateToSObject");
        sObjectEvent.setParams({
            "recordId": component.get("v.contact.Id")
        })
        sObjectEvent.fire();
    }
})

SearchDevoteeMember.apxc
public class SearchDevoteeMember {
@AuraEnabled
    public static List<Contact> getContacts(String LastName, String Email) {
        List<Contact> contacts =[select Id,Name,FirstName,LastName,Email,MobilePhone,Phone,MailingAddress,MailingStreet,npo02__Household__c from Contact where LastName =: LastName AND Email =: Email LIMIT 1];
        
        return contacts;
    }
}
Raghu Rao 12Raghu Rao 12
Thanks Pramodh! Your suggestion worked. I am able to see the lightning card component display now.
Appreciate it!
 
Pramodh KumarPramodh Kumar
great.. It got worked.