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

 
<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>

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:

 

({
    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);
    }
})

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

 

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;
    }
}

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

Leave a Reply