[SalesForce] Set dynamically rows of a table in Lightning

I am new to Lightning, and I would like to create a table that I could set (by a picklist) the number of rows that will appear. I have tried to put the number of rows by default, setting on the attribute indexVar the number of the rows, but there is no effect (it is showing all values). This is the code of the table.

<aura:attribute name="indx" type="Integer" default="5" /> 
<aura:iteration items="{!v.adressList}" var="dir" indexVar="{!v.indx}"> 
<tr>
     <td><div class="slds-truncate" title="{!dir.FE_sales_Country__c}">
          {!dir.FE_sales_Country__c}</div></td>
     <td><div class="slds-truncate" title="{!dir.FE_Sales_City__c}">
          {!dir.FE_Sales_City__c}</div></td>
     <td><a href="{!'/one/one.app?#/sObject/'+ dir.Street__c + '/view'}" 
          target="_blank">{!dir.Street__r.Name}</a></td>
</tr> 
</aura:iteration>

The code of the picklist is the next one (I still have to do doAction to set the value of the rows, I guess that I should just set the value to the indx attribute):

<lightning:select name="mySelect" label="Select an option:" aura:id="mySelect" value="{!v.rowValue}" onchange="{!c.doAction}">                
   <aura:iteration items="{!v.rowoptions}" var="item" >
         <option text="{!item.label}" value="{!item.value}" selected="{!item.selected}"/>
   </aura:iteration>                
</lightning:select>

And in the controller I have put this code:

loadRowOptions: function (component, event, helper) {
    var opts = [
        { value: "5", label: "5" },
        { value: "10", label: "10" },
        { value: "25", label: "25" },
        { value: "50", label: "50" }
     ];
     component.set("v.rowoptions", opts);
}

So I think the main problem is that I am not able to just show the number of rows that I want.

Best Answer

That's simply not what indexVar does on <aura:iteration>:

indexVar String The variable name to use for the index of each item inside the iteration.

It stores on each loop iteration the current index in the row array.

You can control the number of rows you display by manipulating the content of v.adressList, which the iteration component is using to generate its rows. If you're trying to implement pagination, you should be setting that value to a selected sub-set of your backing data store, based upon the value of mySelect.

Related Solutions

[SalesForce] Lightning Component: Retrieve values from dynamic forms

This has a similar solution to this issue:

How to remove items from a dynamic list in Lightning component?

It doesn't feel clean, but this will return both the value and the input that called it:

Component

<div class="slds-form-element__control">
    <ui:inputPhone class="slds-input" placeholder="{!Phone}" change='c.save'>
    </ui:inputPhone>
    <span id="{!'thisInput'+i}"></span>
</div>

Controller

save: function(cmp, evt){
  var targetCmp = evt.getSource();
  var val = targetCmp.get('v.value');
  var inputId = targetCmp.getElement().nextSibling.nextSibling.id;

  console.log(value);
  console.log(inputId);
}

If you're wondering why the double "nextSibling", it's because the ui:input renders something like:

<!--render facet: 0000:00;a-->

following the element.

I do hope there is a better way to do this.

[SalesForce] Dynamically add and remove rows in lightning

I have done a simple component which display contacts list which involves two components

1.ContactList - Parent (Fetches the contact details)

2.ContactListItem - Child (Display individual contact detail)

Component Level Event is used to carry the contact from ContactListItem to ContactList which holds the source contact array where contact removal is done.

ContactList.cmp

<aura:component access="public" controller="ContactController">
    <aura:attribute name="contacts" type="Contact[]" access="private"/>
    <aura:handler name="init" action="{!c.doInit}" value="{!this}" />
    <aura:handler name="deleteContact" event="c:deleteContactEvt" action="{!c.removeContact}" />
    <table class="borderCls">
        <tr>
            <th class="borderCls">Name</th> 
            <th class="borderCls">Phone</th>
        </tr>   
        <aura:iteration items="{!v.contacts}" var="contact">
            <c:ContactListItem contactRec="{!contact}"/>
        </aura:iteration>
    </table>
    <button onclick="{!c.addContact}">Add Contact</button>
</aura:component>

ContactListController.js

({
    doInit : function(component, event, helper) {
        var action = component.get("c.getContacts");
        action.setCallback(this, function(data) {
            console.log(data.getReturnValue());
            component.set("v.contacts", data.getReturnValue());
        });
        $A.enqueueAction(action);
    }
    ,
    addContact : function(component, event, helper){
       var contacts = component.get("v.contacts");
        var len = contacts.length;
        contacts.push({
            'Name':'Test Contact - '+len,
            'Phone':'123'+len
            'sobjectType':'contact'
        });
        component.set("v.contacts",contacts);
    }
    ,
    removeContact : function(component, event, helper){
       var selCont = event.getParam("selectedContact");
       var contacts = component.get("v.contacts")
       var index = contacts.indexOf(selCont);
       if (index > -1) {
            contacts.splice(index, 1);
       }
       component.set("v.contacts",contacts);
    }
})

ContactListItem.cmp

<aura:component >
    <aura:attribute name="contactRec" type="Contact" access="public"/>
    <aura:registerEvent name="deleteContact" type="c:deleteContactEvt"/>
    <tr > 
        <td class="borderCls" >{!v.contactRec.Name}</td> 
        <td class="borderCls" >{!v.contactRec.Phone}</td>
        <td> <ui:button label="Delete" press="{!c.deleteContact}"/></td>
    </tr>
</aura:component>

ContactListItemController.js

({
    deleteContact : function(component, event, helper) {
        var event = component.getEvent("deleteContact");
        event.setParams({
            'selectedContact':component.get("v.contactRec")
        });
        event.fire();
    }
})

deleteContactEvt.evt (Component Level Event)

<aura:event type="COMPONENT" description="Delete Contact Event">
    <aura:attribute name="selectedContact" type="Contact"/>
</aura:event>

ApexController

public class ContactController {
    @AuraEnabled
    public static List<Contact> getContacts() {
        return [Select Id, Name, Birthdate, AccountId, Account.Name, Email, Title, Phone 
                From Contact order by LastModifiedDate desc
                limit 10];
    }
}

I Hope this helps

Best Answer

Related Solutions

[SalesForce] Lightning Component: Retrieve values from dynamic forms

[SalesForce] Dynamically add and remove rows in lightning

Related Topic