You need to sign in to do that
Don't have an account?

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);
},
})
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);
},
})
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
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;
}
}
Appreciate it!