Thursday, July 20, 2017

Inheritance in Lightning Components

Lightning framework also support component inheritance in same way as it is supported in Apex.
You can mark any component as extensible means component can be inherited by any component. Inheritance allows us use attributes and javaScript functions of extensible component in all inherited components.

Consider a scenario in which you have many components which call server side apex controller method from their helper function. So instead of writing callToServer method in all components helper function, you can create a component and mark it as extensible component and write callToServer function in helper function. Now in all your components, extends this component and on any action just call callToServer function.

I have created component "SK_CallToServerUtility" which contain javascript function in helper which performs call to server side apex methods.

In order to mark any component as extensible, just specify extensible="true" in component attribute.

<aura:component extensible="true">
    <!-- below attribute value will be set by components which will inherit it-->
    <aura:attribute name="msg" type="String" default=""/>
{!v.body}
</aura:component>

If you want to inherit any extensible component, then specify component name in extends attribute in component like extends="c:SK_CallToServerUtility".

Please refer below code to have better understanding about inheritance in lightning components.



Code Explaination:

I have created SK_AccountList component which will initially display latest 100 account records by calling callToServer function in doInit function.

When user enter some search string and click search account, then table will display account records with name matching with search string again by calling callToServer function present in SK_CallToServerUtility component  which is inherited by SK_AccountList component.

Also in SK_AccountList component, we are setting the attribute value("msg") of SK_CallToServer component.

Hope this will help in basic understanding of how to use inheritance in Lightning Components!!

Looking forward for everyone's comments and feeback.

More Blogs>>: 
PASSING LIGHTNING COMPONENT ATTRIBUTE VALUE FROM VF PAGE    
FIRE LIGHTNING EVENTS FROM VF PAGE    
DYNAMICALLY CREATING AND DESTROYING LIGHTNING COMPONENTS    
RAISING AND HANDLING CUSTOM EVENTS IN sALESFORCE lIGHTNING    
WHY TO USE DESIGN RESOURCE AND HOW TO ADD DYNAMIC OPTION TO DATASOURCE    
PASSING LIGHTNING COMPONENT ATTRIBUTE VALUE FROM VF PAGE    
PASSING INNER WRAPPER CLASS TO LIGHTNING COMPONENT    
LIGHTNING COMPONENT FOR RECORDTYPE SELECTION FOR ANY SOBJECT    
CUSTOM COMPONENT TO SHOW/HIDE SPINNER IMAGE    

1 comment: