Hey Folks,
In this Blog, We are going to learn - how to override a object with lightning Component.
After Achieving this, if Go to Contacts and Click on New Button, You will able to see the fields which you have added in lightning Component.
Are you Guys Curious to learn?
Lets Go........
Here is the quick Demo-
Hope you all understood what we are trying to Implement in this blog.
Lets do some Coding 💓
First Open your Developer Console -> File -> New -> Lightning Component -> fill Details and Click Submit.
--------------------------------------------------------------------------------------------------------------------------
Open your Component (yourComponentName.cmp file) and paste below Code.
<aura:component controller="tryingRecClass" implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride" access="global" >
<aura:attribute name="newContact" type="Contact" default="{ 'sobjectType': 'Contact',
'First Name': '','Last Name': '','Email':'','Phone':'',}"/>
<form>
<lightning:input aura:id="contactField" type="text" value="{!v.newContact.FirstName}" Name="First Name" label ="First Name"/>
<lightning:input aura:id="contactField" type="text" value="{!v.newContact.LastName}" Name="Last Name" label ="Last Name"/>
<lightning:input aura:id="contactField" type="email" name="email" label="Email" value="{!v.newContact.Email}" />
<lightning:input aura:id="contactField" type="Phone" value="{!v.newContact.Phone}" Name="Phone" label="Phone"/>
<lightning:button aura:id="contactField" label="Save Contact" onclick="{!c.savecontact}"/>
</form>
</aura:component>
--------------------------------------------------------------------------------------------------------------------------
Open your Controller (yourComponentName.js file) and paste below Code.
({
savecontact: function(component, event, helper) {
var newcon = component.get("v.newContact");
var action = component.get("c.save");
action.setParams({
"con": newcon
});
action.setCallback(this, function(a) {
var state = a.getState();
if (state === "SUCCESS") {
var name = a.getReturnValue();
alert("success");
}
else
{
alert("Failed");
}
});
$A.enqueueAction(action)
}})
--------------------------------------------------------------------------------------------------------------------------
Now Lets Create Apex Class-
Open your Developer Console -> File -> New -> Apex Class -> fill Details and Click Ok.
Now in your class className.apxc, paste below Code.
public class tryingRecClass {
@AuraEnabled
public static Contact save(contact con)
{
insert con;
return con;
}
}
--------------------------------------------------------------------------------------------------------------------------
Done with the Coding. You can also Visit on
Git Repo to check code again
Now, lets override this component on our Object.
In this blog, we are going to override this component on Contacts Object.
Open your Salesforce Org. Click on Object Manager -> Select Contact Object -> Buttons, links and Actions -> Search New -> Click Edit on New
Add Lightning component from dropdown List as shown in below Image and Click Save
Hurray!
You have Successfully Override Lightning Component on Object.
Its Time to test Now💪
Go contacts and Click on New Contact. You will see something like below Image.
Try to Save the Contact and after saving check whether it is Saved in your Contact list or not!
You can find Saved Contact in your Contact List of Salesforce Org.
Hope you have learned something new😃
Stay tuned for upcoming Blogs
Happy Coding😊
Contact:
