2

I'm working with a testing org and I have put one of my lightning components inside home flexipage. The point is my code is running (cause I put logs in js) but it's not displaying anything.

Extended component (PA_HelperComponent) is just for helper methods (error toast generation)

Component

<aura:component implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes" 
                extends="c:PA_HelperComponent" controller="PA_ListViewControl">
<aura:attribute name="listviewMAP" type="List"/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<aura:iteration items="{!v.listviewMAP}" var="item">
    <lightning:layout>
        <aura:iteration var="lst" items="{!item}">
            <lightning:layoutItem class="slds-size--1-of-1 slds-p-around_xx-small">
                <c:PA_ListViewCounter listviewID="{!lst.listviewID}" listviewName="{!lst.listviewName}" sObjectName="{!lst.objectType}"/>
            </lightning:layoutItem>
        </aura:iteration>
    </lightning:layout>
</aura:iteration>

Controller JS

({
doInit : function(component, event, helper) {
    var params;
    var result;
    var errorMessage;
    var listviewMAP = [];
    var action = component.get("c.retrieveListViewAPINames");
    action.setCallback(this, function(response){
        if(response.getState() === 'SUCCESS'){
            result = response.getReturnValue();
            for(var i in result){
                listviewMAP.push(result[i]);
            }
            component.set("v.listviewMAP", listviewMAP);
            console.log('lstvmap', JSON.stringify(component.get("v.listviewMAP")));
        }
        else{
            errorMessage = helper.getErrorMessage(response.getError()[0]);
            params = {"title":"Error","message":errorMessage,"type":"error","duration":5000};
            helper.generateToast(params);
        }
    });
    $A.enqueueAction(action);
  }
})

PA_ListViewCounter Component

<aura:component implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes" extends="c:PA_HelperComponent" controller="PA_ListViewControl" access="global">
<aura:attribute name="listviewID" type="String"/>
<aura:attribute name="listviewName" type="String"/>
<aura:attribute name="sObjectName" type="String"/>
<aura:attribute name="counter" type="Integer"/>
<aura:attribute name="isLoading" type="Boolean" default="true"/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<div class="pa-background">
    <a data-rec="{!v.listviewID}" class="pa-title" onclick="{!c.redirectToListView}">
        <div class="pa-list-view-title">{!v.listviewName}</div> 
        <aura:if isTrue="{!v.isLoading}">
            <div class="slds-is-relative slds-m-top_x-large">
                <lightning:spinner size="medium" variant="brand"/>
            </div>
            <aura:set attribute="else">
                <div class="pa-list-view-count" style="color:#1b5297">{!v.counter}</div>
            </aura:set>
        </aura:if>
    </a>
</div>

PA_ListViewCounter Controller JS

({
doInit : function(component, event, helper) {
    var params;
    var result;
    var errorMessage;
    var action = component.get("c.listviewInfoForCounter");
    action.setParams({
        "listviewId" : component.get("v.listviewID"),
        "sObjectName" : component.get("v.sObjectName")
    });
    action.setCallback(this, function(response){
        if(response.getState() === 'SUCCESS'){
            result = response.getReturnValue();
            component.set("v.counter", result);
            console.log(result);
            component.set("v.isLoading", false);
        }
        else{
            errorMessage = helper.getErrorMessage(response.getError()[0]);
            params = {"title":"Error","message":errorMessage,"type":"error","duration":5000};
            helper.generateToast(params);
        }
    });
    $A.enqueueAction(action);
},

redirectToListView: function(component, event, helper) {
    var currentTarget = event.currentTarget.getAttribute("data-rec");
    var navEvent = $A.get("e.force:navigateToList");
    navEvent.setParams({
        "listViewId" : currentTarget,
        "listViewName" : null,
        "scope" : component.get("v.sObjectName")
    });
    navEvent.fire();
  }
})

PA_HelperComponent Component

<aura:component extensible="true"
                implements="flexipage:availableForAllPageTypes, 
                            forceCommunity:availableForAllPageTypes"> 
</aura:component> 

PA_HelperComponent Helper JS

({ 
   generateToast : function(params) { 
       var showToast = $A.get("e.force:showToast"); 
       showToast.setParams(params); showToast.fire(); 
   }, 
 })
  • You'll need to post the code that you have in c:PA_ListViewCounter component. Also what does !lst.listviewID print in your inner iteration, have you tried it simply printing on the component? – Jayant Das Feb 18 '19 at 15:35
  • There wont be any records to show in aura:iteration ? – Pranay Jaiswal Feb 18 '19 at 15:38
  • @PranayJaiswal There are records cause I'm seeing them in the logs and it's entering on PA_ListViewCounter component – molinet Feb 18 '19 at 15:44
  • @JayantDas I have updated my question with PA_ListViewCounter component code – molinet Feb 18 '19 at 15:46
  • @JayantDas I tried removing the extends and It's working now but I need that component helper methods. What could be causing this? – molinet Feb 18 '19 at 15:51
2

You seem to be missing the {!v.body} expression in the parent component PA_HelperComponent. Because you are inheriting the component, the body rendered in the child component needs to be passed into the parent component so that it is rendered. Take a look at the documentation for details.

The default renderer for a component iterates through its body attribute, renders everything, and passes the rendered data to its super component. The super component can output the data passed to it by including {!v.body} in its markup. If there is no super component, you've hit the root component and the data is inserted into document.body.

Your PA_HelperComponent should look like:

<aura:component extensible="true" implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes"> 
    {!v.body}
</aura:component> 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.