[SalesForce] Lightning component lazy loading as lightning:tabset

I have a bunch of components <c:CmpA />, <c:CmpB /> …

Sometimes, I need to perform a check for access rights to this component, so I decided to create a <c:CheckWrapper></c:CheckWrapper> as this:

<aura:component description="CheckWrapper"
                controller="CheckWrapperController"
>
  <aura:if isTrue="{! not(v.loading) }">

    <aura:if isTrue="{! v.isAllowed }">
    {! v.body }
      <aura:set attribute="else">
        {! v.error }
      </aura:set>
    </aura:if>

  </aura:if>
</aura:component>

Its JS controller perform a check on Apex, and then release v.isLoading and v.isAllowed (or not).

The usage is has this:

<c:CheckWrapper somethingToCheck="['this', 'that']">
  <c:CmpA attr="{! v.attr }" />
</c:CheckWrapper>

Everything works perfectly except that even if you are not allowed to use this component (and it will not be mounted on the DOM because of <aura:if isTrue="{! v.isAllowed }">), it is instantiate and its <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> is performed.

How can I prevent this without dynamically creating the component ? As an example, <lightning:Tab> and <lightning:Tabset> work exactly the same way but the child component's init handler is performed on render.

<lightning:tabset selectedTabId="{! v.stepName }" >
  <lightning:tab label="label" aura:id="id" id="id" >
      <c:CmpA attr="{! v.attr }" />
      <!-- Tab is loaded, component is mounted, init is performed -->
  </lightning:tab>
  <lightning:tab label="label2" aura:id="id2" id="id2" >
      <c:Cmpb attr="{! v.attr }" />
      <!-- Tab is hidden, component is unmounted, init is not performed until open the tab -->
  </lightning:tab>
</lightning:tabset>

Do you have any idea I can have the same behaviour ?

Best Answer

Can you try this inside your CheckWrapper Component.

<aura:if isTrue="{! v.isAllowed }">
    <c:CmpA attr="{! v.attr }" />
    {! v.body }
    <aura:set attribute="else">
    {! v.error }
</aura:set>
</aura:if>

Edit Solution 2:

Here you can pass your component as an attribute to checkWrapper and let checkWrapper decide whether to show or not components.

Test App Code

<aura:application >
    <c:CheckWrapper componentName="c:CmpA"></c:CheckWrapper>
</aura:application>

CheckWrapper.cmp

<aura:component description="CheckWrapper" controller="CheckWrapperController">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:handler name="change" value="{!v.isAllowed}" action="{!c.isAllowedChanged}" />

<aura:attribute name="somethingToCheck" type="String"></aura:attribute>
<aura:attribute name="componentName" type="String"></aura:attribute>
<aura:attribute name="component_attributes" type="String"></aura:attribute>
<aura:attribute name="isAllowed" type="Boolean" default="false"></aura:attribute>

<aura:if isTrue="{! not(v.loading) }">

<aura:if isTrue="{! v.isAllowed }">
        {! v.body }

        <aura:set attribute="else">
        {! v.error }
      </aura:set>
    </aura:if>
</aura:if>
</aura:component>

CheckWrapperController.js

doInit : function(component, event, helper) {
    var show = component.get("v.isAllowed");
    if(show)
    helper.createCmp(component,event);

},
isAllowedChanged : function(component, event, helper) {
    var show = component.get("v.isAllowed");
    if(show)
    helper.createCmp(component,event);
}

CheckWrapperHelper.js

createCmp : function(component,event) {

    var cmpName= component.get("v.componentName");
    var cmpAttr = component.get("v.component_attributes");
    var cmp = component;
    $A.createComponent(cmpName, cmpAttr, function(newComp, status, errorMessage){

            if (status === "SUCCESS") {
                var body = cmp.get("v.body");
                body.push(newComp);
                cmp.set("v.body", body);
            }

        });
}

CmpAController.js

doInit : function(component, event, helper) {
    console.log('comp A initiated');
}

CmpA.cmp

<aura:component >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <h1>I'm Component A</h1>
</aura:component>

You can change the default value of isAllowed to true on checkWrapper to check component creation. Hope this helps!!

Related Solutions

[SalesForce] component.get(v.body) not working as expected

@Praveen, yes, this is totally normal. Here is what is happening:

When we say that the body attribute is defined on all components we mean that it's defined on the base <aura:component/> from which all components inherit. Here is a simplified version.

<aura:component/>
   <aura:attribute name="body" type="Aura.Component[]"/>
   {!v.body}
</aura:component>

As you can see, the base component outputs the body tag that it receives in its own body, otherwise, nothing would be rendered. Angular calls that process "transclusion", the inclusion of content from another context.

When you write this:

<aura:component>
    <div>Body part</div>
    <ui:button label="Push Me" press="{!c.printCmpBody}"/>
</aura:component>

You are setting the body tag of the parent component. Everything defined in your component is the "lexical definition", and it's passed to its parent. If you want to read it, you could use cmp.getSuper().get("v.body") but it's a deprecated API, and it will probably not work. However, that's the idea behind it.

Why is it working like this? Let's call your component c:myComponent and use it inside an app:

<c:myComponent>
   <i>Instance Part</i>
</c:myComponent>

This is equivalent to this format:

<c:myComponent>
    <aura:set attribute="body>
       <i>Hello</i>
    </aura:set>
<c:myComponent>

As you see, every component needs to receive an attribute body independently of what it defines internally. You can try this format, it does work, but it's unnecessary except to illustrate how to set the body of a component.

Now, your component can ignore its body attribute as in your original code, or it can use it like this:

<aura:component>
    <div>Body part</div>
    {!v.body}
    <ui:button label="Push Me" press="{!c.printCmpBody}"/>
</aura:component>

You can place the expression {!v.body} anywhere you want.

The rendered content will then be equal to the instance's v.body plus the component-defined lexical definition:

v.body = <i>Instance Part</i>
+
lexical scope = <div>Body part</div>{!v.body}...
=
Rendered: <div>Body part</div><i>Instance Part</i>...

You can get more information on how the attribute body works by looking at slides 24, 25, and 27:

Mastering the Lightning Framework - Part 1

And the explications are at around 15:00 minute here:

Mastering the Lightning Framework - Part 1

[SalesForce] Lightning component init method firing but css addClass() doesn’t appear to work

The answers are correct as to why you're seeing the issue you're seeing. But I don't think that overriding a renderer is the right approach. If you want your button invisible onInit then you should set that in CSS and it should be invisible by default.

The best practice for hide/show is to have a class bound to an attribute in your component like this:

<aura:component>
  <aura:attribute name="isButtonShown" type="Boolean" default="false" />

  <ui:button class="{!v.isButtonShown ? 'visible' : 'hidden'}" />
</aura:component>

And in your controller:

onActivate: function(cmp, event, helper) {
  cmp.set('v.isButtonShown', true);
}

Best Answer

Related Solutions

[SalesForce] component.get(v.body) not working as expected

[SalesForce] Lightning component init method firing but css addClass() doesn’t appear to work

Related Topic