0

I want change the value in the iteration. I want show fields of Account: Item_1__c, Item_2__c, Item_3__c, Item_4__c..... (we have 12custom fields Item_X__c, but we want show only 6 by default, and show more if user click on button addColumns). This numbers are in a table, and the user can fill it.

<ui:inputNumber class="slds-input" value="{! 'account.Item_' + cont + '__c'}" change="{!c.calculateSum}"/>

In the code, we want access to account, and dynamic value (changing the field). But this is not work, and error appear: Uncaught Action failed: ui:inputSmartNumber$controller$handleChangeEvent [Maximum call stack size exceeded]

Thanks

COMPONENT

<aura:attribute name="accounts" type="Account[]"/>
<aura:attribute name="numCol" type="List" default="1, 2, 3, 4, 5, 6" description="Number of columns."/>

<aura:dependency resource="markup://force:navigateToSObject" type="EVENT"/>

<ltng:require styles="/resource/slds_resource/assets/styles/salesforce-lightning-design-system.css?v=1" />
<div class="slds">
    <div class="slds-page-header noborderbottom" role="banner"> 
        <div class="slds-grid">
            <div class="slds-col slds-has-flexi-truncate">
                <div class="slds-media slds-no-space slds-grow">
                    <div class="slds-media__figure">
                        <lightning:icon iconName="custom:custom17" size="large" alternativeText="Indicates approval"/>
                    </div>
                    <div class="slds-media__body">
                        <p class="slds-text-title_caps slds-line-height_reset">Account</p>
                        <h1 class="slds-page-header__title slds-m-right_small slds-align-middle slds-truncate" title="My Accounts">My Accounts</h1>
                    </div>
                    <lightning:button class="slds-float_right" iconName="utility:add" onclick="{!c.addColumn}" label="Add column"/>
                </div>
            </div>
        </div>
    </div>   
</div>

<div class="slds" style="overflow-x:auto;">
    <table class="slds-table slds-table--bordered slds-table--cell-buffer slds-max-medium-table--stacked-horizontal" aura:id="myTable">
        <thead>
            <tr class="slds-text-heading--label" aura:id="tr_myTable">
                <th scope="col" class="nobordertop" title="Account Name">
                    <div>Name</div>
                </th>
                <th scope="col" class="nobordertop" title="Estimate">
                    <div>Estimate</div>
                </th>
                <aura:iteration items="{!v.numCol}" var="cont">
                    <th scope="col" class="nobordertop" title="Item">
                        <div>Item {!cont}</div>
                    </th>
                </aura:iteration>
                <th scope="col" class="nobordertop" title="Total">
                    <div>Total</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.accounts}" var="account">
                <tr aura:id="tr_myTable">
                    <td data-label="Name" title="Name">
                        <div><a data-record="{!account.Id}" onclick="{!c.redirectToSobject}">{!account.Name}</a></div>
                    </td>
                    <td data-label="Account Number" title="Horas estimadas">
                        <div><ui:inputNumber class="slds-input" value="{!account.Estimate__c}" change="{!c.calculateSum}" disabled="true"/></div>
                    </td>
                    <aura:iteration items="{!v.numCol}" var="cont">
                        <td data-label="{! 'Item ' + cont}" title="{! 'Item ' + cont}">
                            <div><ui:inputNumber class="slds-input" value="{! 'account.Item_' + cont + '__c'}" change="{!c.calculateSum}"/></div>
                        </td>
                    </aura:iteration>
                    <td data-label="Account Number" title="Total">
                        <div><ui:inputNumber class="slds-input" value="{!account.Sum__c}" change="{!c.calculateSum}"/></div>
                    </td>
                </tr>
            </aura:iteration>
        </tbody>
    </table> 
</div>

CONTROLLER & HELPER

doInit : function(component, event, helper) {       
    helper.getAccounts(component);
},

getAccounts: function(component) {
    var action = component.get("c.getAllDesgloseCoste");
    action.setParams({opportunityId: component.get('v.recordId')});   
    //Set up the callback
    action.setCallback(this, function(actionResult) {
        component.set("v.accounts", actionResult.getReturnValue());
    }); 
    $A.enqueueAction(action);  
},

calculateSum: function(component, event){
        var allRows = component.get("v.accounts");
        for(var i=0; i<allRows.length; i++){
            var totalHours;
            if(allRows[i].Item_1__c){
                totalHours += allRows[i].Item_1__c;            
            }
            if(allRows[i].Item_2__c){
                totalHours += allRows[i].Item_2__c;            
            }
            if(allRows[i].Item_3__c){
                totalHours += allRows[i].Item_3__c;            
            }
            if(allRows[i].Item_4__c){
                totalHours += allRows[i].Item_4__c;            
            }
            if(allRows[i].Item_5__c){
                totalHours += allRows[i].Item_5__c;            
            }
            if(allRows[i].Item_6__c){
                totalHours += allRows[i].Item_6__c;            
            }

            if(totalHours){
                allRows[i].Sum__c = totalHours;
            }

        }
        component.set("v.accounts", allRows);
    },
0

Use Slds-hide or aura:if to display them conditionally.

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

<ui:inputNumber class="{!v.advMode ? 'slds-input' : 'slds-hide' }" value="{! 'account.Item_' + cont + '__c'}" change="{!c.calculateSum}"/>

For [Maximum call stack size exceeded] errors, avoid nested aura:iteration(s), That usually gives a starting point for debugging.

Also, In the sample code provided, i am not seeing the c.calculateSum implementation.

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.