0

I have a table, and I want access to value of the columns:

  • I want sum all rows (fields Item_1__c, Item_2__c, Item_3__c, Item_4__c of all rows) and set to variable totalColumns.
  • And addClass to row if the sumColumn of this row is greater than 50 (example, if row1 --> Item_1__c + Item_2__c + Item_3__c + Item_4__c > 50 ; addClass "moreHours").

I dont know how to access the value of the elements in the table. Thanks

Component:

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

<aura:attribute name="accounts" type="Account[]"/>
<aura:attribute name="totalColumns" type="decimal" default="0"/>

TOTAL: {!v.totalColumns}
<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="Item1">
                    <div>Item 1</div>
                </th>
                <th scope="col" class="nobordertop" title="Item2">
                    <div>Item 2</div>
                </th>
                <th scope="col" class="nobordertop" title="Item3">
                    <div>Item 3</div>
                </th>      
                <th scope="col" class="nobordertop" title="Item4">
                    <div>Item 4</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="Account Number">
                        <div><ui:inputNumber class="slds-input" value="{!account.Item_1__c}" change="{!calculateSum}"/></div>
                    </td>
                    <td data-label="Account Number" title="Account Number">
                        <div><ui:inputNumber class="slds-input" value="{!account.Item_2__c}" change="{!calculateSum}"/></div>
                    </td>
                    <td data-label="Account Number" title="Account Number">
                        <div><ui:inputNumber class="slds-input" value="{!account.Item_3__c}" change="{!calculateSum}"/></div>
                    </td> 
                    <td data-label="Account Number" title="Account Number">
                        <div><ui:inputNumber class="slds-input" value="{!account.Item_4__c}" change="{!calculateSum}"/></div>
                    </td>
                </tr>
            </aura:iteration>
        </tbody>
    </table> 
</div>

CSS

.THIS.moreHours{
    background-color: red;
}

closed as off-topic by Oleksandr Berehovskyi, Reshma, Pranay Jaiswal, battery.cord, codeyinthecloud Jan 25 at 15:32

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions on problems in code you've written must describe the specific problem and include valid code to reproduce it. For help writing short, self-contained syntactically-valid examples, see: SSCCE.org" – Oleksandr Berehovskyi, Reshma, Pranay Jaiswal, battery.cord, codeyinthecloud
If this question can be reworded to fit the rules in the help center, please edit the question.

  • How would you sum a row? each column could have different data types. I see name as one of column. Please update your question. – Amit Jan 25 at 9:19
  • Sorry, I edited the question. I need: Sum all rows of the table (number values), and validate if the 4values os each row is greater than 50 (in this case addClass) – Juan Manuel Garcia Jan 25 at 9:47
0
  1. You can use ternary operator to add class based on sum of rows.

class="{!account.row1 + account.row2 gt 50 ? 'moreHours' : ''}"

  1. To update totalColumns to sum of all rows. Recalculate sum of all rows on change of input and assign to totalColumns attribute.

Refere below code I have tried it for 2 rows. you add your rows as per requirement.

Component :

        <aura:handler name="init" action="{!c.doInit}" value="{!this}" />
    <aura:attribute name="accounts" type="Account[]"/>
    <aura:attribute name="totalColumns" type="decimal" default="0"/>

    TOTAL: {!v.totalColumns}
<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="Item1">
                    <div>Item 1</div>
                </th>
                <th scope="col" class="nobordertop" title="Item2">
                    <div>Item 2</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.accounts}" var="account">     
                <tr aura:id="tr_myTable" class="{!account.NumberOfEmployees + account.Contact_Count__c gt 50 ? 'moreHours' : ''}">
                    <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="Account Number">
                        <div><ui:inputNumber class="slds-input" value="{!account.NumberOfEmployees}" change="{!c.calculateSum}"/></div>
                    </td>
                    <td data-label="Account Number" title="Account Number">
                        <div><ui:inputNumber class="slds-input" value="{!account.Contact_Count__c}" change="{!c.calculateSum}"/></div>
                    </td>
                </tr>
            </aura:iteration>
        </tbody>
    </table> 
</div>

JS Controller :

({
    doInit : function(cmp, event, helper)
    {
        var action1 = cmp.get("c.getAccounts");
        action1.setCallback(this, function(response){
            if(response.getState() === 'SUCCESS' && response.getReturnValue()) {
               cmp.set("v.accounts", response.getReturnValue());
            }
        });
    $A.enqueueAction(action1);
    },
    calculateSum : function(cmp, event, helper) {
        var total = 0;
        var accList = cmp.get("v.accounts");
        for(var i = 0; i < accList.length; i++) {
            if(!isNaN(accList[i].NumberOfEmployees)) {
                total += accList[i].NumberOfEmployees;    
            }
            if(!isNaN(accList[i].Contact_Count__c)) {
                total += accList[i].Contact_Count__c;
            }

        }
        cmp.set("v.totalColumns", total);
    }
})
  • It works corrrectly, its very easy, thanks and please, how can I add a style in a specific row? – Juan Manuel Garcia Jan 25 at 11:09
  • @juan Manual Garcia If it works for you then you can accept answer, so that it will be useful for others. – Amit Jan 25 at 11:11
  • Please, I asked 2 questions in the post, the first is OK, could you tell me how add styles please? – Juan Manuel Garcia Jan 25 at 11:31
  • I have added answer for both. check <tr aura:id="tr_myTable" class="{!account.NumberOfEmployees + account.Contact_Count__c gt 50 ? 'moreHours' : ''}">.In this line of code you replace your rows instead of account.NumberOfEmployees and other fields. – Amit Jan 25 at 11:35
  • @Amit - 'Check this code' is not very instructive for others to learn, pelase include a detailed description of what it is the code does and how it addresses the OP's question(s). thanks – glls Jan 25 at 15:43

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