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:



No comments:

Post a Comment