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.

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.

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.

[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