[SalesForce] Extending Lightning Components not working

My goal initially was to avoid pasting my common functions into every new components helper.js file (previously researched) and I found out that you can extend the components (some example codes) I tried making a very simple base/abstract component and extending it like so:

1.Abstract component:

<aura:component extensible="true">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <!--<aura:handler event="aura:waiting" action="{!c.loaderStart}"/>-->
    <!--<aura:handler event="aura:doneWaiting" action="{!c.loaderStop}"/>-->
    <p>This is inside abstract</p>
</aura:component>

abstract controller

({
    doInit: function(component, event, helper) {
        console.log('doInit', component, event, helper);
    }
    /*
    loaderStart: function(component, event, helper) {
        console.log('loaderStart');
    },
    loaderStop: function(component, event, helper) {
        console.log('loaderStop');
    }
    */
})

abstract helper (just a bunch of simple stuff)

({
    closeQuickAction: function () {
        $A.get('e.force:closeQuickAction').fire();
    },
    refreshView: function () {
        $A.get('e.force:refreshView').fire();
    },
    navigateToRecord: function (recordId) {
        // 'slideDevName': ( 'chatter', 'related', 'detail' )
        $A.get('e.force:navigateToSObject').setParams({'recordId': recordId, 'slideDevName': 'related'}).fire();
    }
})

2.And the component that extends it:

<aura:component extends="c:CmpBase" implements="force:lightningQuickAction">
    <p>This is inside extender</p>
    <lightning:button type="button" label="Test"/>
</aura:component>

This components (2) content does not show. Why?

Edit: contents and the console.log of the abstract component do show!

Found the docs:
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/oo_cmp_attributes.htm

Best Answer

In the abstract component you need to place the body:

<p>This is inside abstract</p>
{!v.body}

which is where the extending component's content is placed.

(When I had this problem I didn't manage to find an explicit explanation, just that examples had the {!v.body} in the abstract component.)

Related Solutions

[SalesForce] extending lightning components

I have also started using inheritance + interfaces to remove boilerplate and leverage a consistent codebase.

I use many of the same techniques and also add in in Notifers and Spinners to get a nice consistent messaging framework (I note that I've seen a better implementation of spinners than mine by using the doneWaiting and waiting system events, so you might want to take that into consideration if implementing some of my example code.

My interface looks a little like this:

<aura:interface description="Interface that enforces the use of certain events and attributes">

  <aura:attribute name="opportunityId" type="String" description="Id of the Opportunity "/>
  <aura:attribute name="componentId" type="String" description="Id of this component, which should match the aura:id"/>

  <aura:registerEvent name="someCommonEvent" type="c:MySharedEvent"/>

</aura:interface>

My abstract component looks like this:

<aura:component  abstract="true" extensible="true" >
  <aura:handler name="init" value="{!this}" action="{!c.init}" />
  <aura:method name="refresh" action="{!c.reInit}"/>

  <c:Notifier aura:id="notifier" />
  <c:Spinner aura:id="spinner" />

  <!-- body of sub components -->
  {!v.body}

</aura:component>

Inside the Abstract helper, here is some of the code:

showSuccessAlert: function(message, component) {
  var notifier = component.getSuper().find('notifier');
  notifier.showSuccess(message, true, 3000);

},
showErrorAlert: function(message, component) {
  var notifier = component.getSuper().find('notifier');
  notifier.showError(message);
},

callServerMethod: function(component,apexMethodName,apexParams,successCallBack,errorCallBack) {

  var superSelf = this;

  if (!apexMethodName ){
    superSelf.showErrorAlert("Helper Error: no method name supplied");
    return;
  }
  ....
}

Finally, components extending the Abstract component can make server calls, show and hide spinners very easily as shown here:

saveData: function(component) {
  self = this;
  self.showHideSpinner(true,component);
  this.callServerMethod(
    component,
    'c.saveData',                        //apexMethodName
    {data: somedata},                    //apexParams
    function(result){                    //successCallBack
      self.postSaveActions(component);
    },
    null
  );
},

Most of this code is available on Github here

Note, in the Github version, I also have an interface and a common message format between Apex and Lightning that you may or may not want to use - it simplifies data transfer between back and front end, but does impose some restrictions that you might not like.

[SalesForce] Pagination with Lightning Components

Pagination isn't accomplished server-side in Lightning; but instead done by client-side code. See my gist for an example that loads up to 50,000 rows. If you need more than that, you simply need to load the data from the server in pieces, as demonstrated here; basically, just query X number of records, and if there's still more data to get, use the ID as a condition for the next query to get the next "page" of data. Lightning is fast enough that you should be sorting and paging client-side without resorting going back to the server all the time.

Best Answer

Related Solutions

[SalesForce] extending lightning components

[SalesForce] Pagination with Lightning Components

Related Topic