I have been thinking about to write on Inheritance in lightning component and thought it is a simple topic to script as a blog. But I did not see a blog wherein the Inheritance is well written, so here I am trying to explain in details, please let me know in case of any suggestion.
Here I am going to talk about:
- How can a component inherit from a parent component?
- How will be the attributes behaviour in child and parent component?
- How will be the event behaviour in parent and child component?
- How the methods in the helper, controller JS of parent and child component behaves?
- What are other benefits of Inheriting a parent component in Lightning?
Before jumping into the discussion, I just want to talk about the child and parent component we are going to build as part of the above explanation. We are going to create a generic parent component to display a form to capture any details. Child component will inherit parent component to show form specific to capture personal details without re-writing the code.
Create a Parent Component
Object Details component should have an attribute extensible=”true” so that any component having access can inherit from ObjectDetails component.
Child Component and Attribute Behaviour
Now the child component, here we are going to just inherit from parent component and pass only the relevant attribute values so that the same attribute values in parent will be overridden. For more details below is the code of child component.
All Helper Methods, Controller Methods of parent component will be accessible to child component, For example, if the parent component controller JS has an action called doSomething, the child component can directly call the action using the {!c.doSomething} syntax. Similarly Child Component controller can call Helper methods available in Parent component. Salesforce don't recommend using inheritance of client-side controllers as this feature may be deprecated in the future to preserve better component encapsulation., so salesforce recommend that you put common code in a helper instead.
A child component can override a parent component's helper method by defining a method with the same name as an inherited method in the child component helper JS. In this way you don’t really have to rewrite the code for every object, for any object just pass the attribute values.
Events Behavior and Order of Execution
A child component that extends a parent component can handle events fired by the parent component. The child component automatically inherits the event handlers from the parent component.
The parent and child component can handle the same event in different ways by adding an <aura:handler> tag to the child component. The framework doesn't guarantee the order of event handling.
Finally I just added the PersonalDetailsForm.Cmp under a Tab in Account Details Page using App Builder and below is the output:
Let me know in case of any suggestions/feedback.
Follow me
@ramsujesh
