0

I have a table for create expenses. I need to identify each element that I select, in order to perform validations or actions for each one. I have tried:

var rowId = event.currentTarget.id;

It works in removebutton, but not in other rows How can access to Id of element changed (picklist, number and text)??

Thanks

COMPONENT

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

<aura:attribute name="expenses" type="Expenses__c[]"/>
<aura:attribute name="options" type="String[]" />
<aura:attribute name="selectedValue" type="String"/>

<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">Expenses</p>
                        <h1 class="slds-page-header__title slds-m-right_small slds-align-middle slds-truncate" title="My Expenses">My expenses</h1>
                    </div>
                    <lightning:button class="slds-float_right" iconName="utility:refresh" onclick="{!c.refreshTable}" label="Refresh"/>
                    <lightning:button class="slds-float_right" iconName="utility:add" onclick="{!c.addRow}" label="Create expense"/>
                    <lightning:button class="slds-float_right" iconName="utility:clear" onclick="{!c.removeRow}" label="Delete expense"/>
                </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">
        <thead>
            <tr class="slds-text-heading--label">
                <th scope="col" class="nobordertop" title="Type">
                    <div>Type</div>
                </th>
                <th scope="col" class="nobordertop" title="Import">
                    <div>Import</div>
                </th>
                <th scope="col" class="{nobordertop'}" title="Description">
                    <div>Description</div>
                </th>
                <th scope="col" class="{nobordertop'}" title="Actions">
                    <div></div>
                </th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.expenses}" var="expenses">
                <tr>
                    <td data-label="{!expenses.PL_Expenses__c}" title="{!expenses.PL_Expenses__c}">
                        <div>
                            <ui:inputSelect aura:id="acc" required="true" value="{!expenses.PL_Expenses__c}" change="{!c.changeValue}">
                                <ui:inputSelectOption text="" label="--None--" />
                                <aura:iteration items="{!v.options}" var="ac">
                                    <ui:inputSelectOption text="{!ac}" label="{!ac}"/>
                                </aura:iteration>
                            </ui:inputSelect>
                        </div>
                    </td>
                    <td data-label="{!expenses.Import__c}" title="{!expenses.Import}">
                        <div><ui:inputNumber class="slds-input" value="{!expenses.Import__c}" change="{!c.changeValue}" aura:id="{!expenses.Id}"/></div>
                    </td>
                    <td data-label="{!expenses.Description__c}" title="{!expenses.Description}">
                        <div><ui:inputText class="slds-input" value="{!expenses.Description}" change="{!c.changeValue}" aura:id="{!expenses.Id}"/></div>
                    </td>
                    <td data-label="" title="" style="width: 50px;">
                        <form>
                            <a onclick="{!c.deleteRowDDBB}" id="{!expenses.Id}">
                                <lightning:icon variant="error" iconName="utility:delete" class="slds-icon slds-icon_small" size="small" alternativeText="icon"/>
                                <span class="slds-assistive-text">Delete expense</span>
                            </a>
                        </form>
                    </td>
                </tr>
            </aura:iteration>
        </tbody>
    </table> 
    <lightning:button class="slds-align_absolute-center slds-button slds-button_brand slds-m-top_small" onclick="{!c.save}" label="Save"/>
</div>

  • Firstly You can't set a dynamic Ids to aura:id . Do you need Element Local Id or Record Id that which row is editing? – vignesh Jan 31 at 13:58
  • Hi, I need the Record Id. In the last column, with onClick (deleteRowDDBB), the function works; but on the other 3 columns, with onChange and other input, not works – Juan Manuel Garcia Jan 31 at 15:12
  • You used <a> tag on last column you can get by using event.target.id . If you want to know by change you can go with @sfdcfox as suggested or you can get it by componentize the code by seperating every row as component . – vignesh Jan 31 at 15:26
  • @vignesh, OK, with <a> tag we can use event.target.id; but with <ui:input...> it not works – Juan Manuel Garcia Jan 31 at 15:33
  • It is a aura component not a HTML element , you cant access id by '<ui:input..>' using event.target.id . – vignesh Jan 31 at 15:53
2

aura:id is not the same as id. It has special rules, notably that it does not support merge syntax; the value is always treated as a literal value. Instead, it's probably easier to move the change handler to the next higher element, and set the record Id there. Here's an example:

<td data-label="{!expenses.Description__c}" 
    title="{!expenses.Description}" 
    data-id="{!expenses.Id}"
    onchange="{!c.changeValue}">
    <div><ui:inputText class="slds-input" value="{!expenses.Description}" /></div>
</td>

To actually get the value, get the list and then find the specific record:

var expense = component.get("v.expenses").find(record => record.Id === event.currentTarget.dataset.id);
  • Hi. The function onChange in <td> not works, it must be in the <ui:inputText/> event.target return undefined – Juan Manuel Garcia Jan 31 at 15:18
  • @JuanManuelGarcia It actually should be currentTarget in your case, since there is an extra div. I've fixed this answer. – sfdcfox Jan 31 at 15:26
  • event.target and event.currentTarget is undefined – Juan Manuel Garcia Jan 31 at 15:31
0

It is possible to get a dynamic variable from your iteration using data-index attribute on any html element (would not work on aura components).

Inside your iteration:

 `<a data-index="{!item.Id}" onclick="{!c.onClickAction}" >`

on your js controller :

var clickedItemId = event.currentTarget.dataset.index

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.