[SalesForce] Get array size from parent component

I have a component, with an attribute being an array of my custom sObject.
In the component, I aura:iteration over that array, each time calling a new component with the (then) current item in the array.

In that child component I have up- and down-buttons to move said child up/down the list of children.

This order is saved by a custom field in said custom sObject named 'Order__c' (number).

Now I need (want) to disable the up-button for the first (highest) child, and the down-button for the last (lowest) child. For the first child this is simple: the order always starts at 1 so a child with order__c == 1 is the first child.
However, the last child's order__c == childs.size.

How do I get this size of the children array attribute inside the child component? I was thinking along the lines of a function 'parentArray.getSize' which is called exactly once: upon initialization of the child component. (When we press the up- or down button on a child, the children components should be reinitialized because the parent components' attribute has been changed.)

<aura:component > <!-- sObjectItemList.cmp -->
<aura:attribute name="items" type="sObjectItem__c[]"/>
<aura:iteration items="{!v.items}" var="item">
    <c:sObjectItem item="{!item}"/>
</aura:iteration>
</aura:component>

Parent component ^^

Child Component vv

<aura:component > <!-- sObjectItem.cmp -->
<aura:attribute name="item" type="sObjectItem__c" />

<aura:if isTrue="{!v.item.Order__c == 1}">
    <lightning:buttonIcon iconName="utility:up" disabled="true" variant="bare" onclick="{!c.moveItemUp}" size="large" alternativeText="Move this item up" />
    <aura:set attribute="else" >
        <lightning:buttonIcon iconName="utility:up" variant="bare" onclick="{!c.moveItemUp}" size="large" alternativeText="Move this item up" />
    </aura:set>
</aura:if>

<aura:if isTrue="{!v.item.Order__c == 3}"> <!-- HERE I NEED THE PARENT ARRAY SIZE -->
    <lightning:buttonIcon iconName="utility:down" disabled="true" variant="bare" onclick="{!c.moveItemDown}" size="large" alternativeText="Move this item down" />
    <aura:set attribute="else" >
        <lightning:buttonIcon iconName="utility:down" variant="bare" onclick="{!c.moveItemDown}" size="large" alternativeText="Move this item down" />
    </aura:set>
</aura:if>

</aura:component>

(this is the simplistic form of the objects, I have a bunch of slds-markup classes and div's in there but this is the functionality at stake.)

Thank you!

Best Answer

You could have an aura:attribute say totalItems in the child and pass the length(i.e size) => {!v.items.length} of items.

Parent:

<aura:iteration items="{!v.items}" var="item">
    <c:sObjectItem item="{!item}" totalItems="{!v.items.length}"/>
</aura:iteration>

Child:

<aura:component > <!-- sObjectItem.cmp -->
    <aura:attribute name="item" type="sObjectItem__c" />
    <aura:attribute name="totalItems" type="Integer" />
    <!-- code -->

</aur:component>

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] How to get Apex list into component controller array variable

Push pushes an element on to the Array. An Array may contain another Array, so you've basically made something like this:

[ { Forecast1 }, [ { Forecast2, Forecast3, ... } ] ]

In other words, you now have an Array inside an Array.

Instead, if you want to add items from a list, you should use concat:

forecasts = forecasts.concat(response.getReturnValue());

Note that concat returns a new Array that contains both of the original arrays, hence the assignment back into the forecasts variable.

Best Answer

Related Solutions

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

[SalesForce] How to get Apex list into component controller array variable

Related Topic