Inheritance In Lightning Component – Generic Server Call Method

Inheritance In Lightning Component – Generic Server Call Method

Inheritance, The perfect way to create Code Reusability and Extensibility!!

With this blog, we will learn how you can leverage the inheritance in Lightning Component. You need to follow below steps:

  • Create a Base Component (The component that you will inherit). Make you Base component extensible using extensible=”true”. Define the body of Base component.
  • Create a controller or helper or both for your base component.
  • You must put {!v.body} inside your base component’s code. This will allow your base component to handle the events generated by Sub Components.
  • In your Sub Component definition extend base component. Like extends=”namespace:baseComponentName”
  • Use attributes of Base component in the similar way as you do for the normal component like {!v.baseComponentAttributeName}
  • Call controller method of Base component directly from Sub component like {!c.baseControllerMethodName}
  • Call helper method of Base component from helper/controller of Sub component like helper.baseHelperMethodName(params);


Now let’s see an example of fetching account records from the server using inheritance. We will create a generic callServer method that can be used by any component to call server side methods and process the response.

Base Component – Base.cmp

Base Component Helper – BaseHelper.js

Sub Component – SubComponent.cmp

Sub Component Controller -SubComponentController.js

Sub Component Helper -SubComponentHelper.js

Server Controller – AccountController.apxc

So this is how you can create your own generic methods and use inheritance to share these methods among other components. You can also use this generic call server method for easy server calling and response handling.

Curious mind:

  • What’s get inherited?
    • Attributes of the component markup, Controller and Helper methods gets inherited and can be used by Sub Components. Along with these, events are also get inherited which can be handled by both Base and Sub Components. Read more here
  • What are the gotchas?
    • You must make your base component, either abstract=true or extensible=true.
    • Your Base component markup must include “{!v.body}”. Details here


Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

This Post Has 4 Comments

  1. Hello Manish,

    Thanks for sharing such a beautiful article. It is quite helpful.
    Can you please give an example how to pass the parameters from child component to base component. Thanks in advance.

    1. Hi Arpit,

      Lets say you want to pass some parameter to above method in this blog, this is how you can do it:

      helper.callServer(component, “c.getAccounts”,
      component.set(“”, response);
      //Calling showToast method of Base component
      “title”: “SUCCESS”,
      “type”: “success”,
      “message”: “Account details are loaded”
      “param1” : “value1”,
      “param2” : “value2”


  2. Hey Manish,
    Hope you’re doing Good! Just one thing to clear…When we use this generic method in Helper and use that in our Sub Component’s Helper…..The flow is like initially your component gets loaded then to your controller then to its helper,this helper hits server and again it has to go to the Base helper which will hit server again. Am I right or Wrong? So does it hit Server Twice? Is it best practice???

    1. No, you will hit server only once as your server side class will only be called from Base component’s helper.

Leave a Reply

Close Menu