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.
displayDataApp.app	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.

Don’t forget to check out:- Apex trigger on Account to avoid creation of duplicate record if the account with same phone exists in the system in Salesforce. Click Here For More Information

Final Output →

👉 Download Free Ebook →

👉 Get Free Course →

Why Should You Attend It?

🎯 If You Are Facing Any Of These 6 Challenges. This Masterclass Is For You.

Career Confusion
No Interview Call
Low Salary
No Promotion/Growth
No Finding New Job Opportunity
Why you stucking from past so many years in same company?

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]

   <aura:component controller="displayDataCtrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

	  <aura:attribute name="opportunity" type="List" />

      <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

```
 
```

    <div class="slds slds-p-around_large slds-card">

        <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="https://www.w3web.net/" target="_blank" rel="noopener noreferrer">Know more..</a>]</h2><br/>

```
 
```

        <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;">

```
            <thead>
```

                <tr class="slds-text-heading--label">

                    <th style="background:#ffeded;">ID</th>

                    <th style="background:#ffeded;">Name</th>

                    <th style="background:#ffeded;">Amount</th>

                    <th style="background:#ffeded;">Type</th>

                    <th style="background:#ffeded;">Stage Name</th>

                    <th style="background:#ffeded;">CloseDate</th>

                    <th style="background:#ffeded;">Lead Source</th>

```
                </tr>
```
```
            </thead>
```
```
            <tbody>
```

                <aura:iteration items="{!v.opportunity}" var="oppFld">

```
                    <tr>
```

                        <th><div class="slds-truncate" title="{!oppFld.Id}">{!oppFld.Id}</div></th>

                        <td><div class="slds-truncate" title="{!oppFld.Name}">{!oppFld.Name}</div></td>

                        <td><div class="slds-truncate" title="{!oppFld.Type}">{!oppFld.Amount}</div></td>

                        <td><div class="slds-truncate" title="{!oppFld.NumberOfEmployees}">{!oppFld.Type}</div></td>

                        <td><div class="slds-truncate" title="{!oppFld.TickerSymbol}">{!oppFld.StageName}</div></td>

                        <td><div class="slds-truncate" title="{!oppFld.Phone}">{!oppFld.CloseDate}</div></td>

                        <td><div class="slds-truncate" title="{!oppFld.Phone}">{!oppFld.LeadSource}</div></td>

```
                    </tr>
```
```
                </aura:iteration>
```
```
            </tbody>
```
```
        </table>
```
```
   </div>    
```
```
</aura:component>
```

Create JavaScript Controller →

Step 2:- Create Lightning Component : displayDataCmpController.js

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

displayDataCmpController.js [JavaScript Controller]

```
   ({
```

	doInit: function(component, event, helper) {

    // Fetch the Opportunity list from the Apex controller

```
      helper.getOppList(component);
```
```
   },
```
```
 
```
```
})
```

Create JavaScript Helper →

Step 3:- Create Lightning Component : displayDataCmpHelper.js

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

displayDataCmpHelper.js [JavaScript Helper File]

```
  ({
```

	 // Fetch the Opportunity from the Apex controller

      getOppList: function(component, event, helper) {

        var action = component.get('c.oppListData');

        action.setCallback(this, function(response){

            var state = response.getState();

```
            //alert('state ' + state);
```
```
            if(state == "SUCCESS"){
```

                var result = response.getReturnValue();

                //alert('result ' + JSON.stringify(result));

                component.set('v.opportunity',result);

```
            }
```
```
        });
```
```
        $A.enqueueAction(action);
```
```
      }
```
```
 
```
```
})
```

Create Apex Class Controller →

Step 4:- Create Apex Class : displayDataCtrl.apxc

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

displayDataCtrl.apxc [Apex Class Controller]

```
   public class displayDataCtrl {      
```
```
 
```
```
      @AuraEnabled
```

      public static List<Opportunity> oppListData() {

        List<Opportunity> oppList = [SELECT Id, Name, Amount, TYPE, StageName, CloseDate, LeadSource FROM Opportunity ORDER BY createdDate ASC];

```
          RETURN oppList;
```
```
      }
```
```
 
```
```
}
```

Create Lightning Application →

Step 5:- Create Lightning Application : displayDataApp.app

From Developer Console >> File >> New >> Lightning Application

displayDataApp.app [Component Application File]

   <aura:application extends="force:slds" >

```
    <c:displayDataCmp/>
```
```
</aura:application>
```

Further post that would you like to learn in Salesforce

TechW3web:- To know more, Use this Link – YouTube

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.

Vijay Kumar

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. 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 w3web.net