How to display dynamically the list of opportunities Using Javascript controller, Helper and Apex Class Method in lightning component Salesforce | How to fetch and display list of Opportunity records using aura:iteration in Lightning Component Salesforce


Hey guys, today in this post we are going to learn about How to display dynamically the list of opportunities Using Javascript controller, Helper and Apex Class Method in lightning component Salesforce.

Find the Lightning Aura Components Developer Guide, Click Here β†’


Files we used to display opportunity records in lightning component β†’

displayDataCmp.cmp Lightning Component It is used to display Opportunity records in lightning component
displayDataCmpController.js JavaScript Controller It is hold Javascript doInit function to fetch and display list of records.
displayDataCmpHelper.js JavaScript Helper It is hold Javascript getOppList function to fetch data from apex class method. Lightning Application It is used to call the component and preview on browser.
displayDataCtrl.apxc Apex Class Controller It is used for get SOQL query to retrieve Opportunity records.



Final Output β†’

display opportunity records in lightning component --


You can download file directly from github by Click Here.


Other related post that would you like to learn in Salesforce


  • Find the below steps β–Ύ


Create Lightning Component β†’

Step 1:- Create Lightning Component : displayDataCmp.cmp

From Developer Console >> File >> New >> Lightning Component

displayDataCmp.cmp [Lightning Component File]

  1.    <aura:component controller="displayDataCtrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
  2. 	  <aura:attribute name="opportunity" type="List" />
  3.       <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  5.     <div class="slds slds-p-around_large slds-card"> 
  6.         <h2 style="font-size:18px; color:#0000ff;"><lightning:icon iconName="standard:opportunity" size="small" alternativeText="Preview" title="Preview" /> Displaying the Opportunity Records in Salesforce Lightning Component [<a href="" target="_blank" rel="noopener noreferrer">Know more..</a>]</h2><br/>
  8.         <table class="slds-table slds-table--bordered slds-table--col-bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout" style="border:1px #ddd solid;">
  9.             <thead>
  10.                 <tr class="slds-text-heading--label">
  11.                     <th style="background:#ffeded;">ID</th>
  12.                     <th style="background:#ffeded;">Name</th>                    
  13.                     <th style="background:#ffeded;">Amount</th>
  14.                     <th style="background:#ffeded;">Type</th>
  15.                     <th style="background:#ffeded;">Stage Name</th>
  16.                     <th style="background:#ffeded;">CloseDate</th>
  17.                     <th style="background:#ffeded;">Lead Source</th>
  18.                 </tr>
  19.             </thead>
  20.             <tbody>
  21.                 <aura:iteration items="{!v.opportunity}" var="oppFld">
  22.                     <tr>
  23.                         <th><div class="slds-truncate" title="{!oppFld.Id}">{!oppFld.Id}</div></th>
  24.                         <td><div class="slds-truncate" title="{!oppFld.Name}">{!oppFld.Name}</div></td>
  25.                         <td><div class="slds-truncate" title="{!oppFld.Type}">{!oppFld.Amount}</div></td>
  26.                         <td><div class="slds-truncate" title="{!oppFld.NumberOfEmployees}">{!oppFld.Type}</div></td>
  27.                         <td><div class="slds-truncate" title="{!oppFld.TickerSymbol}">{!oppFld.StageName}</div></td>
  28.                         <td><div class="slds-truncate" title="{!oppFld.Phone}">{!oppFld.CloseDate}</div></td> 
  29.                         <td><div class="slds-truncate" title="{!oppFld.Phone}">{!oppFld.LeadSource}</div></td> 
  30.                     </tr>
  31.                 </aura:iteration>
  32.             </tbody>
  33.         </table>
  34.    </div>    
  35. </aura:component>


Create JavaScript Controller β†’

Step 2:- Create Lightning Component : displayDataCmpController.js

βœͺ The Big Announcement: -
As per student's demands, I re-opened my eBook of "Salesforce Tutorial" Limited-time huge discount offer Absolutely 50% Off.
I am thinking to give you discount offer occasion of Gandhi Jayanti for a powerful "Salesforce admin course" where you can Understand from Basic Concepts to advanced label in Salesforce.
πŸ‘‰ So Don't MISS it... (Access Right Now)
πŸ‘‰ Get Huge Discount Offer 50%: - Get eBook

From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller

displayDataCmpController.js [JavaScript Controller]

  1.    ({
  2. 	doInit: function(component, event, helper) {   
  3.     // Fetch the Opportunity list from the Apex controller 
  4.       helper.getOppList(component);
  5.    },
  7. })


Create JavaScript Helper β†’

Step 3:- Create Lightning Component : displayDataCmpHelper.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Helper

displayDataCmpHelper.js [JavaScript Helper File]

  1.   ({
  2. 	 // Fetch the Opportunity from the Apex controller
  3.       getOppList: function(component, event, helper) {
  4.         var action = component.get('c.oppListData');          
  5.         action.setCallback(this, function(response){
  6.             var state = response.getState();      
  7.             //alert('state ' + state);
  8.             if(state == "SUCCESS"){
  9.                 var result = response.getReturnValue();
  10.                 //alert('result ' + JSON.stringify(result));                
  11.                 component.set('v.opportunity',result);
  12.             }
  13.         });
  14.         $A.enqueueAction(action);
  15.       }
  17. })


Create Apex Class Controller β†’

Step 4:- Create Apex Class : displayDataCtrl.apxc

From Developer Console >> File >> New >> Apex Class

displayDataCtrl.apxc [Apex Class Controller]

  1.    public class displayDataCtrl {      
  3.       @AuraEnabled
  4.       public static List<Opportunity> oppListData() {
  5.         List<Opportunity> oppList = [SELECT Id, Name, Amount, TYPE, StageName, CloseDate, LeadSource FROM Opportunity ORDER BY createdDate ASC];
  6.           RETURN oppList;
  7.       }
  9. }


Create Lightning Application β†’

Step 5:- Create Lightning Application :

From Developer Console >> File >> New >> Lightning Application [Component Application File]

  1.    <aura:application extends="force:slds" >
  2.     <c:displayDataCmp/>
  3. </aura:application>


Further post that would you like to learn in Salesforce



FAQ (Frequently Asked Questions)

How do you display records in lightning component?

To display a record using lightning:recordForm , provide the record ID and the object API name. Additionally, provide fields using either the fields or layoutType attribute. You can display a record in two modes using the mode attribute. Loads the form using output fields with inline editing enabled.

Can we use PageReference in lightning component?

To navigate in Lightning Experience, Experience Builder sites, or the Salesforce mobile app, define a PageReference object. The pageReference type generates a unique URL format and defines attributes that apply to all pages of that type. The following types are supported.

How do you use Lightning record view?

lightning-record-view-form requires a record ID to display the fields on the record. It doesn't require additional Apex controllers or Lightning Data Service to display record data.

Related Topics | You May Also Like


Hi, This is Vijay Kumar behind the admin and founder of I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on

Leave a Comment