Sunday, August 11, 2019

Custom related list Lightning Components for adding contact

In this article i am going to explain how we can create a custom related list component for specific related list. I am going to create a custom contact related list component to add contact which will be exactly similar to standard related component.


Concept's tested:

1) lightning:card
2) force:recordData
3) lightning:overlayLibrary (To create modal box)
4) Dynamically creating component using $A.createComponent
5) force:navigateToRelatedList

customContact.cmp

<aura:component controller="customContactApex" implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInitialization}"/>
    <aura:attribute name="existingContactList" type="contact[]"/>
    <lightning:overlayLibrary aura:id="overlayLib"/>
    <aura:attribute name="contactNumber" type="string"/>
    <lightning:card title="{!v.contactNumber}" iconName="standard:contact">
        <aura:set attribute="actions">
            <lightning:button label="New" onclick="{!c.addContact}"/>
        </aura:set>
        <p class="slds-p-horizontal_small">
            <aura:iteration items="{!v.existingContactList}" var="con">
                <a href="{!'https://myknowndomain-dev-ed.lightning.force.com/'+con.Id}" >
                {!con.Name}
                 </a> 
                <p>Title:{!con.Title}</p>
                <p>Email:{!con.Email}</p>
                <p>Phone:{!con.Phone}</p> 
              <br></br>
            </aura:iteration>
        </p>
       <aura:set attribute="footer">
        <a href="javascript:void(0)" onclick="{!c.navigateToRelatedList}">
            View All
        </a>
        </aura:set>
    </lightning:card>
</aura:component>

customContactController.js

({
    doInitialization : function (component, event, helper) {
        var parentId=component.get("v.recordId");
        var action=component.get('c.getAllContact');
        var existingContactArray=[];
        var title="Contacts";
        action.setParams({
            accId : parentId
        });
       action.setCallback(this,function(response){     
            var state=response.getState();
            var responseLength=response.getReturnValue().length;
            if(state==="SUCCESS")
            {
             
                if(responseLength <= 3)
                {
                    component.set("v.contactNumber",title + ' ' + '(' + response.getReturnValue().length + ')');
                    component.set("v.existingContactList",response.getReturnValue());
                }
                else
                {
                    component.set("v.contactNumber",title + ' ' + '(' + '3+' + ')');
                 
                    for(var i=0; i<3;i++)
                        {
                            existingContactArray.push(response.getReturnValue()[i]);
                            //alert('response.getReturnValue(i)'+response.getReturnValue()[i]);
                        }
                    component.set("v.existingContactList",existingContactArray);
                }
             
            }
       
        });
        $A.enqueueAction(action);
    },
addContact: function(component, evt, helper) {
        //alert("Before creating Modal");
        var modalBody;

        $A.createComponent("c:contactForm", {accountId:component.get("v.recordId")},
           function(instanceOfContactForm, status) {
               if (status === "SUCCESS") {
                   modalBody = instanceOfContactForm;
                   component.find('overlayLib').showCustomModal({
                       header: "Create Contact",
                       body: modalBody,
                       showCloseButton: true,
                     
                       closeCallback: function() {
                         
                       }
                   })
               }                             
           });
    },
    navigateToRelatedList: function(component,event,helper){
   var rlEvent = $A.get("e.force:navigateToRelatedList");
   rlEvent.setParams({
      "relatedListId": "Contacts",
      "parentRecordId": component.get("v.recordId")
   });
   rlEvent.fire();
    }
 
 

})


contactForm.cmp

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="conFirstName" type="string" />
    <aura:attribute name="conLastName" type="string" />
    <aura:attribute name="conTitle" type="string" />
    <aura:attribute name="conDepartment" type="string" />
    <aura:attribute name="newContactRecord" type="Object"/>
    <aura:attribute name="contactFieldsToQuery" type="Object"/>
    <aura:attribute name="recordError" type="String"/>
    <aura:attribute name="accountId" type="string"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <force:recordData aura:id="creatingContactRecordOnAccount"
                   
                      layoutType="FULL"
                      mode="EDIT"
                      targetRecord="{!v.newContactRecord}"
                      targetFields="{!v.contactFieldsToQuery}"
                      targetError="{!v.recordError}"
                      />
    <lightning:input label="FirstName" value="{!v.conFirstName}"/>
    <lightning:input label="LastName" value="{!v.conLastName}"/>
    <lightning:input label="Title" value="{!v.conTitle}"/>
    <lightning:input label="Department" value="{!v.conDepartment}"/>
    <lightning:button label="Add contact" onclick="{!c.addContact}"/>
</aura:component>

contactFormController.js

({
doInit: function(component, event, helper) {
         var accId=component.get("v.accountId");
         //alert("Id of Account from main comp"+accId);
        // getNewRecord loads a new record template that performs an insert when data is saved.
        component.find("creatingContactRecordOnAccount").getNewRecord(
            "Contact", // Specify Object (entityAPIName)
            null,      // recordTypeId
            false,     // skip cache?
            $A.getCallback(function() {
                var conRec = component.get("v.newContactRecord");
                var error = component.get("v.recordError");
                if(error || (conRec === null)) {
                   // alert("Error in initializing template");
                }
                else {
                    //alert("Template initialize succesfully");
                }
            })
        );
    },
    addContact: function(component, event, helper) {
        var lastName=component.get("v.conLastName");
        var firstName=component.get("v.conFirstName");
        var conTitle=component.get("v.conTitle");
        var conDepartment=component.get("v.conDepartment");
        //alert('Name is'+lastName);
        component.set("v.contactFieldsToQuery.AccountId", component.get("v.accountId"));
        component.set("v.contactFieldsToQuery.LastName",lastName);
        component.set("v.contactFieldsToQuery.Title",conTitle);
        component.set("v.contactFieldsToQuery.Department",conDepartment);
        component.find("creatingContactRecordOnAccount").saveRecord(function(saveResult) {
       
           // Handling state of response(SUCCESS,INCOMPLETE,ERROR)
       
             if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
                var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            title : 'Success',
            message: 'Contact Inserted Successfully',
            type: 'success'
        });
        toastEvent.fire();
            }
            else if (saveResult.state === "INCOMPLETE" ) {
                alert("Error in saving record");
            }
            else if (saveResult.state === "ERROR") {
               alert("Problem saving record, error:" +
                           JSON.stringify(saveResult.error));
            }
            else
            {
                 //alert('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
            }
       
         });
    }
})


customContactApex.apxc

public class customContactApex {
    @AuraEnabled
    public static list<contact> getAllContact(string accId)
    {
        system.debug('accId'+accId);
        List<contact> conList=new List<contact>();
        //List<contact> conListToReturn=new List<contact>();
        for(contact obj:[Select id,name,title,email,phone from contact where accountid=:accId])
        {
            conList.add(obj);
        }
     
          return conList;
     
     
    }
}




TAGS:

Custom Lightning Components for Specific Related Lists,create custom related list lightning component,lightning component to display related list records,how to create custom related list in salesforce lightning,custom related list component

No comments:

Post a Comment