Salesforce Challenge 1 Winner (Aura): Build Opportunity List Component

Challenge 1: Retrieve the list of Opportunity records and display on the page.

Review: Sakti Saranya became winner because of excellent presentation style. Her video is very explanatory

Use case:

Retrieve the list of Opportunity records and display on the page. There is another functionality that has been added to the code to download the records in a CSV format. Let us see the steps to create Lightning components. Trust me, this is really a powerful framework and looks awesome. Once we start learning day by day consistently soon, we can master this framework and do amazing magics in development. Let’s get our hands dirty now by learning how to achieve this.

Prerequisite:

Before entering on the coding mode, be sure to equip yourself with vscode and Salesforce DX environment ready in the system and set up the org to create.

You don’t know how to do it! Just click on the below link and follow the steps.

https://trailhead.salesforce.com/content/learn/projects/quick-start-lightning-web-components?trail_id=build-lightning-web-components

So, let’s move on assuming we are armed.

First of all, try to understand the flow on a simple basis. We are going to create a Lightning component which will be pretty easy and straight forward. The framework does create a bundle for us. But please understand the key files in the bundle and their flow before moving on. Once we created the components, the bundle will contain all the below items.

LET ME PUT IN THIS WAY!!!

Component – .cmp – Actual UI

JS Controller – Controller.js – (Brain here the container that calls the functions or sometimes can hold logic also it depends on the scenarios, in case of multiple usages/calls best practice is to make a call to helper class and write the logic out there)

JS Helper – Helper.js –(Various parts of brain and here various functions

These are the three important files where our logic will be playing around to make our functionality work.

Ok Let’s start the coding part!!! To begin with,

Create a server-side apex controller class

We have created the apex controller which hold the actual query. Let’s keep it simple and handle the rest of the functionalities out there in the Lightning Component Bundle.

Create a Lightning component

aura:attribute – we use attribute to store data within a component. In this case we store opportunity record page. This component is also used to retrieve and store the fields of the current record named in the attribute.

aura:handler – listens for a specific event and then executes the function identified by the action attribute in the component’s controller file. The name attribute identifies the event, in this case init which is the event that fires as the component is loaded onto the page. Apparently, On page load the Opportunity list will be rendered and displayed on the page.

Use Apex model and controller to fetch the server side data

Create a js Controller

doInit – is the function that makes a call to the helper class and passes the contents of the component.

Helper class:

The JavaScript functions calls the method of the apex controller that we created earlier, passing the recordId of the current record using the get method and set the value using the setcallback method. It then populates the attribute named opportunity with the results.

Below is the code for the downloadcsv controller class, it makes a call to the helper class by passing the record list to the helper function. There is a functionality on click it will export the data in the given name format and href contents will be the default formatting for the csv file link. (The helper class convertArrayOfObjectToCSV will hold the logic to iterate the list and add the formatting, delimiters and returns the formatted contents to the csv ArrayList.)

Hurray!! Feeling awesome right!! I felt the same way. We are being creators, making all imaginary functionalities even though not in a massive way, our simple contributions towards learning makes a great difference with our attitude and helps us to become more confident.

Please feel free to post the comments and doubts! We are always there to help, and any feedback will help us to keep us motivated and improve.

Let us meet in another interesting topic! Let us amplify our skills with awesome Salesforce!