LIGHTNING COMPONENT

REFERENCE MATERIALS
Lightning component Library-(after force.com place this)-
componentReference/suite.app
https://developer.salesforce.com/docs/atlas.en-
us.lightning.meta/lightning/intro_framework.htm
https://www.lightningdesignsystem.com/icons/
https://www.sfdcpoint.com/salesforce/modal-popup-lightning-component-salesforce/
Trailhead-
https://trailhead.salesforce.com/en/content/learn/modules/lex_dev_lc_basics

1.CALCULATOR APP
*)myFirstComponent.cmp without using controller-Lightning Component
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId"
access="global" >
<aura:attribute name="number1" type="integer"/>
<aura:attribute name="number2" type="integer"/>

<lightning:input type="number" name="input1" label="Enter first number"

value="{!v.number1}"/>
<lightning:input type="number" name="input2" label="Enter second number"
value="{!v.number2}"/>
<br/>
{!v.number1}<br/>
{!v.number2}<br/>
<h1>multiply of two numbers are </h1><br/>
{!mult(v.number1, v.number2)}
<h1>addition of two numbers are </h1><br/>
{!add(v.number1, v.number2)}
<h1>subtraction of two numbers are </h1><br/>
{!sub(v.number1, v.number2)}
<h1>division of two numbers are </h1><br/>
{!div(v.number1, v.number2)}
</aura:component>

*)myFirstComponentApp.app-Lightning Application
<aura:application extends="force:slds">
<c:myFirstComponent/>
</aura:application>

2.CALCULATOR APP-by using controller

*)myFirstComponent.cmp-LightningComponent
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId"
access="global" >
<aura:attribute name="input1" type="integer"/>
<aura:attribute name="input2" type="integer"/>
<aura:attribute name= "output" type ="integer"/>

<lightning:input type="number" name="input1" label="Enter a number" value="{!

v.input1}"/>
<lightning:input type="number" name="input2" label="enter second number"
value="{!v.input2}"/>

<lightning:button label="Add" onclick="{! c.doADD }"/>

<lightning:button label="Substracts" onclick="{!c.doSub }"/>
<lightning:button label="Multiply" onclick="{!c.doMul }"/>
<lightning:button label="Divide" onclick="{!c.doDivide }"/>

<br/>
 <h1>The Output is-----{!v.output}</h1>
<lightning:outputField type = "number" name="output" value="{!v.output}" />
</aura:component>

*)myFirstComponentApp.app-LightningApplication
<aura:application extends="force:slds">
<c:myFirstComponent/>
</aura:application>

*)myFirstComponentController.js-By Pressing Controller at the right

({
doADD : function(component, event, helper) {
var number1 = component.get('v.input1');
var number2 = component.get('v.input2');
alert(parseInt(number1) + parseInt(number2));
console.log(parseInt(number1) + parseInt(number2));
component.set('v.output', parseInt(number1) + parseInt(number2));
},
doSub : function(component, event, helper) {
var number1 = component.get('v.input1');
var number2 = component.get('v.input2');
alert(parseInt(number1) - parseInt(number2));
component.set('v.output', parseInt(number1) - parseInt(number2));
},
doMul : function(component, event, helper) {
var number1 = component.get('v.input1');
var number2 = component.get('v.input2');
alert(parseInt(number1) * parseInt(number2));
component.set('v.output', parseInt(number1) * parseInt(number2));
},doDivide : function(component, event, helper) {
var number1 = component.get('v.input1');
var number2 = component.get('v.input2');
alert(parseInt(number1) / parseInt(number2));
component.set('v.output', parseInt(number1) / parseInt(number2));
}

})

3.DISPLAY 10 CONTACT RECORDS IN LIGHTNING APP PAGE

*)ContactListController.apxc-apex class
public class ContactListController {
@auraEnabled
public static List<Contact> getContactList(){
return [select id, name , email, phone from Contact limit 10];
}

*)ContactList.cmp-Lightning Component
<aura:component controller="ContactListController" >
<aura:attribute name="contactList" type="Contact[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<aura:iteration items="{!v.contactList}" var="con">

{!con.Name}<br/>
{!con.Email}<br/>
{!con.Phone}<br/>
</aura:iteration>
</aura:component>

*)ContactListController.js-By pressing controller at the right

({
doInit : function(component, event, helper) {
var action =component.get('c.getContactList');

action.setCallback(this, function(response){
var resposnseValue =response.getReturnValue();
console.log(resposnseValue);
component.set('v.contactList', resposnseValue);
}, 'SUCCESS');
$A.enqueueAction(action, false);
}
})

*)ContactListApp.app-Lightning Application
<aura:application extends="force:slds">
<c:ContactList></c:ContactList>
</aura:application>

4.TO DISPLAY ALL THE CONTACTS IN THE ACCOUNT PAGE

*)ContactListController.apxc-apex class
public class ContactListController {
@auraEnabled
public static List<Contact> getContactList(){
return [select id, name , email, lastname,phone from Contact limit 10];
}

*)ContactList.cmp-Lightning Component
<aura:component controller="ContactListController"
implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
<aura:attribute name="contactList" type="Contact[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<div class="slds-p-around_small">
<div class="slds-grid slds-wrap">

