Hi readers, In this tutorial, I am going to show you How to display Record List in Lighting Component Salesforce.

After Completing this tutorial you will be able to understand:

  • Display Record List in Lightning Component.

What you’ll do?

  • Create a component that gets Record List from the server.
  • Bind Records on the UI using HTML Table.

Build a Lightning Component for showing Account List:

Login to your Salesforce Account and open Developer Console.

Record List

Step 1: Create an Apex Class:

Goto File>New and Create a New Apex class called GetAccountList. Replace the following code in GetAccountList class.

public class GetAccountList {
@AuraEnabled
public static List<Account> GetAccount()
{
List<Account> lstAccount=[Select Id,Name,BillingState,BillingCity,Phone FROM Account];
return lstAccount;
} 
}

Please Note: You have a to decorate a method as @AuraEnabled to expose it to Lightning Component.

Step 2: Create Lightning Component:

Goto File>New and create a Lightning Component called DisplayAccount. Write the following markup in Component.

DisplayAccount.cmp

<aura:component controller="GetAccountList">
<aura:attribute name="lstAccount" type="String[]" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<br/>
<br/>
<div class="slds">
<div style="font-size:28px;font-weight:bold;margin-left:20px">
Record List
</div>
<br/>
<br/>
<table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
<thead>
<tr class="slds-text-heading_label">
 
<th scope="col"><div class="slds-truncate" title="Name">Name</div></th>
<th scope="col"><div class="slds-truncate" title="Type">Type</div></th>
 
 
<th scope="col"><div class="slds-truncate" title="Billing State">Billing State</div></th>
<th scope="col"><div class="slds-truncate" title="Billing City">Billing City</div></th>
<th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
</tr>
</thead>
<tbody>
<!-- Use the Apex model and controller to fetch server side data -->
<aura:iteration items="{!v.lstAccount}" var="account">
<tr>
 
<td><div class="slds-truncate" title="{!account.Name}">{!account.Name}</div></td>
<td><div class="slds-truncate" title="{!account.Type}">{!account.Type}</div></td>
<td><div class="slds-truncate" title="{!account.BillingState}">{!account.BillingState}</div></td>
<td><div class="slds-truncate" title="{!account.BillingCity}">{!account.BillingCity}</div></td>
<td><div class="slds-truncate" title="{!account.Phone}">{!account.Phone}</div></td>
 
</tr>
</aura:iteration>
</tbody>
</table>
</div>
</aura:component>

Where,

You can use “<aura:handler name=”init” value=”{!this}” action=”{!c.doInit}” />”  to call a method on Load event. Where action contains the name of the method which you want to execute on component load.

DisplayAccountHelper.js

({
getAccountList: function(component) {
var action = component.get('c.GetAccount');
// Set up the callback
var self = this;
action.setCallback(this, function(actionResult) {
component.set('v.lstAccount', actionResult.getReturnValue());
});
$A.enqueueAction(action);
}
})

DisplayAccountController.js

({
doInit : function(component, event, helper) {
helper.getAccountList(component);
}
})

Test the Component.

Create a New Lightning Application and replace the following code.

<aura:application extends="force:slds" >
 
<c:DisplayAccount />
 
</aura:application>

Output:

Record List

View More:

Conclusion:

I hope you loved this tutorial about How to Show Records in Lightning Component. I would like to have your feedback, Comments, and suggestions. Please don’t hesitate to comment for any technical help.

Thank You.

Leave a Comment