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 Salesforce.com 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. Avatar

    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. Avatar

      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”,
      function(response){
      if(response){
      component.set(“v.data”, response);
      //Calling showToast method of Base component
      helper.showToast({
      “title”: “SUCCESS”,
      “type”: “success”,
      “message”: “Account details are loaded”
      });
      }
      },
      {
      “param1” : “value1”,
      “param2” : “value2”
      }

      );

  2. Avatar

    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. Avatar

      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