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.
Advertisements
Find the lightning component code below.
Component: NewCommissionCreationCmp
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ({ | |
| 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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"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":{}} |
References:
SFDC Lessons 
this doesn’t work. It gives me null each time
LikeLike
Worked for me..Thanks
LikeLike
It worked and helped me in time.
LikeLike
It worked for me but when I cancel and open the component from a new record the previous record id is still there. Why is that?
LikeLiked by 1 person
Hi nice reading your ppost
LikeLiked by 1 person
Very nice work. Thanks a lot.
LikeLike