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    

6 comments:

  1. Looking for a mens puffer jacket? Look no further than Chahyay! We have a wide selection of high-quality puffer jackets, track suits, and more. Shop now and stay warm in style.

    ReplyDelete
  2. Shop the latest collection of womens gym wear at Nayza. Our women's gym wear is designed to provide comfort and style during your workout sessions. Choose from a range of gym dresses and fitness wear to enhance your performance.

    ReplyDelete
  3. Discover the exquisite collection of raw silk, organza dresses and Silk dress design at So Kamal. Elevate your style with our beautiful and elegant designs.

    ReplyDelete
  4. Get the latest styles in mens clothing from Ahmad Shahjahan. Discover a large selection of fashionable and comfy choices suitable for every event. Shop now for the greatest quality unstitched fabric online.

    ReplyDelete
  5. Discover the exquisite world of Ammara Khan - a renowned Pakistani designer known for her elegant dresses and iconic fashion designs. Explore the finest Pakistani designer brands and indulge in the latest trends that redefine pakistani designer dresses and fashion.

    ReplyDelete
  6. Discover the elegant and luxurious Chiffon Collection online in Pakistan. Jazmin provides a wide range of chiffon dresses for women online across Pakistan. So, grab your chiffon dresses today.

    ReplyDelete