Lightning component button Create Child Record using Standard Layout

The purpose of this blog is to share you detail how to load Create child Record using Standard Layout using Lightning Action Button.


Here are the Relationship with Objects.

We are using following 3 Objects:
1. Account
2. Project
3. Invoice

Invoice has following relationship fields:

Account --Master -Detail
Project --Lookup

Project has following relationship fields:
Account--Lookup

So User can create Invoice Records from Project's Invoice Related list so while clicking on New Invoice button Project Lookup is filled but Account lookup is not autofilled. So in order to Create Invoice from Project and that new Invoice Record Layout must be defaulted with Project, Account and other detal from Project Record we will be create one Lightning Action button Project Object with following Lightning component. so without creating any server side apex controller we can use lightning data service to Read the records and then we can invoke the CreateRecord lightning enque action in JS. rest Salesforce will take care of it.

Please create following component.

CreateInvoice.cmp

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" access="global" >
<aura:attribute name="project" type="Project_Custom__c"/>
    <aura:attribute name="projectObj" type="Project_Custom__c"/>
    <aura:attribute name="errorMessage" type="String"/>
    <force:recordData aura:id="accountRecordLoader"
        recordId="{!v.recordId}"
        fields="Customer__c,CurrencyIsoCode"
        targetRecord="{!v.project}"
        targetFields="{!v.projectObj}"
        targetError="{!v.errorMessage}"
        recordUpdated="{!c.doInit}"
    />   
</aura:component>


CreaInvoiceController.js

({
doInit : function(component, event, helper) {
        $A.get("e.force:closeQuickAction").fire();
        var eventParams = event.getParams();
        if(eventParams.changeType === "LOADED") {
            //console.log("account loaded:::::" + JSON.stringify(component.get("v.project")));
           
            var createRecordEvent = $A.get("e.force:createRecord");
            createRecordEvent.setParams({
                "entityApiName": "Invoice__c",
                "defaultFieldValues":{
                    "Account__c" : component.get("v.projectObj.Customer__c"),
                    "CurrencyIsoCode" : component.get("v.projectObj.CurrencyIsoCode"),
                    "Project__c" : component.get("v.recordId")
                }
            });
            createRecordEvent.fire();
           
        } else if(eventParams.changeType === "REMOVED") {
            // record is deleted and removed from the cache
        } else if(eventParams.changeType === "ERROR") {
            // there’s an error while loading, saving or deleting the record
        }
}
})

Create Lightning Action button on Project and select the component that you above has defined. and enable this new button on the Project Page Layout. Thanks