List: This is an ordered collection of items. A List can contain duplicate values. We can directly iterate List in Lightning Component.
How to use List in Lightning Component?
Step 1: Need to write a Selector Apex Class which will return all the Contact Records from your organization.
ContactSelector.apxc | return all the Contact Records
/* @name: ContactSelector
@description: return all the Contact Records*/
public with sharing class ContactSelector {
public static List<Contact> selectRecords(){
List<Contact> contactList = [SELECT Id, Name, AccountId FROM Contact];
if(contactList <> NULL && contactList.size()>0)
return contactList;
else
return NULL;
}
}
Step 2: Need to write Controller Class which will call the Selector class as mentioned above.
SimpleListController.apxc | to call the Selector class and get all the Contact records
/* @name: SimpleListController
@description: to call the Selector class and get all the Contact records*/
public with sharing class SimpleListController {
@AuraEnabled
public static List<Contact> getContacts(){
return ContactSelector.selectRecords();
}
}
Step 3: Please create a Lightning Component bundle named “simpleList”.
simpleList.cmp | to show all the contacts as picklist value
<!-- @name: simpleList @description: to show all the contacts as picklist value -->
<aura:component implements="flexipage:availableForAllPageTypes" controller="SimpleListController">
<aura:attribute name="selectedContact" type="String"/>
<aura:attribute name="contactList" type="List"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<lightning:card title="Showing List">
<lightning:select name="Select a Contact" label="Select a Contact" aura:id="contactSelect" value="{!v.selectedContact}">
<aura:iteration items="{!v.contactList}" var="con">
<option text="{!con.Name}" value="{!con.Id}"/>
</aura:iteration>
</lightning:select>
</lightning:card>
</aura:component>
simpleListController.js | to call the helper function
/*controller.js*/
({
doInit : function(component, event, helper) {
helper.performShowingContacts(component, event);
}
})
simpleListHelper.js | to set the Component List to Contact List returned from Server Side
| to call the method("getContacts") of the apex class("SimpleListController") to get all the Contacts
/*helper.js*/
({
performShowingContacts : function(component, event) {
var action = component.get("c.getContacts");
//action.setStorable();
this.setupPerformShowingContactsAction(component, action);
$A.enqueueAction(action);
},
setupPerformShowingContactsAction : function(component, action) {
action.setCallback(this, function(response){
this.handlePerformShowingContactsResultsCallBack(component, response);
});
},
handlePerformShowingContactsResultsCallBack : function(component, response) {
var responseState = response.getState();
var responseError = response.getError();
var responseValue = response.getReturnValue();
switch(responseState){
default: break;
case 'NEW': break;
case 'RUNNING': break;
case 'SUCCESS':
if(responseValue != null)
component.set("v.contactList", responseValue);
break;
case 'INCOMPLETE': break;
case 'ERROR':
console.log('Response Error-->'+JSON.stringify(responseError));
break;
}
}
})
component.set(“v.contactList”, responseValue): You can see at Line No. 33 from helper.js file that we have set the contactList (attribute of List type in the component) to responseValue which is the List of Contacts returned by Apex Class.
So, you can iterate this List in your Lightning Component just like
<aura:iteration items="{!v.contactList}" var="con">
<option text="{!con.Name}" value="{!con.Id}"/>
</aura:iteration>
Steps to remember
1. Declare the attribute of List type in Component Level.
2. Apex Class will be responsible to send the List of Values.
3. Helper.js file will set that Component List attribute to the responseValue which is the List returned by Apex Class.
4. Now, You can use this List in your Lightning Component.
7,386 total views, 1 views today