<aura:iteration items="{!v.contactList}" var="con">

<div class="slds-col slds-size_1-of-3">
<lightning:card title="{!con.LastName}" footer="{!con.email}"
iconName="standard:contact">
<aura:set attribute="actions">
<lightning:button label="view Details"
variant="brand"></lightning:button>
</aura:set>
{!con.Name}<br/>
{!con.Email}<br/>
{!con.Phone}<br/>
</lightning:card>
</div>
</aura:iteration>
</div>
</div>
</aura:component>

*)ContactListController.js-By pressing controller at the right

({
 doInit : function(component, event, helper) {
var action =component.get('c.getContactList');

action.setCallback(this, function(response){
var resposnseValue =response.getReturnValue();
console.log(resposnseValue);
component.set('v.contactList', resposnseValue);
}, 'SUCCESS');
$A.enqueueAction(action, false);
}
})

*)ContactListApp.app-Lightning Application
<aura:application extends="force:slds">
<c:ContactList></c:ContactList>
</aura:application>

5.TO DISPLAY ONLY THE RELATED RECORDS IN THE ACCOUNT PAGE

*)ContactListController.apxc-apex class
public class ContactListController {
@auraEnabled
public static List<Contact> getContactList(String accountid){
return [select id, name , email, phone ,firstname,lastname from Contact
where accountId=:accountid];
}

*)ContactList.cmp-Lightning Component
<aura:component controller="ContactListController"
implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
<aura:attribute name="contactList" type="Contact[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<div class="slds-p-around_small">
<div class="slds-grid slds-wrap">

<aura:iteration items="{!v.contactList}" var="con">

<div class="slds-col slds-size_1-of-3">
<lightning:card title="{!con.LastName}" footer="{!con.email}"
iconName="standard:contact">
<aura:set attribute="actions">
<lightning:button label="view Details"
variant="brand"></lightning:button>
</aura:set>
{!con.LastName}<br/>
{!con.Email}<br/>
{!con.Phone}<br/>
</lightning:card>
</div>
</aura:iteration>
</div>
</div>
</aura:component>
OR

<aura:component controller="ContactListController"
implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
<aura:attribute name="contactList" type="Contact[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
 <div class="slds-p-around_large">
<div class="slds-grid slds-wrap">

<aura:iteration items="{!v.contactList}" var="con">

<div class="slds-col slds-size_1-of-3">
<lightning:card title="{!con.LastName}" footer="{!con.Email}"
iconName="standard:contact">
<aura:set attribute="actions">
<lightning:button label="view Details"
variant="brand"></lightning:button>
</aura:set>
</lightning:card>
</div>
</aura:iteration>
</div>
</div>
</aura:component>

*)ContactListController.js-By pressing controller at the right of the component not

the app
({
doInit : function(component, event, helper) {
var action =component.get('c.getContactList');
action.setParams({
accountid:component.get('v.recordId')
});

action.setCallback(this, function(response){
var resposnseValue =response.getReturnValue();
console.log(resposnseValue);
component.set('v.contactList', resposnseValue);
}, 'SUCCESS');
$A.enqueueAction(action, false);
}
})

*)ContactListApp.app-Lightning Application
<aura:application extends="force:slds">
<c:ContactList></c:ContactList>
</aura:application>

-------------------------------sir code to redirect to contact when it is clicked

from account-----------------------
controller
({
doInit : function(component, event, helper) {
var action = component.get('c.getContactList');
action.setParams({
accountid : component.get('v.recordId')
});

action.setCallback(this, function(response){
var resposnseValue =response.getReturnValue();
console.log(resposnseValue);
component.set('v.contactL', resposnseValue);
});
$A.enqueueAction(action, false);
},
doRedirect : function(component, event, helper) {
 var eventsource = event.getSource();
var id =eventsource.get('v.name');

var navEvt = $A.get("e.force:navigateToSObject");

navEvt.setParams({
"recordId": id,
"slideDevName": "related"
});
navEvt.fire();
},
})

lightning component
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<div class="slds-p-around_small">
<div class="slds-grid slds-wrap">
<aura:iteration items="{!v.contactL}" var="con">

<div class="slds-col slds-size_1-of-3 slds-p-around_small">

<lightning:card title="{!con.LastName}" footer="{!con.email}"

iconName="standard:contact">
<aura:set attribute="actions">
<lightning:button name="{!con.Id}" label="view Details"
variant="brand" onclick="{!c.doRedirect}"></lightning:button>
</aura:set>

{!con.FistName}

{!con.Phone}
</lightning:card>
</div>

</aura:iteration>
</div>
</div>

</aura:component>
-----------------------------------------------------------------------------------
---------------------------------------------
6.WHEN VIEW DETAILS BUTTON IS CLICKED FROM THE ACCOUNT PAGE FOR THE RELATED CONTACT
IT MUST BE REDIRECTED TO THE PARTICULAR CONTACT PAGE WHICH WE CLICKED
MY CODE
*)ContactList.cmp-Lightning Component
<aura:component controller="ContactListController"
implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
<aura:attribute name="contactList" type="Contact[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<div class="slds-grid slds-wrap">

<aura:iteration items="{!v.contactList}" var="con">

