Build a quick create lightning component

Having previously looked at displaying a list of contacts beside the account details, I am now going to build a quick create component to also add to the page. While this could be done with a quick action without any code, the idea here is to build a structure that could be extended to add further functionality e.g. check for duplicates or add related records such as contact roles.

screen-shot-2016-11-30-at-21-24-27

My first step is to build my component. This makes use of lightning:input field components and I have added some useful attributes but you can view a full list of attributes here

[sourcecode language=”plain”]
<aura:component controller="QuickContactController" implements="force:lightningQuickActionWithoutHeader,flexipage:availableForRecordHome,force:hasRecordId" access="global">
<aura:attribute name="recordId" type="Id" />
<lightning:card iconName="utility:user" title="Quick Prospect">
<div class="slds-text-align–left slds-p-around–medium">
<lightning:input aura:id="firstname" name="firstname" label="First Name" required="true" />
<lightning:input aura:id="lastname" name="lastname" label="Last Name" required="true" />
<lightning:input aura:id="email" name="email" label="Email" type="email" messageWhenTypeMismatch="Your entry must be a valid email address." />
<lightning:button class="slds-m-top–small" variant="brand" aura:id="submitBtn" label="Submit" onclick="{!c.handleSaveContact}" />
</div>
</lightning:card>
</aura:component>

[/sourcecode]

The component has three simple fields to enter data and then a button to submit the data. An important parameter here is the aura:component implements parameter and in particular “force:lightningQuickActionWithoutHeader” which makes it available for quick actions.

The next step is to create the javascript controller below:

[sourcecode language=”plain”]

({
handleSaveContact: function(component, event, helper) {
var fname = component.find("firstname").get("v.value");
var lname = component.find("lastname").get("v.value");
var email = component.find("email").get("v.value");
var accId = component.get("v.recordId");

var action = component.get("c.createContact");

action.setParams({
"firstname": fname,
"lastname": lname,
"email": email,
"accId": accId
});

action.setCallback(this, function(response) {
var res = response.getReturnValue();
var resultsToast = $A.get("e.force:showToast");
if (res) {
resultsToast.setParams({
"title": "Contact Saved",
"message": "The new contact was created."
});
} else {
resultsToast.setParams({
"title": "Error",
"message": "Error – Contact not created."
});
}
resultsToast.fire();
$A.get("e.force:refreshView").fire();
var dismissActionPanel = $A.get("e.force:closeQuickAction");
dismissActionPanel.fire();
});
$A.enqueueAction(action);
}
})

[/sourcecode]

In the handleSaveContact method, I am getting all of the details that have been entered on the form and validating them (e.g. check its a valid email address). This happens in real time as shown below.

screen-shot-2016-11-30-at-21-24-52

I then want to pass these details to my apex controller to create the contact. My apex method returns a boolean so I can display a relevant message to the user.
The method returns a boolean which determines what should be displayed to the user – either a success or failure message. I used the resultsToast method to display this error message to the user.

screen-shot-2017-01-03-at-15-28-34

[sourcecode language=”plain”]

public class QuickContactController {

@AuraEnabled
public static Boolean createContact (String firstname, String lastname, String email, Id accID) {

Boolean contactCreated = true;
Contact con = new Contact(FirstName = firstname, LastName = lastname, Email = email, AccountId = accID);
try{
insert con;
}Catch(Exception ex){
System.debug(‘::: Error on quick create contact: ‘+ex);
contactCreated = false;
}

return contactCreated;
}
}

[/sourcecode]

The code for the full solution is available in the github repository linked below:
https://github.com/paddybutler/Lightning-Quick-Create

Leave a Reply

Your email address will not be published. Required fields are marked *