Requirement ‹ ›
Create a Lightning Component for creating contact record and show that contacts on the Account page using Component Event.
cmpAccountContactRelatedList.cmp
<aura:component controller="cmpContactListController"
implements="force:hasRecordId,flexipage:availableForAllPageTypes">
<aura:attribute name="contactList" type="Contact[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:handler name="QuickContact" event="c:QuickContactEvent"
action="{!c.handleCompEvent}"/>
<div>
<c:cmpCreateContactRecord AccountId="{!v.recordId}"/>
</div>
<div class="slds-p-around_small">
<div class="slds-grid slds-wrap">
<aura:iteration items="{!v.contactList}" var="objContact">
<div class="slds-col slds-size_1-of-3 slds-p-around_small">
<lightning:card title="{!objContact.LastName}" footer="{!objContact.Email}"
iconName="standard:contact">
<aura:set attribute="actions">
<lightning:button
label="View Details"
variant="brand"
name="{!objContact.Id}"
onclick="{!c.doRedirect}"/>
</aura:set>
<p class="slds-p-horizontal_small">
{!objContact.FirstName} {!objContact.LastName} <br/>
{!objContact.Phone}
</p>
</lightning:card>
</div>
</aura:iteration>
</div>
</div>
</aura:component>
cmpAccountContactRelatedListController.js
({
doInit : function(component, event, helper) {
var action = component.get('c.getContactList');
action.setParams({
accountId : component.get('v.recordId'),
});
action.setCallback(this, function(response){
var responseValue = response.getReturnValue();
component.set('v.contactList', responseValue);
},'SUCCESS');
$A.enqueueAction(action);
},
doRedirect : function(component, event, helper) {
var eventSource = event.getSource();
var id = eventSource.get('v.name');
var navEvt = $A.get("e.force:navigateToSObject");
navEvt.setParams({
"recordId": id,
"slideDevName": "detail"
});
navEvt.fire();
},
handleCompEvent : function(component, event, helper) {
var availableContact = component.get('v.contactList');
var contactRecord = event.getParam('contactRecord');
availableContact.push(contactRecord);
component.set('v.contactList',availableContact);
}
})
Component Event
QuickContactEvent.evt
<aura:attribute name="contactRecord" type="Contact"/>
</aura:event>
cmpCreateContactRecord.cmp
<aura:component controller="cmpContactListController">
<aura:attribute name="AccountId" type="string"/>
<aura:registerEvent name="QuickContact" type="c:QuickContactEvent"/>
<aura:attribute name="createContact" type="Contact" default="{
sObject : 'Contact',
FirstName : '',
LastName : '',
Email : '',
Phone : ''
}"/>
<div class="slds-var-p-around_x-small">
<lightning:input label="First Name" type="text" value="{!v.createContact.FirstName}"
required="true"/>
<lightning:input label="Last Name" type="text" value="{!v.createContact.LastName}"
required="true"/>
<lightning:input label="Email" type="email" value="{!v.createContact.Email}"
required="true"/>
<lightning:input label="Phone" type="phone" value="{!v.createContact.Phone}"
required="true"/>
<lightning:button label="Create Contact" variant="brand" onclick="{!c.doSave}"/>
</div>
</aura:component>
cmpCreateContactRecordController.js
({
doSave : function(component, event, helper) {
var action = component.get('c.createContact');
action.setParams({
objContact : component.get('v.createContact'),
AccountId : component.get('v.AccountId'),
});
action.setCallback(this,function(response){
var state = response.getState();
if(state === 'SUCCESS' || state === 'DRAFT'){
var responseValue = response.getReturnValue();
var componentEvent = component.getEvent('QuickContact');
componentEvent.setParams({
contactRecord : responseValue
});
componentEvent.fire();
}
},'ALL');
$A.enqueueAction(action);
}
})
Controller
cmpContactListController.cls
public with sharing class cmpContactListController {
@AuraEnabled
public static Contact createContact(contact objContact , Id AccountId){
objContact.accountid = AccountId;
insert objContact;
return objContact;
}
}
Add this component on the Account record page.
Output:
Before Creating Contact :
After Creating Contact :