<div class="slds-col slds-size_1-of-3 slds-p-around_small">
<lightning:card title="{!con.LastName}" footer="{!con.Email}"
iconName="standard:contact">
<aura:set attribute="actions">
<lightning:button name="{!con.Id}" label="view Details" variant="brand"
onclick="{!c.doRedirect}"></lightning:button>
</aura:set>
 </lightning:card>
</div>
</aura:iteration>
</div>
</aura:component>

*)ContactListController.js-By pressing controller at the right of the component not

the app
({
doInit : function(component, event, helper) {
var action =component.get('c.getContactList');
action.setParams({
accountid:component.get('v.recordId')
});

action.setCallback(this, function(response){
var resposnseValue =response.getReturnValue();
console.log(resposnseValue);
component.set('v.contactList', resposnseValue);
}, 'SUCCESS');
$A.enqueueAction(action, false);
},
doRedirect:function(component,event,helper)
{
var eventsource=event.getSource();
var id=eventsource.get('v.name');
var navEvt = $A.get("e.force:navigateToSObject");
navEvt.setParams({
"recordId": id,
"slideDevName": "related"
});
navEvt.fire();
},
})

*)ContactListController.apxc-apex class
public class ContactListController {
@auraEnabled
public static List<Contact> getContactList(String accountid){
return [select id,email, phone,lastname,firstname from Contact where
accountId=:accountid];
}

*)ContactListApp.app-Lightning Application
<aura:application extends="force:slds">
<c:ContactList></c:ContactList>
</aura:application>

7.DEMONSTRATION OF CALLING A COMPONENT FROM ANOTHER COMPONENT

*)QuickContact.cmp-Lightning Component
<aura:component >
<aura:attribute name="createContact" type="Contact" default="{

sobjectName:'Contact',
FirstName:'',
LastName:'',
Email:'',
 Phone:''
}"/>
<div class="slds-var-p-around_x-small">
<lightning:input type="Text" value="{!v.createContact.FirstName}"
label="First Name" required="true"/>
<lightning:input type="Text" value="{!v.createContact.LastName}"
label="Last Name" required="true"/>
<lightning:input type="Email" value="{!v.createContact.Email}"
label="Email" required="true"/>
<lightning:input type="Phone" value="{!v.createContact.Phone}"
label="Phone" required="true"/>
<lightning:button label="Create Contact" variant="brand"/>
</div>

</aura:component>

*)ContactListApp-Lightning Application
<aura:application extends="force:slds">
<c:QuickContact/>
</aura:application>

*)ContactList.cmp-Lightning Component
<aura:component controller="ContactListController"
implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
<aura:attribute name="contactList" type="Contact[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<div>
<c:QuickContact></c:QuickContact>
</div>
<div class="slds-grid slds-wrap">
<aura:iteration items="{!v.contactList}" var="con">
<div class="slds-col slds-size_1-of-3 slds-p-around_small">
<lightning:card title="{!con.LastName}" footer="{!con.Email}"
iconName="standard:contact">
<aura:set attribute="actions">
<lightning:button name="{!con.Id}" label="view Details" variant="brand"
onclick="{!c.doRedirect}"></lightning:button>
</aura:set>
</lightning:card>
</div>
</aura:iteration>
</div>
</aura:component>

*)ContactListController.apxc-apex class
public class ContactListController {
@auraEnabled
public static List<Contact> getContactList(String accountid){
return [select id,email, phone,lastname,firstname from Contact where
accountId=:accountid];
}

*)ContactListController.js-By pressing controller at the right of the component not

the app
({
doInit : function(component, event, helper) {
var action =component.get('c.getContactList');
 action.setParams({
accountid:component.get('v.recordId')
});

action.setCallback(this, function(response){
var resposnseValue =response.getReturnValue();
console.log(resposnseValue);
component.set('v.contactList', resposnseValue);
}, 'SUCCESS');
$A.enqueueAction(action, false);
},
doRedirect:function(component,event,helper)
{
var eventsource=event.getSource();
var id=eventsource.get('v.name');
var navEvt = $A.get("e.force:navigateToSObject");
navEvt.setParams({
"recordId": id,
"slideDevName": "related"
});
navEvt.fire();
},
})

8.INSERT CONTACT TO A PARTICULAR ACCOUNT USING LIGHTNING COMPONENT

*)ContactListController.apxc
public class ContactListController {
@auraEnabled
public static List<Contact> getContactList(String accountid){
return [select id,email, phone,lastname,firstname from Contact where
accountId=:accountid];
}
@auraEnabled
public static Contact createContacts(Contact con,Id accId)
{
con.AccountId=accId;
insert con;
return con;
}

*)ContactList.cmp
<aura:component controller="ContactListController"
implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
<aura:attribute name="contactList" type="Contact[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<div>
<c:QuickContact accountId="{!v.recordId}"></c:QuickContact>
</div>
<div class="slds-grid slds-wrap">
<aura:iteration items="{!v.contactList}" var="con">
<div class="slds-col slds-size_1-of-3 slds-p-around_small">
<lightning:card title="{!con.LastName}" footer="{!con.Email}"
iconName="standard:contact">
<aura:set attribute="actions">
<lightning:button name="{!con.Id}" label="view Details" variant="brand"
onclick="{!c.doRedirect}"></lightning:button>
</aura:set>
</lightning:card>
</div>
 </aura:iteration>
