2

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!

1
  • i think you can do at parent component it self, apply same tags parent, i think it should work.
    – Raj_SFDC
    Nov 1, 2016 at 15:31

1 Answer 1

5

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>
1
  • 2
    Thanks! I spoke with my supervisor sometime after posting this question and eventually he also came to this conclusion. Quickly implemented this and it works like a charm.
    – Diamundo
    Nov 1, 2016 at 17:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .