Untitled design_1

Scenario: Create a lighting component for new record creation of the custom object (Commision__c) related to Opportunity (Parent).  When the user clicks “New” button from Commission related list on the opportunity page. Auto-populate the Opportunity field on the Commission record creation modal box.

Solution:  Here the main thing on which we need to work on is to auto-populate the opportunity record. Right? 

Q. Can we use “force:hasRecordId” interface in the lightning component?  

Ans ~ No, this will not fulfill our need, we will not get the recordId (opportunity record id), because this interface will only give you the current record ID if the component is used on a Lightning record page.

Q. Ok now, what will be another solution approach for this problem?

Ans~ We can use “lightning:isUrlAddressable” interface. This enables you to generate a user-friendly URL for a Lightning component and get the opportunity record id from the generated URL.

Find the lightning component code below.

Component: NewCommissionCreationCmp

<aura:component implements="lightning:isUrlAddressable,force:lightningQuickAction,lightning:actionOverride" access="global" >
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="recordId" type="String"/>
<aura:attribute name="cmp" type="commission__c" default="{'sobjectType': 'commission__c'}"/>
<aura:attribute name="modalWindow" type="boolean" default ="true"/>
<lightning:recordEditForm aura:id="recordViewForm"
onload="{!c.handleLoad}"
onsubmit="{!c.handleSubmitClick}"
onsuccess="{!c.handleSuccess}"
objectApiName="commission__c">
<!-- the messages component is for error messages -->
<aura:if isTrue="{!v.modalWindow}">
<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_medium" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">New Commission</h2>
</header>
<lightning:messages />
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<div class="slds-section slds-is-open">
<lightning:inputField fieldName="Name" />
<lightning:inputField fieldName="Commissions_Booking__c" />
<lightning:inputField fieldName="Opportunity__c" value="{!v.recordId}"/>
<lightning:inputField fieldName="Rep_Name__c" />
</div>
</div>
<footer class="slds-modal__footer">
<lightning:button aura:id="save" variant="brand" type="submit" name="save" label="Save" />
<lightning:button label="Cancel" onclick="{!c.onCancel}" />
</footer>
</div>
</section>
</aura:if>
<div class="slds-backdrop slds-backdrop_open"></div>
</lightning:recordEditForm>
</aura:component>

Controller: NewCommissionCreationCmpController

({
handleLoad: function(component,event,helper){
},
doInit : function(component,event,helper){
//alert(component.get("v.recordId"));
var pageRef = component.get("v.pageReference");
console.log(JSON.stringify(pageRef));
var state = pageRef.state; // state holds any query params
console.log('state = '+JSON.stringify(state));
var base64Context = state.inContextOfRef;
console.log('base64Context = '+base64Context);
if (base64Context.startsWith("1\.")) {
base64Context = base64Context.substring(2);
console.log('base64Context = '+base64Context);
}
var addressableContext = JSON.parse(window.atob(base64Context));
console.log('addressableContext = '+JSON.stringify(addressableContext));
component.set("v.recordId", addressableContext.attributes.recordId);
},
handleSubmitClick: function(component,event,helper){
event.preventDefault(); // stop form submission
var eventFields = event.getParam("fields");
//eventFields["Active__c"] = true; //set fields value before submit
component.find('recordViewForm').submit(eventFields);
},
onCancel : function(component,event,helper){
var navEvt = $A.get("e.force:navigateToSObject");
navEvt.setParams({
"recordId": component.get("v.recordId"),
"slideDevName": "related"
});
navEvt.fire();
},
handleSuccess: function(component, event, helper) {
//alert('success');
component.set("v.modalWindow",false);
var navEvt = $A.get("e.force:navigateToSObject");
navEvt.setParams({
"recordId": component.get("v.recordId"),
"slideDevName": "related"
});
navEvt.fire();
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
"title": "Response!",
"mode": 'sticky',
"type": 'success',
"message": 'Record has been created'
});
toastEvent.fire();
$A.get('e.force:refreshView').fire();
}
})

Console Output: 

{"type":"standard__objectPage","attributes":{"objectApiName":"commission__c","actionName":"new"},"state":{"inContextOfRef":"1.eyJ0eXBlIjoic3RhbmRhcmRfX3JlY29yZFBhZ2UiLCJhdHRyaWJ1dGVzIjp7InJlY29yZElkIjoiMDA2MEkwMDAwMFZrdVRRUUFaIiwiYWN0aW9uTmFtZSI6InZpZXciLCJvYmplY3RBcGlOYW1lIjoiT3Bwb3J0dW5pdHkifSwic3RhdGUiOnt9fQ=="}}
state = {"inContextOfRef":"1.eyJ0eXBlIjoic3RhbmRhcmRfX3JlY29yZFBhZ2UiLCJhdHRyaWJ1dGVzIjp7InJlY29yZElkIjoiMDA2MEkwMDAwMFZrdVRRUUFaIiwiYWN0aW9uTmFtZSI6InZpZXciLCJvYmplY3RBcGlOYW1lIjoiT3Bwb3J0dW5pdHkifSwic3RhdGUiOnt9fQ=="}
base64Context = 1.eyJ0eXBlIjoic3RhbmRhcmRfX3JlY29yZFBhZ2UiLCJhdHRyaWJ1dGVzIjp7InJlY29yZElkIjoiMDA2MEkwMDAwMFZrdVRRUUFaIiwiYWN0aW9uTmFtZSI6InZpZXciLCJvYmplY3RBcGlOYW1lIjoiT3Bwb3J0dW5pdHkifSwic3RhdGUiOnt9fQ==
base64Context = eyJ0eXBlIjoic3RhbmRhcmRfX3JlY29yZFBhZ2UiLCJhdHRyaWJ1dGVzIjp7InJlY29yZElkIjoiMDA2MEkwMDAwMFZrdVRRUUFaIiwiYWN0aW9uTmFtZSI6InZpZXciLCJvYmplY3RBcGlOYW1lIjoiT3Bwb3J0dW5pdHkifSwic3RhdGUiOnt9fQ==
addressableContext = {"type":"standard__recordPage","attributes":{"recordId":"0060I00000VkuTQQAZ","actionName":"view","objectApiName":"Opportunity"},"state":{}}
view raw console hosted with ❤ by GitHub

References: 

 

Thanks

Arun Kumar