</div>
</aura:component>

*)ContactListController.js
({
doInit : function(component, event, helper) {
var action =component.get('c.getContactList');
action.setParams({
accountid:component.get('v.recordId')
});

action.setCallback(this, function(response){
var resposnseValue =response.getReturnValue();
console.log(resposnseValue);
component.set('v.contactList', resposnseValue);
}, 'SUCCESS');
$A.enqueueAction(action, false);
},
doRedirect:function(component,event,helper)
{
var eventsource=event.getSource();
var id=eventsource.get('v.name');
var navEvt = $A.get("e.force:navigateToSObject");
navEvt.setParams({
"recordId": id,
"slideDevName": "related"
});
navEvt.fire();
},
})

*)ContactListApp.app
<aura:application extends="force:slds">
<c:QuickContact/>
</aura:application>

*)QuickContact.cmp
<aura:component controller="ContactListController">
<aura:attribute name="accountId" type="String"/>
<aura:attribute name="createContact" type="Contact" default="{

sobjectName:'Contact',
FirstName:'',
LastName:'',
Email:'',
Phone:''
}"/>
<div class="slds-var-p-around_x-small">
<lightning:input type="Text" value="{!v.createContact.FirstName}"
label="First Name" required="true"/>
<lightning:input type="Text" value="{!v.createContact.LastName}"
label="Last Name" required="true"/>
<lightning:input type="Email" value="{!v.createContact.Email}"
label="Email" required="true"/>
<lightning:input type="Phone" value="{!v.createContact.Phone}"
label="Phone" required="true"/>
<lightning:button label="Create Contact" variant="brand" onclick="{!
c.doSave}"/>
 </div>

</aura:component>

*)QuickContactController.js
({
doSave : function(component, event, helper) {
var action = component.get('c.createContacts');
action.setParams({
con : component.get('v.createContact'),
accId : component.get('v.accountId')
});
action.setCallback(this, function(response){
var state = response.getState();
alert(state);
if(State === 'SUCCESS' ){
var responsevalue = response.getReturnValue();
}

},'ALL');
$A.enqueueAction(action);
}
})

RUSHIKESH CODE-DIFFERENT SOLUTION FOR THIS PROBLEM

One Different Solution
from Rushikesh Vispute to everyone: 1:34 PM
'Phone' : '',
'Email' : '' }" />
<div class="slds-var-p-around_x-small" style="font-size:20px;padding:16px;" >
<lightning:input type="text" label="Enter First Name" value="{!
v.contactRecord.FirstName}" required="true" ></lightning:input>
<lightning:input type="text" label="Enter Last Name" value="{!
v.contactRecord.LastName}" required="true" ></lightning:input>
<lightning:input type="text" label="Ente Phone Number" value="{!
v.contactRecord.Phone}" required="true" ></lightning:input>
<lightning:input type="text" label="Enter some Email" value="{!
v.contactRecord.Email}" required="true" ></lightning:input>
<lightning:button variant="base" label="Save" onclick="{!c.callCreateContact}"
title="Looks like a link" class="slds-m-left_x-small"></lightning:button>
</div> </aura:component>
from Rushikesh Vispute to everyone: 1:35 PM
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes
,flexipage:availableForRecordHome,force:hasRecordId,
forceCommunity:availableForAllPageTypes,
force:lightningQuickAction" access="global" controller="createContact">
<aura:attribute name="contactRecord" type="Contact" default="{ 'sobjectType':
'Contact',
'FirstName' : '',
'LastName' : '',
'Phone' : '',
'Email' : '' }" />
from Rushikesh Vispute to everyone: 1:35 PM
({ callCreateContact : function(component, event, helper) { var
action = component.get('c.createContactMethod'); //alert(action);
console.log(window.location.pathname); var url =
window.location.pathname.split( '/' ); var updated_url= url[ url.length - 2
];
action.setParams({ c:JSON.stringify(component.get('v.contactRecord')),
accountId:updated_url });
console.log("URl");console.log(updated_url);
console.log(JSON.stringify(component.get('v.contactRecord')));
from Rushikesh Vispute to everyone: 1:35 PM
action.setCallback(this, function(response) { var state =
response.getState(); console.log(response);
console.log(state); if(component.isValid() &&
state === "SUCCESS"){ var result = response.getReturnValue();
console.log(result); } else
{ console.log(response.getError()
[0].message); } }); $A.getCallback(function() {
$A.enqueueAction(action); })(); } } )
from Rushikesh Vispute to everyone: 1:36 PM
public class createContact { @auraEnabled public static Contact
createContactMethod(Contact c , String accountId)
{ system.debug(accountId); c.accountId
=Id.valueOf(accountId); system.debug(c);
//system.debug('Accounts'); insert c; return c; } }

9.TO DISPLAY THE ACCOUNT IN THE HOME PAGE IN A TABLE AND WHEN A PARTICULAR
ACCOUNT'S VIEW CONTACT IS CLICKED IT MUST DISPLAY THE RELATED CONTACTS FOR
THAT PARTICULAR ACCOUNT IN A POPUP BOX AND THE CONTACTS FOR THAT PARTICULAR
ACCOUNT MUST BE DISPLAYED IN THE TABLE IN THE POPUP BOX.

*)AccountConPopUpClass.apxc
public class AccountConPopUpClass {
@AuraEnabled
public static List<Account> fetchAccount()
{
return [Select Id,Name,Rating,Industry,Phone from Account];
}
@AuraEnabled
public static List<Contact> relatedContact(String accountid)
{
list<Contact> con1= [Select Name,Email,Phone from Contact where
AccountId=:accountid];
for(Contact c:con1)
{
system.debug(c.Name);
}
return con1;
}
}

*)AccountConPopUp.cmp
<aura:component controller="AccountConPopUpClass"
implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,for
ce:hasRecordId" access="global">
<aura:attribute name="data" type="Object"/>
<aura:attribute name="columns" type="Object"/>
<aura:attribute name="mydata" type="Object"/>
<aura:attribute name="mycolumns" type="Object"/>
<aura:attribute name="isModalOpen" type="boolean" default="false"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<div>

