1

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!

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

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>
  • 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 '16 at 17:03

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.