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

https://gist.github.com/d4eda2cb5c781dbe5d27b1c42f7974c1

Base Component Helper – BaseHelper.js

https://gist.github.com/0ce1f37651ab206a2e52da13cb743f60

Sub Component – SubComponent.cmp

https://gist.github.com/cdb1f51bd259a63eac37cc125420958b

Sub Component Controller -SubComponentController.js

https://gist.github.com/b244c0d5d2cd75b2164f88acd5069e67

Sub Component Helper -SubComponentHelper.js

https://gist.github.com/07b297c33ddee4115d7c4e6a93aff6d3

Server Controller – AccountController.apxc

https://gist.github.com/b7a00658d7ba1b010d515514ce10be12

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