<lightning:datatable aura:id="accountTable"
keyField="id"
data="{!v.data}"
 columns="{!v.columns}"
onrowaction="{!c.openModel}"
/>

</div>

<aura:if isTrue="{!v.isModalOpen}">

<!-- Modal/Popup Box starts here-->

<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01"
aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-
fade-in-open">
<div class="slds-modal__container">
<!-- Modal/Popup Box Header Starts here-->
<header class="slds-modal__header">
<lightning:buttonIcon iconName="utility:close"
onclick="{! c.closeModel }"
alternativeText="close"
variant="bare-inverse"
class="slds-modal__close"/>
<h2 id="modal-heading-01" class="slds-text-heading_medium
slds-hyphenate">Modal/PopUp Box</h2>
</header>
<!--Modal/Popup Box Body Starts here-->
<div class="slds-modal__content slds-p-around_medium"
id="modal-content-id-1">
<p><b>Related Contacts are,
</b>

<lightning:datatable
data="{! v.mydata }"
columns="{! v.mycolumns }"
keyField="Id"
hideCheckboxColumn="true"
/>

</p>
</div>
<!--Modal/Popup Box Footer Starts here-->
<footer class="slds-modal__footer">
<lightning:button variant="neutral"
label="Cancel"
title="Cancel"
onclick="{! c.closeModel }"/>
<lightning:button variant="brand"
label="OK"
title="OK"
onclick="{!c.submitDetails}"/>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</aura:if>
</aura:component>

*)AccountPopUpController.js
({
doInit : function(component, event, helper) {
component.set('v.columns', [
 {label: 'Account ID', fieldName: 'Id', type: 'text'},
{label: 'Account Name', fieldName: 'Name', type: 'text'},
{label: 'Industry', fieldName: 'Industry', type: 'text'},
{label: 'Rating', fieldName: 'Rating', type: 'text'},
{label: 'Phone', fieldName: 'Phone', type: 'phone'},
{type: "button", typeAttributes: {
label: 'View Contact',
name: 'View',
title: 'View',
disabled: false,
value: 'view',
iconPosition: 'left'
}}

]);

var action=component.get('c.fetchAccount');
action.setCallback(this,function(response){
var state=response.getState();
if(state==='SUCCESS'||state==='DRAFT')
{
var responseValue=response.getReturnValue();
console.log('responsevalue',responseValue);
component.set('v.data',responseValue);
}
});
$A.enqueueAction(action);
component.set('v.mycolumns', [
{ label: 'Contact Name', fieldName: 'Name', type: 'text'},
{ label: 'Phone', fieldName: 'Phone', type: 'phone'},
{ label: 'Email', fieldName: 'Email', type: 'email'}
]);
// var rowIndex = event.getSource().get(rowID)

},

openModel: function(component, event, helper) {

// Set isModalOpen attribute to true
var row = event.getParam( 'row' );
var recId = row.Id;
var action = component.get('c.relatedContact');
action.setParams({
accountid:recId
});
action.setCallback(this, function(response){
var resposnseValue =response.getReturnValue();
console.log(resposnseValue);
component.set('v.mydata', response.getReturnValue());
} ,'SUCCESS');
$A.enqueueAction(action, false);
component.set("v.isModalOpen", true);
},

closeModel: function(component, event, helper) {

// Set isModalOpen attribute to false
component.set("v.isModalOpen", false);
},

submitDetails: function(component, event, helper) {

 // Set isModalOpen attribute to false
//Add your code to call apex method or do some processing
component.set("v.isModalOpen", false);
},

})

*)AccountConPopUpApp
<aura:application extends="force:slds" >
<c:AccountConPopUp></c:AccountConPopUp>
</aura:application>

