December 18, 2019

Overriding New button in Salesforce Lightning Experience with a Custom Lightning Aura Components

Navigate to a lightning component or standard record page creation based on Record Type in Salesforce Lightning

NewContact Lightning Component:


  1. <aura:component implements="lightning:actionOverride, lightning:hasPageReference" >  
  2.       
  3.     <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>   
  4.       
  5. </aura:component>  

NewContact Lighting Component Controller:


  1. ({  
  2.       
  3.     doInit: function(component, event, helper) {  
  4.            
  5.         //Fetching Record Type Id  
  6.         var recordTypeId = component.get( "v.pageReference" ).state.recordTypeId;  
  7.         //If Sales Record Type is selected, open NewContactForm Lightning component  
  8.         //else open new Contact record standard page with record type applied  
  9.         if ( recordTypeId == '0123i000000ICssAAG' ) {  
  10.               
  11.             var evt = $A.get("e.force:navigateToComponent");  
  12.             evt.setParams({  
  13.                 componentDef : "c:NewContactForm",  
  14.                 componentAttributes: {  
  15.                     contactRecordTypeId : recordTypeId  
  16.                 }  
  17.             });  
  18.             evt.fire();  
  19.               
  20.         } else {  
  21.               
  22.             var createRecordEvent = $A.get("e.force:createRecord");  
  23.             createRecordEvent.setParams({  
  24.                 "entityApiName" : "Contact",  
  25.                 "recordTypeId" : recordTypeId  
  26.             });  
  27.             createRecordEvent.fire();  
  28.               
  29.         }  
  30.           
  31.     }  
  32.       
  33. })  

NewContactForm Lightning Component:


  1. <aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >  
  2.       
  3.     <aura:attribute name="contactRecordTypeId" type="String"/>  
  4.     <div class = "slds-box slds-theme_default">   
  5.         Test  
  6.     </div>  
  7.       
  8. </aura:component>  

Output:



4 comments:

  1. This is not working when trying to create another record without refreshing the page.
    Reproduce Steps:
    1. Click on new to create a record
    2. Save the record
    3. Again go back to Contact tab and click on New button
    4. You notice the page is blank and there is no popup

    ReplyDelete
    Replies
    1. Azarudeen,
      This is just an example.
      You have to use $A.get('e.force:refreshView').fire(); in your case.

      Delete
    2. Where did you put it? it stays in an infinite loop..

      also if i hit cancel in event $A.get("e.force:createRecord") i cannot return to the page where i was.

      Delete