[SalesForce] Multiple input inside aura:iteration table

I have an attribute that I am rendering to a table inside an aura:iteration with the following code:

<aura:attribute name="licenceassocparties" type="String[]" default="false" access="PRIVATE"/>

<table class="slds-table slds-table--bordered slds-table--cell-buffer slds-table--striped slds-max-medium-table--stacked-horizontal"
        role="grid">
    <thead>
    <tr>
        <th class="slds-is-sortable slds-cell-wrap" scope="col">
            Name
        </th>
        <th class="slds-is-sortable slds-cell-wrap" scope="col">
            Role
        </th>
        <th class="slds-is-sortable slds-cell-wrap" scope="col">
            Email
        </th>
    </tr>
    </thead>
    <tbody>
    <aura:iteration var="party" items="{!v.licenceassocparties}">
        <tr class="slds-hint-parent">
            <td role="gridcell" class="slds-cell-wrap" data-label="Name">
                <div class="">{!party.name}</div>
            </td>
            <td role="gridcell" class="slds-cell-wrap" data-label="Role">
                <div class="" data-label="Role">{!party.role}</div>
            </td>
            <td role="gridcell" class="" data-label="Email Address">
                <div class="" data-label="Email Address">
                    <ui:inputEmail class="field"
                                   maxlength="80"
                                   mouseout="{!c.addEmails}"
                                   placeholder="Email Address"/>
                    <span id="{!'emailInput'+index}"></span>
                </div>
            </td>
        </tr>
    </aura:iteration>
    </tbody>
</table>

The 3rd column is an email input field and I would like to capture the input for each row (if it's not null, which is a valid option) and pass this data to the controller for processing.
I based the below controller class on this solution (HERE) but I am getting 'undefined' for variable 'val'.

addEmails : function(component,event,helper) {
    var targetCmp = event.getSource();
    var val = targetCmp.get('v.value');
    console.log(val);
    var inputId = targetCmp.getElement().nextSibling.nextSibling.id;
    console.log(value);
    console.log(inputId);
}

Is there a cleaner way of retrieving multiple inputs from a dynamic table such as this? Any help in the right direction would be greatly appreciated.

To add further clarity of what I'm trying to achieve, the screenshot below shows a table with multiple email input fields (there can be a variable number of rows in this table, depending on the data source). What I would like to do is get any input email values (if they are not null) and add them to the correct element/position of the "licenceassocparties" array.

Best Answer

I didn't get what you are trying to achieve by this component. But Quick fix to your problem i.e getting undefined value would be to add value attribute to ui:inputEmail component.

You can keep default value as blank or some value as

<ui:inputEmail class="field" maxlength="80" mouseout="{!c.addEmails}" placeholder="Email Address" value="some value"/>

You can assign attribute to value

<ui:inputEmail class="field" maxlength="80" mouseout="{!c.addEmails}" placeholder="Email Address" value="{!v.attribute}"/>

Related Solutions

[SalesForce] aura:if inside aura:iteration

Are you trying to run the list only for the Contact Ids which are included in the list.

You can include them in the list by creating null check in the apex controller. Or you can check them in the Javascript controller. Suppose lets assume that you are trying to return a Wrapper list. Forgive me for my syntax. this is just a code snippet. Use as per your convenience.

Consider,

public class Sample(){
    @AuraEnabled
    global static string getWrapperValues(){
        List<ContactWrap> wrapList = new list<ContactWrap>();

        for(Contact c : your list){ // run your contactlist
        ContactWrap cw = new ContactWrap();
        cw.theContact = c;
        wrapList.add(cw);
        }
    }
    return JSON.serialize(wrapList);
}
public list ContactWrap{
    @AuraEnabled
    public Contact theContact {get;set;}
}

js Controller :

({  
    doInit : function(Component){
        var action = component.get("c.getWrapperValues");

        // set your params for action if any 

        action.setCallBack(this,function(response){
            var output = response.getReturnValue();
            var wrapper = JSON.parse(output);
            for(var i=0;i<wrapper.length;i++){
                var arrVar = wrapper[i];
                console.log('ID**'+arrVar.theContact.Id);
                if(arrVar.theContact.Id){
                    // set your list 
                    component.set("v.yourListAttributeName",wrapper);
                }
                else{
                    // show custom errors
                }
            }
        });
        $A.enqueueAction(action);
    }
})

[SalesForce] Toggle buttonIcon inside

You could solve this a few ways. Probably the most commonly accepted is to make a custom component to wrap each instance of the iteration you're looping through, then give that component its own "toggle" method. Like this:

The list becomes:

<aura:iteration items="{!v.accountsList}" var="account" indexVar="i">
    <c:accountListItem acct="{!account}" />
</aura:iteration>

accountListItem.cmp looks like:

<aura:attribute type="boolean" name="showDetail" default="false" />
<aura:attribute type="object" name="acct" />
<aura:attribute type="object" name="detailData" />
<div class="slds-p-around--large">
     <div class="slds-page-header" style="cursor: pointer;">
      <section class="slds-clearfix">
        <div class="slds-float--left">
          <aura:if isTrue="{!v.displayDetail == false}">
            <lightning:buttonIcon iconName="utility:add" size="x-small" alternativeText="Indicates add" onclick="{!c.showAccountSection}"/>
          </aura:if>
          <aura:if isTrue="{!v.displayDetail == true}">
            <lightning:buttonIcon iconName="utility:dash" size="x-small" alternativeText="Indicates dash" onclick="{!c.hideAccountSection}"/>
          </aura:if>
        </div>
        <div class="slds-m-left--large">{!v.acct.name}, {!v.acct.accountManageStatus}, {!v.acct.balance}
        </div>

          </section>
        </div>
    </div>

you JS accountListItemController would have something like the following:

showAccountSection : function(component, event, helper){
    component.set('v.showDetail',true);
    helper.toggleAccountSection(component);
},
hideAccountSection : function(component, event, helper){
    component.set('v.showDetail',false);
}

And your helper that does the fetching of the account detail data would no longer need to use the Id from the button, but instead get it straight from the component property, like this:

toggleAccountSection : function(component){
    if(component.get('v.detailData') == null){
    // make your callout to get the detail info, and use
    // component.set('v.detailData',res.getReturnValue());
    // or something similar.
)

Best Answer

Related Solutions

[SalesForce] aura:if inside aura:iteration

[SalesForce] Toggle buttonIcon inside

Related Topic