10.TO CREATE A TABLE TO DISPLAY LIST OF ACCOUNT AND WHEN USER SEARCHES FOR A
PARTICULAR ACCOUNT USING ACCOUNT NAME THAT PARTICULAR ACCOUNT MUST BE DISPLAYED
*).cmp
<aura:component controller="condis1class"
implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
<aura:attribute name="mydata" type="Object"/>
<aura:attribute name="mycolumns" type="Object"/>
<aura:attribute name="accounts" type="List" />
<aura:attribute name="accountList" type="Account[]"/>
<lightning:input aura:id="searchKey" type="text" name="searchKey" label="Enter
Account name"/>
<lightning:button variant="brand" label="Search" title="Search acc"
onclick="{! c.getAccount2 }"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<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="Account
Name">Name</div></th>
<th scope="col"><div class="slds-truncate"
title="Phone">Phone</div></th>
<th scope="col"><div class="slds-truncate"
title="Industry">Industry</div></th>
<th scope="col"><div class="slds-truncate"
title="Rating">Rating</div></th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.accounts}" var="account">
<tr>
<td><div class="slds-truncate" title="{!account.Name}">{!
account.Name}</div></td>
<td><div class="slds-truncate" title="{!account.Phone}">{!
account.Phone}</div></td>
<td><div class="slds-truncate" title="{!account.Industry}">{!
account.Industry}</div></td>
<td><div class="slds-truncate" title="{!account.Rating}">{!
account.Rating}</div></td>
</tr>
</aura:iteration>
</tbody>
</table>

<lightning:datatable data="{! v.mydata }"

columns="{! v.mycolumns }"
 keyField="Id"
hideCheckboxColumn="true"
/>

</aura:component>

*)Controller.js-By pressing at the right of component

({
doInit : function(component, event, helper) {
component.set('v.mycolumns', [
{label: 'Account Name', fieldName: 'Name', type: 'text'},
{label: 'Phone', fieldName: 'Phone', type: 'phone'},
{label: 'Industry', fieldName: 'Industry', type: 'text'},
{label: 'Rating', fieldName: 'Rating', type: 'text'}

]);
var action =component.get('c.getAccountList');
action.setCallback(this,function(response){
var state=response.getState();
if(state==='SUCCESS'||state==='DRAFT')
{
var responseValue=response.getReturnValue();
console.log('responsevalue',responseValue);
component.set('v.mydata',responseValue);
}
});
$A.enqueueAction(action);
},
getAccount2: function(component, event, helper)
{
var accname1=component.find("searchKey").get('v.value');
var accname2=accname1;
console.log(accname2);
var action = component.get('c.getAccount');
action.setParams({
searchKey:accname1});
action.setCallback(this, function(response){
var responseValue =response.getReturnValue();
console.log(responseValue);
component.set('v.accounts',responseValue );
} ,'SUCCESS');
$A.enqueueAction(action, false);
}
})

*).apxc
public class condis1class {
@auraEnabled
public static List<Account> getAccountList(){
return [Select Name,Rating,Industry,Phone from Account];
}
@AuraEnabled
public static List<Account> getAccount(String searchKey) {
system.debug(searchKey);
String name = + searchKey + '%';
Account[] ac1 =[SELECT Name,Rating,Industry,Phone FROM Account WHERE name
LIKE :name ORDER BY Industry Desc];
Account ac=[SELECT Name,Rating,Industry,Phone FROM Account WHERE name
LIKE :name];
 system.debug(ac);
return ac1;
}

*).app
<aura:application extends="force:slds">
<c:condis1/>
</aura:application>

11.TO CREATE A TABLE TO DISPLAY LIST OF ACCOUNT AND WHEN USER SEARCHES FOR A
PARTICULAR ACCOUNT USING ACCOUNT NAME THAT PARTICULAR ACCOUNT MUST BE DISPLAYED
(SORTING INCLUDED)

*).cmp
<aura:component controller="condis1class"
implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
<aura:attribute name="mydata" type="Object"/>
<aura:attribute name="mycolumns" type="Object"/>
<aura:attribute name="accounts" type="List" />
<aura:attribute name="accountList" type="Account[]"/>
<aura:attribute name="sortedBy" type="String" default="Name"/>
<aura:attribute name="sortedDirection" type="string" default="asc" />
<lightning:input aura:id="searchKey" type="text" name="searchKey" label="Enter
Account name"/>
<lightning:button variant="brand" label="Search" title="Search acc"
onclick="{! c.getAccount1 }"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<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="Account
Name">Name</div></th>
<th scope="col"><div class="slds-truncate"
title="Phone">Phone</div></th>
<th scope="col"><div class="slds-truncate"
title="Industry">Industry</div></th>
<th scope="col"><div class="slds-truncate"
title="Rating">Rating</div></th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.accounts}" var="account">
<tr>
<td><div class="slds-truncate" title="{!account.Name}">{!
account.Name}</div></td>
<td><div class="slds-truncate" title="{!account.Phone}">{!
account.Phone}</div></td>
<td><div class="slds-truncate" title="{!account.Industry}">{!
account.Industry}</div></td>
<td><div class="slds-truncate" title="{!account.Rating}">{!
account.Rating}</div></td>
</tr>
</aura:iteration>
</tbody>
</table>
 <lightning:datatable data="{! v.mydata }"
columns="{! v.mycolumns }"
keyField="Id"
hideCheckboxColumn="true"
onsort="{!c.updateSorting}"
sortedBy="{!v.sortedBy}"
sortedDirection="{!v.sortedDirection}"
/>

</aura:component>

*)Controller.js-By pressing at the right of the lightning component

