Scenario based Salesforce interview questions/Problems: Display Accounts Record Using Lightning Component

Unknown 8/23/2017 Lightning Component 9 comments

What is lightning component

Lightning component is UI framework for developing dynamic web apps for mobile device and desktop device. It uses JavaScript on the client side and Apex on the server side.

The Lightning Component framework is built on the open source Aura framework. The Aura framework enables you to build apps completely independent of your data in Salesforce.

Create lightning component to display accounts record

Step-1

Go to developer console by click on User Menu from setup then in console go to file option than New and then Lightning Component then provide name and description and submit, your component is ready to use.

Now write code to display record-

First, create Apex class and create a static method in a class and this method should have annotation @AuraEnabled so that we can use this method in lightning component framework to get data.

Apex Class

public class AccountAuraClr

{

@AuraEnabled

public static List<Account> getAccountRecord()

{

return new List<Account>([Select id,Name,Phone,Type from Account where Type != null LIMIT 100]);

}

Now create lightning component name SalesforceAdda_Account and use this class as a controller in the component.

Lightning Component

<aura:component controller="AccountAuraClr" implements="force:appHostable,forceCommunity:availableForAllPageTypes,
flexipage:availableForAllPageTypes" access="global">

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

<aura:attribute name="accLst" type="Account[]"/> 

<article class="slds-card">

<div class="slds-card__header slds-grid">

<header class="slds-media slds-media_center slds-has-flexi-truncate">

<div class="slds-media__figure">

<span class="slds-icon_container slds-icon-standard-account" title="description of icon when needed">

<lightning:icon iconName="standard:account" size="large" alternativeText="List account"/>

</span>

</div>

<div class="slds-media__body">

<h2>

<a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Account">

<span class="slds-text-heading_small">Account</span>

</a>

</h2>

</div>

</header>

</div>

<div class="slds-card__body">

<table class="slds-table slds-table_bordered slds-no-row-hover slds-table_cell-buffer">

<thead>

<tr class="slds-text-title_caps">

<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="Phone">Phone</div>

</th>

</tr>

</thead>

<tbody>

<aura:iteration items="{!v.accLst}" var="acc"> 

<tr class="slds-hint-parent">

<th scope="row">

<div class="slds-truncate" title="Adam Choi"><a href="javascript:void(0);">{!acc.Name}</a></div>

</th>

<td>

<div class="slds-truncate" title="Company One">{!acc.Type}</div>

</td>

<td>

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

</td>

</tr>

</aura:iteration>

</tbody>

</table>

</div>

<footer class="slds-card__footer"><a href="javascript:void(0);"></a></footer>

</article>

</aura:component>

Now create lightning component controller by click on controller link in lightning component right-hand side. After click it will automatically name SalesforceAdda_AccountController.js

Lightning Component Controller

use this code in your controller.

({

doInit : function(component, event, helper) {

helper.getAccontRecord(component); // Calling Helper method

}

})

Now create helper for component where we write JavaScript Code to call class method to get data.

Lightning Component Helper

({

                getAccontRecord : function( component ) {

                                var action = component.get("c.getAccountRecord"); //Calling Apex class controller 'getAccountRecord' method

        action.setCallback(this, function(response) {

            var state = response.getState(); //Checking response status

            var result = JSON.stringify(response.getReturnValue());

            if (component.isValid() && state === "SUCCESS")

                component.set("v.accLst", response.getReturnValue()); // Adding values in Aura attribute variable.

        });

        $A.enqueueAction(action);

                }

})

Use this code into your org to display records.

After creating component successfully, how you will preview component, to preview component you have to create Lightning Application.

How To Preview Lightning Component?

1.  In developer console, go to file then select new then click on Lightning Application option to create App.

2.  Reference your lightning component in application like-

                         <c:SalesforceAdda_Account />

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

<c:SalesforceAdda_Account />

</aura:application>

Now click on Preview button in lightning app in right hand side.

Note: You can use this component in your salesforce community, lightning app builder etc.

How to use lightning component in community,builder,app etc?

Add implements attribute and provide values in this like-

<aura:component controller="AccountAuraClr" implements="force:appHostable,forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes" access="global">