({
doInit : function(component, event, helper) {
component.set('v.mycolumns', [
{label: 'Account Name', fieldName: 'Name',sortable:true,type: 'text'},
{label: 'Phone', fieldName: 'Phone',sortable:true, type: 'text'},
{label: 'Industry', fieldName: 'Industry',sortable:true, type: 'text'},
{label: 'Rating', fieldName: 'Rating',sortable:true,type: 'text'},
{type: "button", typeAttributes: {
label: 'View Contact',
variant:'Brand',
name: 'View',
title: 'View',
disabled: false,
value: 'view',
iconPosition: 'left'
}}
]);
var action =component.get('c.getAccountList');
action.setCallback(this,function(response){
var state=response.getState();
if(state==='SUCCESS'||state==='DRAFT')
{
var responseValue=response.getReturnValue();
console.log('responsevalue',responseValue);
component.set('v.mydata',responseValue);
}
});
$A.enqueueAction(action);
},
getAccount1: function(component, event, helper)
{
var accname1=component.find("searchKey").get('v.value');
var accname2=accname1;
console.log(accname2);
var action = component.get('c.getAccount');
action.setParams({
searchKey:accname1});
action.setCallback(this, function(response){
var responseValue =response.getReturnValue();
console.log(responseValue);
component.set('v.accounts',responseValue );
} ,'SUCCESS');
$A.enqueueAction(action, false);
},
updateSorting: function (cmp, event, helper) {
var fieldName = event.getParam('fieldName');
var sortDirection = event.getParam('sortDirection');
 cmp.set("v.sortedBy", fieldName);
cmp.set("v.sortedDirection", sortDirection);
helper.sortData(cmp, fieldName, sortDirection);
},
sortBy: function (field, reverse) {
var key = function(x) {return x[field]};
reverse = !reverse ? 1 : -1;
return function (a, b) {
return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
}
}
})

*).apxc
public class condis1class {
@auraEnabled
public static List<Account> getAccountList(){
return [Select Name,Rating,Industry,Phone from Account];
}
@AuraEnabled
public static List<Account> getAccount(String searchKey) {
system.debug(searchKey);
String name = + searchKey + '%';
Account[] ac1 =[SELECT Name,Rating,Industry,Phone FROM Account WHERE name
LIKE :name];
return ac1;
}

*).app
<aura:application extends="force:slds">
<c:condis1/>
</aura:application>

*)Helper.js
({
sortData: function (cmp, fieldName, sortDirection) {
var fname = fieldName;
var data = cmp.get("v.mydata");
var reverse = sortDirection !== 'asc';
data.sort(this.sortBy(fieldName, reverse))
cmp.set("v.mydata", data);
},
sortBy: function (field, reverse) {
var key = function(x) {return x[field]};
reverse = !reverse ? 1 : -1;
return function (a, b) {
return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
}
}
})

12.TO CREATE A TABLE TO DISPLAY LIST OF ACCOUNT AND WHEN USER SEARCHES FOR A
PARTICULAR ACCOUNT USING ACCOUNT NAME THAT PARTICULAR ACCOUNT MUST BE DISPLAYED
(SORTING INCLUDED)AND WHEN VIEW CONTACT BUTTON IS PRESSED THE RELATED CONTACT MUST
BE DISPLAYED

*).cmp
<aura:component controller="condis1class"
implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,for
ce:hasRecordId" access="global">
<aura:attribute name="mydata" type="Object"/>
<aura:attribute name="mycolumns" type="Object"/>
<aura:attribute name="accounts" type="List" />
<aura:attribute name="accountList" type="Account[]"/>
<aura:attribute name="data" type="Object"/>
<aura:attribute name="columns" type="Object"/>
<aura:attribute name="isModalOpen" type="boolean" default="false"/>
<aura:attribute name="sortedBy" type="String" default="Name"/>
<aura:attribute name="sortedDirection" type="string" default="asc" />

<lightning:input aura:id="searchKey" type="text" name="searchKey" label="Enter

Account name"/>
<lightning:button variant="brand" label="Search" title="Search acc"
onclick="{! c.getAccount1 }"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<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="Account
Name">Name</div></th>
<th scope="col"><div class="slds-truncate"
title="Phone">Phone</div></th>
<th scope="col"><div class="slds-truncate"
title="Industry">Industry</div></th>
<th scope="col"><div class="slds-truncate"
title="Rating">Rating</div></th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.accounts}" var="account">
<tr>
<td><div class="slds-truncate" title="{!account.Name}">{!
account.Name}</div></td>
<td><div class="slds-truncate" title="{!account.Phone}">{!
account.Phone}</div></td>
<td><div class="slds-truncate" title="{!account.Industry}">{!
account.Industry}</div></td>
<td><div class="slds-truncate" title="{!account.Rating}">{!
account.Rating}</div></td>
</tr>
</aura:iteration>
</tbody>
</table>

<lightning:datatable data="{! v.mydata }"

columns="{! v.mycolumns }"
keyField="Id"
hideCheckboxColumn="true"
onsort="{!c.updateSorting}"
sortedBy="{!v.sortedBy}"
sortedDirection="{!v.sortedDirection}"
onrowaction="{!c.openModel}"
/>
<aura:if isTrue="{!v.isModalOpen}">
<!-- Modal/Popup Box starts here-->
 <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01"
aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-
fade-in-open">
<div class="slds-modal__container">
<!-- Modal/Popup Box Header Starts here-->
<header class="slds-modal__header">
<lightning:buttonIcon iconName="utility:close"
onclick="{! c.closeModel }"
alternativeText="close"
variant="bare-inverse"
class="slds-modal__close"/>
<h2 id="modal-heading-01" class="slds-text-heading_medium
slds-hyphenate">Modal/PopUp Box</h2>
</header>
<!--Modal/Popup Box Body Starts here-->
<div class="slds-modal__content slds-p-around_medium"
id="modal-content-id-1">
<p><b>Related Contacts are,
</b>

<lightning:datatable
data="{! v.data }"
columns="{! v.columns }"
keyField="Id"
hideCheckboxColumn="true"
/>

</p>
</div>
<!--Modal/Popup Box Footer Starts here-->
<footer class="slds-modal__footer">
<lightning:button variant="neutral"
label="Cancel"
title="Cancel"
onclick="{! c.closeModel }"/>
<lightning:button variant="brand"
label="OK"
title="OK"
onclick="{!c.submitDetails}"/>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</aura:if>

</aura:component>

*)Controller.js-By pressing controller at the right side of the component

({
doInit : function(component, event, helper) {
component.set('v.mycolumns', [
{label: 'Account Name', fieldName: 'Name',sortable:true,type: 'text'},
{label: 'Phone', fieldName: 'Phone',sortable:true, type: 'text'},
{label: 'Industry', fieldName: 'Industry',sortable:true, type: 'text'},
{label: 'Rating', fieldName: 'Rating',sortable:true,type: 'text'},
{type: "button", typeAttributes: {
label: 'View Contact',
variant:'Brand',
name: 'View',
 title: 'View',
disabled: false,
value: 'view',
iconPosition: 'left'
}}
]);
var action =component.get('c.getAccountList');
action.setCallback(this,function(response){
var state=response.getState();
if(state==='SUCCESS'||state==='DRAFT')
{
var responseValue=response.getReturnValue();
console.log('responsevalue',responseValue);
component.set('v.mydata',responseValue);
}
});
$A.enqueueAction(action);
component.set('v.columns', [
{ label: 'Contact Name', fieldName: 'Name', type: 'text'},
{ label: 'Phone', fieldName: 'Phone', type: 'phone'},
{ label: 'Email', fieldName: 'Email', type: 'email'}
]);
},
getAccount1: function(component, event, helper)
{
var accname1=component.find("searchKey").get('v.value');
var accname2=accname1;
console.log(accname2);
var action = component.get('c.getAccount');
action.setParams({
searchKey:accname1});
action.setCallback(this, function(response){
var responseValue =response.getReturnValue();
console.log(responseValue);
component.set('v.accounts',responseValue );
} ,'SUCCESS');
$A.enqueueAction(action, false);
},
updateSorting: function (cmp, event, helper) {
var fieldName = event.getParam('fieldName');
var sortDirection = event.getParam('sortDirection');
cmp.set("v.sortedBy", fieldName);
cmp.set("v.sortedDirection", sortDirection);
helper.sortData(cmp, fieldName, sortDirection);
},
openModel: function(component, event, helper) {
// Set isModalOpen attribute to true
var row = event.getParam( 'row' );
var recId = row.Id;
//alert(recId);
var action = component.get('c.relatedContact');
action.setParams({
accountid:recId
});
action.setCallback(this, function(response){
var resposnseValue =response.getReturnValue();
console.log(resposnseValue);
component.set('v.data', response.getReturnValue());
} ,'SUCCESS');
 $A.enqueueAction(action, false);
component.set("v.isModalOpen", true);
},

closeModel: function(component, event, helper) {

// Set isModalOpen attribute to false
component.set("v.isModalOpen", false);
},

submitDetails: function(component, event, helper) {

// Set isModalOpen attribute to false
//Add your code to call apex method or do some processing
component.set("v.isModalOpen", false);
},
sortBy: function (field, reverse) {
var key = function(x) {return x[field]};
reverse = !reverse ? 1 : -1;
return function (a, b) {
return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
}
}
})

*).apxc
public class condis1class {
@auraEnabled
public static List<Account> getAccountList(){
return [Select Name,Rating,Industry,Phone from Account];
}
@AuraEnabled
public static List<Account> getAccount(String searchKey) {
system.debug(searchKey);
String name = + searchKey + '%';
Account[] ac1 =[SELECT Name,Rating,Industry,Phone FROM Account WHERE name
LIKE :name];
return ac1;
}
@AuraEnabled
public static List<Contact> relatedContact(String accountid)
{
list<Contact> con1= [Select Name,Email,Phone from Contact where
AccountId=:accountid];
for(Contact c:con1)
{
system.debug(c.Name);
}
return con1;
}

*).app
<aura:application extends="force:slds">
<c:condis1/>
</aura:application>

*).Helper.js-By pressing Helper at the right side of the component

({
sortData: function (cmp, fieldName, sortDirection) {
 var fname = fieldName;
var data = cmp.get("v.mydata");
var reverse = sortDirection !== 'asc';
data.sort(this.sortBy(fieldName, reverse))
cmp.set("v.mydata", data);
},
sortBy: function (field, reverse) {
var key = function(x) {return x[field]};
reverse = !reverse ? 1 : -1;
return function (a, b) {
return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
}
}
})