Salesforce Live: 2019

What is Cryptography in salesforce and what are all the algorithms provided by them ?

A). It is a security protocal between two systems. Lets say we are integration two systems without any encrytion mechanism then hackers will easily hack our information and they will modify the content in very easy manner.
For that they introduced the Cryptography concept and they introduced few algorithms(Cyphercite) for sending secure data between systems or persons.

Generally crypto will convert complete content in encyption format(like alpha numeric integer characters) and one generate key for protection, if you know that key then only you will be able to read that content(after decryption).
In salesforce we have couple of algorithms listed below.
AES128 //Advanced Encryption Standard
AES192
AES256

AES128 :
--------------
Exampe 1:
----------------
Blob exampleIv = Blob.valueOf('Example of IV123');
Blob key = Crypto.generateAesKey(128);
Blob data = Blob.valueOf('how are you fazurulla ??');
Blob encrypted = Crypto.encrypt('AES128', key, exampleIv, data);
system.debug('encrypted******'+EncodingUtil.Base64Encode(encrypted));
Blob decrypted = Crypto.decrypt('AES128', key, exampleIv, encrypted);
String decryptedString = decrypted.toString();
System.debug('Data to be encrypted'+decryptedString);

Example 2:
-----------------
Blob key = Crypto.generateAesKey(128);
Blob data = Blob.valueOf('Generally crypto will convert complete content in encyption format(like alpha numeric integer characters) and one generate key for protection, if you know that key then only you will be able to read that content(after decryption).');
Blob encrypted = Crypto.encryptWithManagedIV('AES128', key, data);
system.debug('*******'+EncodingUtil.Base64Encode(encrypted));
Blob decrypted = Crypto.decryptWithManagedIV('AES128', key, encrypted);
String decryptedString = decrypted.toString();
System.debug('Data to be encrypted'+decryptedString);

Generate Keys :
-------------------
system.debug('key1******'+EncodingUtil.Base64Encode(Crypto.generateAesKey(128)));
system.debug('key2******'+EncodingUtil.Base64Encode(Crypto.generateAesKey(192)));
system.debug('key3******'+EncodingUtil.Base64Encode(Crypto.generateAesKey(256)));

system.debug('Random Integer ::'+Crypto.getRandomInteger());
system.debug('Random Long ::'+Crypto.getRandomLong());

Salesforce Lightning Application Events Tutorial with single page

Apex Controller :
==================
public class PruductController {
@AuraEnabled
public static List<Kitchen_Products__c> getProducts() {
return [select Id,Name,Country__c,Price__c,Product_Details__c,Product_Image__c from Kitchen_Products__c];
}
@AuraEnabled
public static List<Product_Track__c> getTrackingList(String recordId) {
return [Select Id,Kitchen_Products__c,Track_Package__c From Product_Track__c where Kitchen_Products__c =:recordId Order By CreatedDate Asc];
}
}

ProductView:
============
<aura:component controller="PruductController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="properties" type="Kitchen_Products__c[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<lightning:Card>
<lightning:layout horizontalAlign="center" multipleRows="true">
<aura:iteration items="{!v.properties}" var="property">
<lightning:layoutItem padding="around-small" size="12" smallDeviceSize="6" mediumDeviceSize="4" largeDeviceSize="6">
<c:ProductTilleView property="{#property}"/>
</lightning:layoutItem>
</aura:iteration>
</lightning:layout>
</lightning:Card>
</aura:component>

ControllerJS :
===============
({
doInit: function(component, event, helper) {
helper.getProperties(component);
},
})

HelperJS:
=========
({
getProperties : function(component) {
var action = component.get("c.getProducts");
action.setCallback(this, function(response) {
component.set("v.properties", response.getReturnValue());
});
$A.enqueueAction(action);
}
})

Style.CSS:
==========
.THIS .slds-p-around--small {
padding-left: 6px;
padding-right: 6px;
padding-top: 0;
padding-bottom: 6px;
}

Event :
=======
<aura:event type="APPLICATION" description="Event template">
<aura:attribute name="property" type="Kitchen_Products__c"/>
</aura:event>
--------------------------------------------------------------------------------------------------------------------------------
ProductTilleView:
=================

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="property" type="Kitchen_Products__c"/>
<aura:registerEvent name="ProductDetailsViewEvent" type="c:ProductDetailsViewEvent"/>
<a onclick="{!c.propertySelected}">
<div style="{# 'background-image:url(' + v.property.Product_Image__c + ')'}">
<div class="lower-third">
<h1 class="truncate">{#v.property.Name}</h1>
<div>{#v.property.Country__c}</div>
<div>Price: {#v.property.Price__c}</div>
<div><lightning:formattedNumber value="{#v.property.Price__c}" style="currency" currencyCode="USD"/></div>
</div>
</div>
</a>
</aura:component>

JS:
===
({
propertySelected : function(component) {
console.log("rules ::"+JSON.stringify(component.get("v.property")));
var appEvent = $A.get("e.c:ProductDetailsViewEvent");
appEvent.setParams({property : component.get("v.property")});
appEvent.fire();
}
})

Style.CSS:
==========
.THIS > div {
position:relative;
display: inline-block;
/*margin: 3px 6px;
padding: 1rem;*/
width: 100%;
height: 220px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.THIS .lower-third {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #FFFFFF;
background-color: rgba(0, 0, 0, .4);
padding: 6px 8px;
/*border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;*/
}

.THIS .lower-third > div {
/*font-weight: 300;*/
padding: 0;
margin: 0;
}

.THIS .lower-third h1 {
font-size: 18px !important;
padding: 0;
margin: 0;
}

.THIS .open-button {
position: absolute;
bottom: 6px;
right: 4px;
}

.THIS .truncate {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
-------------------------------------------------------------------------
ProductDetailsView.cmp
=======================
<aura:component controller="PruductController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="property" type="String"/>
<aura:attribute name="isProductVisible" type="Boolean" default="false"/>
<aura:attribute name="desc" type="String"/>
<aura:attribute name="productName" type="String"/>
<aura:attribute name="countryName" type="String"/>
<aura:attribute name="productPrice" type="currency"/>
<aura:attribute name="product" type="Kitchen_Products__c" />
<aura:attribute name="recordId" type="String"/>
<aura:handler event="c:ProductDetailsViewEvent" action="{!c.consumeEventDetails}"/>
<aura:attribute name="slideIndex" type="Integer" default="0"/>
<aura:attribute name="slideWidth" type="Integer" default="0"/>
<aura:attribute name="productTrack" type="List"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="properties" type="Kitchen_Products__c[]"/>

<aura:if isTrue="{!v.isProductVisible}">
<force:recordData aura:id="service"
recordId="{!v.recordId}"
targetFields="{!v.product}"
fields="['Id', 'Name', 'Country__c', 'Product_Details__c']" />
<lightning:card >
<aura:set attribute="title">
<lightning:icon iconName="standard:household"/>
<span class="title">Summary</span>
</aura:set>
<aura:set attribute="actions">
<lightning:buttonIcon iconName="utility:edit" variant="bare" alternativeText="Edit Record" onclick="{!c.editRecord}" />
</aura:set>
<aura:set attribute="actions">
<lightning:buttonIcon iconName="utility:edit" variant="bare" alternativeText="Edit Record" onclick="{!c.editRecord}" />
</aura:set>
<img src="{!v.property}"/>
<div class="summary">
<p><b>{!v.productName}</b>, {!v.countryName}</p>
<p>{!v.desc}</p>
<h3><lightning:formattedNumber value="{!v.productPrice}" style="currency" maximumFractionDigits="0" currencyCode="USD"/></h3>
</div>
</lightning:card><br/>
<lightning:card>
<section class="slds-card">
<ol class="slds-setup-assistant">
<li class="slds-setup-assistant__item">
<article class="slds-setup-assistant__step">
<div class="slds-summary-detail slds-is-open">
<div class="slds-container_fluid">
<div class="slds-summary-detail__title">
<div class="slds-setup-assistant__step-summary">
<div class="number percentage">
<div class="slds-media__body slds-m-top_x-small">
<div class="slds-media">
<div class="slds-setup-assistant__step-summary-content slds-media__body">
<h3 class="slds-setup-assistant__step-summary-title slds-text-heading_small">
<button class="slds-button slds-button_reset" aria-controls="step-1-summary-action" aria-expanded="true">{!v.productName} Tracking</button>
</h3>
<p>{!v.desc}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div aria-hidden="false" class="slds-summary-detail__content" id="step-1-summary-action">
<div class="slds-setup-assistant__step-detail">
<div class="slds-progress slds-progress_vertical slds-progress_success">
<ol class="slds-progress__list slds-progress__list-bordered">
<aura:iteration items="{!v.productTrack}" var="track">
<li class="slds-progress__item slds-is-active">
<div class="slds-progress__marker">
<span class="slds-assistive-text">Active</span>
</div>
<div class="slds-progress__item_content slds-grid slds-grid_align-spread">
<div class="slds-size_3-of-4">{!track.Track_Package__c}</div>

</div>
</li>
</aura:iteration>
</ol>
</div>
</div>
</div>
</div>
</div>
</article>
</li>
</ol>
</section>
</lightning:card>
</aura:if>
<aura:if isTrue="{! !v.isProductVisible}">
<lightning:card>
<lightning:carousel disableAutoRefresh="false" disableAutoScroll="false">
<aura:iteration items="{!v.properties}" var="property">
<lightning:carouselImage
src = "{!property.Product_Image__c}"
header = "{!property.Name}"
description = "{!property.Price__c}"
alternativeText = "{!property.Name}"
href = "{!property.Product_Image__c}">
</lightning:carouselImage>
</aura:iteration>
</lightning:carousel>
</lightning:card>
</aura:if>
</aura:component>

JS:
====
({
doInit: function(component, event, helper) {
helper.getProperties(component);
},
consumeEventDetails : function(cmp, event) {
var property = event.getParam("property");
cmp.set("v.property",property.Product_Image__c);
cmp.set("v.desc",property.Product_Details__c);
cmp.set("v.productName",property.Name);
cmp.set("v.countryName",property.Country__c);
cmp.set("v.productPrice",property.Price__c);
cmp.set("v.recordId",property.Id);
cmp.set("v.isProductVisible",true);
var action = cmp.get("c.getTrackingList");
action.setParams({"recordId":property.Id});
action.setCallback(this, function(response) {
console.log("hello faz::"+JSON.stringify(response.getReturnValue()));
cmp.set("v.productTrack", response.getReturnValue());
});
$A.enqueueAction(action);
},
editRecord : function(component, event, helper) {
var recordId = component.get("v.recordId")
var editRecordEvent = $A.get("e.force:editRecord");
editRecordEvent.setParams({
"recordId": recordId
});
editRecordEvent.fire();
}
})

HelperJS:
=========
({
getProperties : function(component) {
var action = component.get("c.getProducts");
action.setCallback(this, function(response) {
component.set("v.properties", response.getReturnValue());
});
$A.enqueueAction(action);
}
})

CSS:
=====

.THIS .slds-card__body {
padding: 0 16px 0 12px;
display: flex;
height: 550px;
}

.THIS .slds-card__body > div {
flex: 1;
padding: 8px 16px 0 16px;
}

.THIS .slds-card__body .summary {
text-align: left;
}

.THIS img {
height: 350px;
width: 300px;
border-radius: 50%;
border: none;
}

.THIS .slds-icon-standard-household {
background-color: transparent;
}

.THIS .slds-icon-standard-household svg {
fill: #54698D;
}

.THIS h3 {
font-size: 18px;
color: #0070D2;
font-weight: 300;
}

.THIS .select {
margin-top: 20px;
text-align: center;
}

Custom Labels in Lightning Component for different languages

In this blog i am going to explain about "How to traslate lightning component into multiple languages like visualforce.I have a drop-down with list of all salesforce supported languages and when I select any language Ineed to render the complete lightning component lables/Buttons/Heading etc. in that specific language."

Steps to be followed:

Create the JavaScript Library

In the Developer Console, click File > New > Static Resource.
Enter counter in the Name field.
Select text/javascript in the MIME Type field and click submit.
Copy paste the below code(change the translations according to your requirement).

Javascript Library Code Snippet :

window.__langTranslations = (function() {

return {

JSONString : function(){

return {

"languages": {

"English": "en_US",

"Japanese": "ja",

"Chinese_Simplified": "zh_CN",

"Chinese_Traditional": "zh_TW",

"Danish": "da",

"Dutch": "nl_NL",

"Finnish": "fi",

"French": "fr",

"German": "de",

"Italian": "it",

"Korean": "ko",

"Norwegian": "no",

"Portuguese_Brazil": "pt_BR",

"Russian": "ru",

"Spanish": "es",

"Spanish_Mexico": "es_MX",

"Swedish": "sv",

"Thai": "th"

"btns": {

"Save_btn": "Save",

"Submit_btn": "Submit",

"Create_btn": "Create",

"Login_btn": "Login",

"Register_btn": "Register",

"Go_btn": "Go",

"Process_btn": "Process",

"Cancel_btn": "Cancel",

"Download_btn": "Download",

"Next_btn": "Next",

"Previous_btn": "Previous",

"First_btn": "First",

"Last_btn": "Last",

"Click_btn": "Click"

}

};

Tranaslations : function(lang){

console.log("lang value ::"+lang);

return {

"translations": {

"en_US": {

"User_Name": "User Name",

"Passowrd": "Password",

"save_Button" : "Save"

"ja": {

"User_Name": "ユーザー名",

"Passowrd": "パスワード",

"save_Button" : "保存"

"zh_CN": {

"User_Name": "用户名",

"Passowrd": "密码",

"save_Button" : "保存"

"zh_TW": {

"User_Name": "用戶名",

"Passowrd": "密碼",

"save_Button" : "保存"

"da": {

"User_Name": "Brugernavn",

"Passowrd": "adgangskode",

"save_Button" : "Gem"

"nl_NL": {

"User_Name": "Gebruikersnaam",

"Passowrd": "wachtwoord",

"save_Button" : "Save"

"fi": {

"User_Name": "Käyttäjätunnus",

"Passowrd": "salasana",

"save_Button" : "Tallenna"

"fr": {

"User_Name": "Nom d'utilisateur",

"Passowrd": "Mot de passe",

"save_Button" : "Enregistrer"

"de": {

"User_Name": "Nutzername",

"Passowrd": "Passwort",

"save_Button" : "Speichern"

"it": {

"User_Name": "Nome utente",

"Passowrd": "Parola d'ordine",

"save_Button" : "Salva"

"ko": {

"User_Name": "사용자 이름",

"Passowrd": "암호",

"save_Button" : "저장"

"no": {

"User_Name": "Brukernavn",

"Passowrd": "Passord",

"save_Button" : "Lagre"

"pt_BR": {

"User_Name": "Nome de Usuário",

"Passowrd": "Senha",

"save_Button" : "Guardar"

"ru": {

"User_Name": "Имя пользователя",

"Passowrd": "пароль",

"save_Button" : "Сохранить"

"es": {

"User_Name": "Nombre de usuario",

"Passowrd": "Contraseña",

"save_Button" : "Сохранить"

"es_MX": {

"User_Name": "Nombre de usuario",

"Passowrd": "Contraseña",

"save_Button" : "Salvar"

"sv": {

"User_Name": "Användarnamn",

"Passowrd": "Lösenord",

"save_Button" : "Spara"

"th": {

"User_Name": "ชื่อผู้ใช้",

"Passowrd": "รหัสผ่าน",

"save_Button" : "บันทึก"

}

};

}());

Lightning Component : TranslatorPage.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<ltng:require scripts="{!$Resource.LightningLoad}"
afterScriptsLoaded="{!c.JSONString}"/>
<aura:attribute name="languageOptions" type="String[]"/>
<aura:attribute name="langProperty" type="object"/>
<aura:attribute name="lang" type="String" default="en_US"/>
<aura:attribute type="Boolean" name="showLoader" default="false"/>
<aura:attribute name="User_Name" type="String" default="User Name"/>
<aura:attribute name="Password" type="String" default="Password"/>
<aura:attribute name="save_Button" type="String" default="Save"/>
<lightning:card>
<div class="c-container">
<lightning:layout multipleRows="true">
<lightning:layoutItem padding="around-small" size="12">
<lightning:layout>
<lightning:layoutItem padding="around-small" size="6">
<div class="page-section page-right">
<ol class="slds-setup-assistant">
<li class="slds-setup-assistant__item">
<article class="slds-setup-assistant__step">
<div class="slds-setup-assistant__step-summary">
<div class="number percentage">
<div class="slds-media__figure">
<div class="slds-progress-ring slds-progress-ring_large">
<div class="slds-progress-ring__progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">

</div>
<div class="slds-progress-ring__content">1</div>
</div>
</div>
<div class="slds-media__body slds-m-top_x-small">
<div class="slds-media">
<div class="slds-setup-assistant__step-summary-content slds-media__body">
<h3 class="slds-setup-assistant__step-summary-title slds-text-heading_small">Lightning Component Label Translations</h3>
<p>Here I am going to explain about "How to traslate lightning component into multiple languages like visualforce.I have a drop-down with list of all salesforce supported languages and when I select any language Ineed to render the complete lightning component lables/Buttons/Heading etc. in that specific language."</p>
</div>
</div>
</div>
</div>
</div>
</article>
</li>
<li class="slds-setup-assistant__item">
<article class="slds-setup-assistant__step">
<div class="slds-setup-assistant__step-summary">
<div class="number percentage">
<div class="slds-media__body slds-m-top_x-small">
<div class="slds-media">
<div class="slds-setup-assistant__step-summary-content slds-media__body">
<li class="slds-setup-assistant__item">
<article class="slds-setup-assistant__step">
<div class="slds-summary-detail slds-is-open">
<div class="slds-container_fluid">
<div aria-hidden="false" class="slds-summary-detail__content" id="step-1-summary-action">
<div class="slds-setup-assistant__step-detail">
<div class="slds-progress slds-progress_vertical slds-progress_success">
<ol class="slds-progress__list slds-progress__list-bordered">
<li class="slds-progress__item slds-is-active">
<div class="slds-progress__marker">
<span class="slds-assistive-text">Active</span>
</div>
<div class="slds-progress__item_content slds-grid slds-grid_align-spread">
<div class="slds-size_3-of-4">Create the JavaScript Library</div>
</div>
</li>
<li class="slds-progress__item slds-is-active">
<div class="slds-progress__marker">
<span class="slds-assistive-text">Active</span>
</div>
<div class="slds-progress__item_content slds-grid slds-grid_align-spread">
<div class="slds-size_3-of-4">In the Developer Console, click File > New > Static Resource.</div>
</div>
</li>
<li class="slds-progress__item slds-is-active">
<div class="slds-progress__marker">
<span class="slds-assistive-text">Active</span>
</div>
<div class="slds-progress__item_content slds-grid slds-grid_align-spread">
<div class="slds-size_3-of-4">Select text/javascript in the MIME Type field and click submit.</div>
</div>
</li>
<li class="slds-progress__item slds-is-active">
<div class="slds-progress__marker">
<span class="slds-assistive-text">Active</span>
</div>
<div class="slds-progress__item_content slds-grid slds-grid_align-spread">
<div class="slds-size_3-of-4">Copy paste the below code(change the translations according to your requirement).</div>
</div>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</article>
</li>
</div>
</div>
</div>
</div>
</div>
</article>
</li>
</ol>
</div>
</lightning:layoutItem>

<lightning:layoutItem padding="around-small" size="4">
<div class="page-section page-main">
<lightning:input class="boldcss" aura:id="field" label="{!v.User_Name}" name="userName" required="true" />
<lightning:input class="boldcss" aura:id="field" label="{!v.Password}" name="password" required="true" />

<br/>
<lightning:button label="{!v.save_Button}" onclick="{!c.JSONString}"/>
</div>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="2">
<div class="page-section page-right">
<lightning:select aura:id="languageTranslation" value="{!v.lang}" onchange="{!c.handleCompanyOnChange}" name="industryPicklist" label="Language" required="true">
<option value="">--None--</option>
<aura:iteration items="{!v.languageOptions}" var="ind" indexVar="key">
<option text="{!ind.key}" value="{!ind.value}" selected="{!ind.key==v.lang}" />
</aura:iteration>
</lightning:select>
</div>
</lightning:layoutItem>
</lightning:layout>
</lightning:layoutItem>
</lightning:layout>
</div>
</lightning:card>
</aura:component>

JS Controller: TranslatorPage.js

({

JSONString : function(component, event, helper) {

component.set("v.showLoader",true);

var jsonLanguages = __langTranslations.JSONString().languages;

var jsonLanguagesArray = [];

for(var key in jsonLanguages){

jsonLanguagesArray.push({key: key, value: jsonLanguages[key]});

}

component.set("v.languageOptions",jsonLanguagesArray);

//console.log(__langTranslations.Tranaslations("en_US"));

component.set("v.langProperty",__langTranslations.JSONString());

console.log(__langTranslations.JSONString())

component.set("v.showLoader",false);

throwError : function(component, event){

component.set("v.showLoader",true);

alert("faz hello");

throw new Error("I can’t go on. This is the end.");

component.set("v.showLoader",false);

throwErrorForKicks: function(cmp) {

component.set("v.showLoader",true);

var hasPerm = false;

try {

if (!hasPerm) {

throw new Error("You don't have permission to edit this record.");

}

catch (e) {

$A.createComponents([

["ui:message",{

"title" : "Sample Thrown Error",

"severity" : "error",

}],

["ui:outputText",{"value" : e.message

}]

],function(components, status, errorMessage){

if (status === "SUCCESS") {

var message = components[0];

var outputText = components[1];

message.set("v.body", outputText);

var div1 = cmp.find("div1");

div1.set("v.body", message);

}else if (status === "INCOMPLETE") {

console.log("No response from server or client is offline.")

}else if (status === "ERROR") {

console.log("Error: " + errorMessage);

}

});

component.set("v.showLoader",false);

}

component.set("v.showLoader",false);

//handle Industry Picklist Selection

handleCompanyOnChange : function(component, event, helper) {

component.set("v.showLoader",true);

var lang = component.get("v.lang");

var transKey = lang;

var jsonLanguagesArray = [];

component.set("v.User_Name",__langTranslations.Tranaslations(lang).translations.User_Name ? __langTranslations.Tranaslations(lang).translations.User_Name : "User Name");

component.set("v.Password",__langTranslations.Tranaslations(lang).translations.Passowrd ? __langTranslations.Tranaslations(lang).translations.Passowrd : "Password");

component.set("v.save_Button",__langTranslations.Tranaslations(lang).translations.save_Button ? __langTranslations.Tranaslations(lang).translations.save_Button : "Save");

for(var key in __langTranslations.Tranaslations(lang).translations){

//console.log(key+"--"+(key === transKey));

if(key === transKey){

for(var i in __langTranslations.Tranaslations(lang).translations[key]){

if(i === "User_Name"){

component.set("v.User_Name",__langTranslations.Tranaslations(lang).translations[key][i]);

}else if(i === "Passowrd"){

component.set("v.Password",__langTranslations.Tranaslations(lang).translations[key][i]);

}else{

component.set("v.save_Button",__langTranslations.Tranaslations(lang).translations[key][i]);

}

jsonLanguagesArray.push({i: i, value: __langTranslations.Tranaslations(lang).translations[key][i]});

component.set("v.showLoader",false);

}

console.log(jsonLanguagesArray);

}

});

CSS :

.THIS .page-section {
border: solid 1px #ccc;
padding: 1rem;
}
.THIS .page-header,
.THIS .page-footer {
height: 50px;
}
.THIS .slds-form-element__label{
font-weight: bold;
}
.THIS .slds-button {
font-weight: bold;
}

Screenshot :

SFDX VSCode with GIT Salesforce

GIT Push steps :

1. Open https://github.com url if in case you don't have any GIT account, create the same.

2. In next step you have to download the GIT bash using the below url : https://git-scm.com/downloads

3. Install the above one and create a new folder in desktop for storing git info.

4. Create a repo in github and clone the same repo. Navigate to the folder which you were created and open git bash which you installed already and use the below command

git clone https://github.com/xxxxx/xxxxxxx.git (you can replace you URL)

5. It would clone the complete structure to the desktop and copy paste the complete project structure which you wanted to be committed and select source countrol icon in VSCode editor or install git extension pack in vs code.

6. Select the source countrol option and you could see the commit option to git.

7. Committe and you can see (...) 3 dots select push to option, so that code will be in your git automatically.

client side pagination using lightning component

Client side pagination using lightning component

There is a requirement to display more than 10k records using aura components and needs to be implemented inline search and sort functionality as well. Provide download functionality as well.
Based on the Account record id in the url we have to pass the same id to the lightning component and fetch the related records and show in UI.

AgentSelectionPage.vf
AgentSelectionPageApp.app
SelectionPage.cmp
SelectionPage.js
SelectionPage.helper
SelectionPage.css
OverviewDetailsCtrl.apx

AgentSelectionPage.vf

<apex:page sidebar="true" showHeader="true" standardController="Account" tabStyle="Account">

<apex:outputPanel layout="block" style="overflow:auto;height:800px" >

<apex:includeLightning />

var accountId = "{!$CurrentPage.parameters.accountId}";

$Lightning.use("c:AgentSelectionPageApp", function() {

$Lightning.createComponent("c:SelectionPage",

{ "accountId" : accountId },

"LightningContainer", function(component) {

console.log('Component created');

});

</script>

function resizeIframe() {

var me = window.name;

if (me) {

var iframes = parent.document.getElementsByName(me);

if (iframes && iframes.length == 1) {

height = document.body.offsetHeight;

iframes[0].style.height = height + "px";

}

resizeIframe();

</script>

</apex:outputPanel>

</apex:page>

AgentSelectionPageApp.app

<aura:application extends="ltng:outApp" access="global">

<aura:dependency resource="c:SelectionPage"/>

</aura:application>

SelectionPage.cmp

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

<aura:attribute name="accountId" type="String" />

<aura:attribute name="recordId" type="String" />

<aura:attribute name="hubShowHideFlag" type="Boolean" default="false"/>

<aura:attribute name="successAlertFlag" type="Boolean" default="false"/>

<aura:attribute name="mouseHoverData" type="object" />

<aura:attribute name="accountIdHover" type="Id" />

<aura:attribute name="togglehover" type="boolean" default="false"/>

<aura:attribute name="data" type="Object"/>

<aura:attribute name="hoverRow" type="Integer" default="-1" />

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

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

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

<aura:attribute name="selectedAccountRecords" type="List" default="[]"/>

<aura:attribute name="unselectedAccountRecords" type="List" default="[]"/>

<aura:attribute name="BillingCountry" type="String"/>

<aura:attribute name="cityName" type="String"/>

<aura:attribute name="profileLinkableName" type="String"/>

<aura:attribute name="profileLinkableList" type="List" default="['Yes','No']"/>

<aura:attribute name="successAlert" type="String" default=""/>

<aura:attribute name="countryName" type="String"/>

<aura:attribute type="String" name="sortField" />

<aura:attribute type="Boolean" name="sortAsc" />

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

<aura:attribute name="currentPageNumber" type="Integer" default="1"/>

<aura:attribute name="pageSize" type="Integer" default="50"/>

<aura:attribute name="totalPages" type="Integer" default="0"/>

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

<aura:attribute name="issearching" type="Boolean" default="false"/>

<aura:attribute type="Boolean" name="showLoader" default="true"/>

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

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

<c:CTO_Loader></c:CTO_Loader>

</aura:if>

<br/>

<caption class="slds-headertab-sty">Corporate Traveller Onboarding</caption>

</h2>

</div>

<lightning:button label="Save" variant="brand" onclick="{!c.handleSelectedAccounts }" />

<lightning:button label="Download as CSV" variant="brand" onclick="{!c.downloadCsv }" />

<lightning:button label="Clear Filters" variant="brand" onclick="{!c.handleClearFilters }"/>

<lightning:button label="Cancel" variant="brand" onclick="{!c.handleCancel }"/>

</div>

<br/>

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

<c:CTOToastUtil toastmsg="{!v.successAlert}" toastType="success" successAlertFlag="{!v.successAlertFlag}"/>

</aura:if>

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

<lightning:layout multipleRows="true" horizontalAlign="center">

<lightning:layoutItem padding="around-small" size="12">

<strong><div class="slds-truncate">COMPANY NAME</div></strong>

<lightning:input aura:id="comanyName" placeholder="Search Company"

name="comanyName"

type="text"

</div>

</th>

<strong><div class="slds-truncate">Country</div></strong>

<lightning:select label="" aura:id="countryName" value="{!v.countryName}" onchange="{!c.searchcountryName}" name="BillingCountry">

<option disabled="true" value="">Search Country</option>

<aura:iteration items="{!v.billingCountryList}" var="country">

<option value="{!country}" selected="{!country==v.countryName}">{!country}</option>

</aura:iteration>

</lightning:select>

</th>

<lightning:select label="" aura:id="cityName" value="{!v.cityName}" onchange="{!c.searchcityName}" name="cityName">

<option disabled="true" value="">Search City</option>

<aura:iteration items="{!v.billingCityList}" var="city">

</aura:iteration>

</lightning:select>

</th>

<strong><div class="slds-truncate">PAYMENT METHOD</div></strong>

<lightning:input aura:id="paymentMethod" placeholder="Search Payment"

name="paymentMethod"

type="text"

</div>

</th>

<strong><div class="slds-truncate">Created Date</div></strong>

<lightning:input aura:id="searchDate" placeholder="Search Date"

name="searchDate"

</div>

</th>

<strong><div class="slds-truncate">Included KDNR</div></strong>

<lightning:select label="" aura:id="profileLinkable" value="{!v.profileLinkableName}" onchange="{!c.searchProfileLinkable}" name="profileLinkableName">

<option disabled="true" value="">Search Included KDNR</option>

<aura:iteration items="{!v.profileLinkableList}" var="profile">

<option value="{!profile}" selected="{!profile==v.profileLinkableName}">{!profile}</option>

</aura:iteration>

</lightning:select>

</th>

</tr>

</table>

<tbody>

<aura:if isTrue="{!not(empty(v.data))}">

<aura:iteration items="{!v.data}" var="acc" indexVar="index">

</td>

</td>

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

</td>

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

</td>

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

</td>

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

</td>

<div><a id="{!acc.Id}" style="color:#ff5f00;" onmouseenter="{!c.handleMouseHover}" onmouseout="{!c.handleMouseOut}" data-index="{!index}" tabindex="-1">{!acc.parentKDNR}</a></div>

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

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

<lightning:icon iconName="standard:account"/>

</span>

<a href="javascript:void(0);">{!v.mouseHoverData.Name}</a>

</p>

</a>

</h2>

</div>

</header>

<dl>

<dt>

<p class="slds-popover_panel__label slds-truncate">Owner</p>

</dt>

<dd>

<a href="javascript:void(0);">{!v.mouseHoverData.Owner.Name}</a>

</dd>

</dl>

</div>

</footer>

</div>

<a href="javascript:void(0);">{!v.mouseHoverData.Name}</a>

</p>

<dd class="slds-item_detail slds-text-color_weak slds-truncate">{!v.mouseHoverData.ABKZ__c}</dd>

<dt class="slds-item_label slds-text-color_weak slds-truncate">Mandant</dt>

<dd class="slds-item_detail slds-text-color_weak slds-truncate">{!v.mouseHoverData.Mandant__c}</dd>

<dd class="slds-item_detail slds-text-color_weak slds-truncate">{!v.mouseHoverData.KDNR__c}</dd>

<dt class="slds-item_label slds-text-color_weak slds-truncate">Profile Linkable</dt>

<dd class="slds-item_detail slds-text-color_weak slds-truncate">{!v.mouseHoverData.Profile_Linkable__c}</dd>

</dl>

</dd>

</dl>

</div>

</section>

</aura:if>

</td>

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

</td>

<ui:inputCheckbox class="slds-checkbox--faux" aura:id="checkAccountId" value="{!acc.Profile_Linkable}" text="{!acc.Id}"/>

</label>

</td>

</tr>

</aura:iteration>

</aura:if>

</tbody>

</table>

<aura:if isTrue="{!empty(v.data)}">

<div class="slds-align_absolute-center" style="height:5rem">No matching records to display</div>

</aura:if>

</div>

</lightning:layoutItem>

<lightning:layoutItem padding="around-small" flexibility="auto">

<!--

<lightning:button label="First" iconName="utility:left" iconPosition="left" variant="brand"

onclick="{!c.onFirst}" disabled="{! v.currentPageNumber == 1}"/>-->

<lightning:button label="Previous" iconName="utility:left" iconPosition="left" variant="brand"

onclick="{!c.onPrev}" disabled="{! v.currentPageNumber == 1}"/>

<a onclick="{!c.processMe}" name="1"

class="{! (v.currentPageNumber == 1) ? 'slds-button slds-button_brand' : 'slds-button slds-button_neutral'}">1</a>

</span>

<aura:iteration items="{!v.pageList}" var="item">

<a onclick="{!c.processMe}" name="{!item}"

class="{! (v.currentPageNumber == item) ? 'slds-button slds-button_brand' : 'slds-button slds-button_neutral'}">{!item}</a>

</span>

</aura:iteration>

</span>

<a onclick="{!c.processMe}" name="{!v.totalPages}"

class="{! (v.currentPageNumber == v.totalPages) ? 'slds-button slds-button_brand' : 'slds-button slds-button_neutral'}">{!v.totalPages}</a>

</span>

<lightning:button label="Next" iconName="utility:right" iconPosition="right" variant="brand"

disabled="{! v.currentPageNumber == v.totalPages}" onclick="{!c.onNext}"/>

<!--

<lightning:button label="Last" iconName="utility:right" iconPosition="right" variant="brand"

disabled="{! v.currentPageNumber == v.totalPages}" onclick="{!c.onLast}"/>

-->

</lightning:layoutItem>

</lightning:layout>

<!--

<lightning:button label="Save" variant="brand" onclick="{!c.handleSelectedAccounts }" />

<lightning:button label="Download as CSV" variant="brand" onclick="{!c.downloadCsv }" />

<lightning:button label="Clear Filters" variant="brand" onclick="{!c.handleClearFilters }"/>

<lightning:button label="Cancel" variant="brand"/>

</div>

-->

</aura:if>

</aura:component>

({

doInit : function(component, event, helper) {

component.set("v.hubShowHideFlag",true);

helper.onLoad(component, helper);

sortByKDNR : function(component, event, helper) {

helper.sortBy(component, "KDNR");

sortByIncludedKDNR : function(component, event, helper) {

helper.sortBy(component, "Profile_Linkable");

sortByCreatedDate : function(component, event, helper) {

helper.sortBy(component, "CreatedDate");

sortByParentKDNR : function(component, event, helper) {

helper.sortBy(component, "parentKDNR");

sortByRevenue : function(component, event, helper) {

helper.sortBy(component, "X12_Months_Rolling_Revenue");

sortByPayment : function(component, event, helper) {

helper.sortBy(component, "Payment_Type");

sortByCity : function(component, event, helper) {

helper.sortBy(component, "BillingCity");

sortByCountry : function(component, event, helper) {

helper.sortBy(component, "BillingCountry");

sortByCompanyName : function(component, event, helper) {

helper.sortBy(component, "Name");

handleMouseHover: function(component, event, helper) {

component.set("v.accountIdHover",event.srcElement.id);

helper.getMiniLayout(component, event, helper)

handleMouseOut: function(component, event, helper) {

component.set("v.hoverRow",-1);

component.set("v.togglehover",false);

redirectToAccount : function(component, event, helper) {

var classicURL = '/'+event.currentTarget.getAttribute("data-attriVal");

window.open(classicURL,'_blank');

onNext : function(component, event, helper) {

var pageNumber = component.get("v.currentPageNumber");

component.set("v.currentPageNumber", pageNumber+1);

helper.buildData(component, helper);

onPrev : function(component, event, helper) {

var pageNumber = component.get("v.currentPageNumber");

component.set("v.currentPageNumber", pageNumber-1);

helper.buildData(component, helper);

handleCancel : function(component, event, helper) {

component.set("v.showLoader",true);

var accountId = component.get("v.accountId");

var classicURL = '/'+accountId;

window.open(classicURL,'_self');

component.set("v.showLoader",false);

processMe : function(component, event, helper) {

component.set("v.currentPageNumber", parseInt(event.target.name));

helper.buildData(component, helper);

onFirst : function(component, event, helper) {

component.set("v.currentPageNumber", 1);

helper.buildData(component, helper);

onLast : function(component, event, helper) {

component.set("v.currentPageNumber", component.get("v.totalPages"));

helper.buildData(component, helper);

searchKDNRCompanyName : function (component, event, helper) {

var isEnterKey = event.keyCode === 13;

if (isEnterKey) {

component.set("v.showLoader",true);

var queryTerm = component.find('searchKDNR').get('v.value');

if(queryTerm) {

component.set('v.issearching', true);

setTimeout(function() {

helper.buildSearchData(component,helper,queryTerm);

component.set('v.issearching', false);

}, 2000);

}else{

alert("Please enter KDNR, Company Name");

component.set("v.showLoader",false);

}

searchparentKDNR :function(component, event, helper) {

var queryTerm = component.find('parentKDNR').get('v.value');

if(queryTerm){

var allDataArray = [];

allDataArray = helper.filterDataFromAllData(component,queryTerm, 'parentKDNR');

helper.buildDataArray(component, helper,allDataArray);

}

searchKDNR: function(component, event, helper) {

var queryTerm = component.find('KDNRName').get('v.value');

if(queryTerm){

var allDataArray = [];

allDataArray = helper.filterDataFromAllData(component,queryTerm, 'KDNR');

helper.buildDataArray(component, helper,allDataArray);

}

searchcomanyName: function(component, event, helper) {

var queryTerm = component.find('comanyName').get('v.value');

if(queryTerm){

var allDataArray = [];

allDataArray = helper.filterDataFromAllData(component,queryTerm.toUpperCase(), 'Name');

helper.buildDataArray(component, helper,allDataArray);

}

searchcountryName: function(component, event, helper) {

var queryTerm = component.get("v.countryName");

if(queryTerm){

var allDataArray = [];

allDataArray = helper.filterDataFromAllData(component,queryTerm, 'BillingCountry');

helper.buildDataArray(component, helper,allDataArray);

}

searchcityName: function(component, event, helper) {

var queryTerm = component.get("v.cityName");

debugger;

if(queryTerm){

var allDataArray = [];

allDataArray = helper.filterDataFromAllData(component,queryTerm, 'BillingCity');

helper.buildDataArray(component, helper,allDataArray);

}

searchpaymentMethod: function(component, event, helper) {

var queryTerm = component.find('paymentMethod').get('v.value');

if(queryTerm){

var allDataArray = [];

allDataArray = helper.filterDataFromAllData(component,queryTerm.toUpperCase(), 'Payment_Type');

helper.buildDataArray(component, helper,allDataArray);

}

searchProfileLinkable : function(component, event, helper) {

var queryTerm = component.find('profileLinkable').get('v.value');

if(queryTerm){

var allDataArray = [];

if(queryTerm === "Yes"){

allDataArray = helper.filterDataFromAllData(component,'true', 'Profile_Linkable');

}else if(queryTerm === "No"){

allDataArray = helper.filterDataFromAllData(component,'false', 'Profile_Linkable');

}

helper.buildDataArray(component, helper,allDataArray);

}

searchRevenueRM : function(component, event, helper) {

var queryTerm = component.find('revenueRM').get('v.value');

if(queryTerm){

var allDataArray = [];

allDataArray = helper.filterDataFromAllData(component,queryTerm, 'X12_Months_Rolling_Revenue');

helper.buildDataArray(component, helper,allDataArray);

}

searchSearchDate : function(component, event, helper) {

var queryTerm = component.find('searchDate').get('v.value');

if(queryTerm){

var allDataArray = [];

allDataArray = helper.filterDataFromAllData(component,queryTerm, 'CreatedDate');

helper.buildDataArray(component, helper,allDataArray);

}

doCaptureChangedValue : function(component, event, helper) {

var checkbox = event.getSource();

var selectedAccountRecord = component.get("v.selectedAccountRecords");

var unselectedAccountRecord = component.get("v.unselectedAccountRecords");

if(checkbox.get("v.value")){

selectedAccountRecord.push(checkbox.get("v.text"));

//unselectedAccountRecord.splice(checkbox.get("v.text"), 1);

}else{

unselectedAccountRecord.push(checkbox.get("v.text"));

//selectedAccountRecord.splice(checkbox.get("v.text"), 1);

}

component.set("v.selectedAccountRecords",selectedAccountRecord);

component.set("v.unselectedAccountRecords",unselectedAccountRecord);

searchBillingCountry : function(component, event, helper) {

var BillingCountryValue = component.get("v.BillingCountry");

//Process the selected contacts

handleSelectedAccounts: function(component, event, helper) {

component.set("v.showLoader",true);

var selectedAccounts = [];

var unSelectedAccounts = [];

var checkvalue = component.find("checkAccountId");

if(!Array.isArray(checkvalue)){

if (checkvalue.get("v.value") == true) {

selectedAccounts.push(checkvalue.get("v.text"));

}

}else{

for (var i = 0; i < checkvalue.length; i++) {

if (checkvalue[i].get("v.value") == true) {

selectedAccounts.push(checkvalue[i].get("v.text"));

}else{

unSelectedAccounts.push(checkvalue[i].get("v.text"));

}

console.log('unSelectedAccounts-' + unSelectedAccounts);

console.log('selectedAccounts-' + selectedAccounts);

var action = component.get("c.doUpdateSelectedUnsSelected");

action.setParams({

selectedAccounts : selectedAccounts,

unSelectedAccounts : unSelectedAccounts

});

action.setCallback(this,function(response) {

var state = response.getState();

if (state === "SUCCESS") {

//console.log("success or failure ::"+response.getReturnValue());

helper.removeFilters(component, helper);

//$A.get("e.force:refreshView").fire();

if(response.getReturnValue()){

component.set("v.successAlertFlag",true);

component.set("v.successAlert",response.getReturnValue());

}

//helper.onLoad(component, helper);

component.set("v.showLoader",false);

}else if(state === "ERROR"){

var errors = action.getError();

if (errors) {

if (errors[0] && errors[0].message) {

alert(errors[0].message);

}

component.set("v.showLoader",false);

}else if (status === "INCOMPLETE") {

alert('No response from server or client is offline.');

component.set("v.showLoader",false);

}

});

$A.enqueueAction(action);

handleClearFilters : function(component, event, helper) {

component.set("v.showLoader",true);

helper.removeFilters(component, helper);

helper.onLoad(component, helper);

//helper.buildDataArray(component, helper,allData);

//component.set("v.showLoader",false);

downloadCsv : function(component,event,helper){

var stockData = component.get("v.allData");

var csv = helper.convertArrayOfObjectsToCSV(component,stockData);

if (csv == null){

return;

}

var hiddenElement = document.createElement('a');

hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);

hiddenElement.target = '_self';

hiddenElement.download = 'ExportData.csv';

document.body.appendChild(hiddenElement);

hiddenElement.click();

})

({

onLoad : function(component, helper) {

this.removeFilters(component, helper);

var accountId = component.get("v.accountId") ? component.get("v.accountId") :component.get("v.recordId");

var action = component.get("c.doGetHeirarchyAccounts");

var billingCountryList = [];

var billingCityList = [];

action.setParams({

accountId : accountId

});

action.setCallback(this,function(response) {

var state = response.getState();

if (state === "SUCCESS") {

if(response.getReturnValue() !== null){

component.set("v.totalPages", Math.ceil(response.getReturnValue().length/component.get("v.pageSize")));

component.set("v.allData", response.getReturnValue());

for (var key in response.getReturnValue()) {

if (response.getReturnValue().hasOwnProperty(key)) {

if(response.getReturnValue()[key].BillingCountry){

if(billingCountryList.indexOf(response.getReturnValue()[key].BillingCountry.toUpperCase()) === -1) {

billingCountryList.push(response.getReturnValue()[key].BillingCountry);

}

if(response.getReturnValue()[key].BillingCity){

if(billingCityList.indexOf(response.getReturnValue()[key].BillingCity.toUpperCase()) === -1) {

billingCityList.push(response.getReturnValue()[key].BillingCity);

}

billingCountryList = [... new Set(billingCountryList)];

billingCityList = [... new Set(billingCityList)];

billingCountryList.sort();

billingCityList.sort();

component.set("v.billingCountryList",billingCountryList);

component.set("v.billingCityList",billingCityList);

component.set("v.currentPageNumber",1);

window.allData = component.get("v.allData");

helper.buildData(component, helper);

}else{

component.set("v.showLoader",false);

}

}else if(state === "ERROR"){

var errors = action.getError();

if (errors) {

if (errors[0] && errors[0].message) {

alert(errors[0].message);

}

component.set("v.showLoader",false);

}else if (status === "INCOMPLETE") {

alert('No response from server or client is offline.');

component.set("v.showLoader",false);

}

});

var requestInitiatedTime = new Date().getTime();

$A.enqueueAction(action);

buildSearchData : function(component, helper,queryTerm) {

var accountId = component.get("v.accountId");

var action = component.get("c.doSearchKDNRCompany");

action.setParams({

accountId : accountId,

searchString : queryTerm

});

action.setStorable();

action.setCallback(this,function(response) {

var state = response.getState();

if (state === "SUCCESS") {

component.set("v.totalPages", Math.ceil(response.getReturnValue().length/component.get("v.pageSize")));

component.set("v.allData", response.getReturnValue());

component.set("v.currentPageNumber",1);

helper.buildData(component, helper);

}else if(state === "ERROR"){

var errors = action.getError();

if (errors) {

if (errors[0] && errors[0].message) {

alert(errors[0].message);

}

}else if (status === "INCOMPLETE") {

alert('No response from server or client is offline.');

}

});

var requestInitiatedTime = new Date().getTime();

$A.enqueueAction(action);

buildDataArray : function(component, helper,allDataArray) {

var data = [];

var pageNumber = component.get("v.currentPageNumber");

var pageSize = component.get("v.pageSize");

var allData = allDataArray;

var x = (pageNumber-1)*pageSize;

for(; x<=(pageNumber)*pageSize; x++){

if(allData[x]){

data.push(allData[x]);

}

component.set("v.data", data);

helper.generatePageList(component, pageNumber);

buildData : function(component, helper) {

var data = [];

var pageNumber = component.get("v.currentPageNumber");

var pageSize = component.get("v.pageSize");

var allData = component.get("v.allData");

var x = (pageNumber-1)*pageSize;

for(; x<=(pageNumber)*pageSize; x++){

if(allData[x]){

data.push(allData[x]);

}

component.set("v.data", data);

helper.generatePageList(component, pageNumber);

generatePageList : function(component, pageNumber){

pageNumber = parseInt(pageNumber);

var pageList = [];

var totalPages = component.get("v.totalPages");

if(totalPages > 1){

if(totalPages <= 10){

var counter = 2;

for(; counter < (totalPages); counter++){

pageList.push(counter);

}

} else{

if(pageNumber < 5){

pageList.push(2, 3, 4, 5, 6);

} else{

if(pageNumber>(totalPages-5)){

pageList.push(totalPages-5, totalPages-4, totalPages-3, totalPages-2, totalPages-1);

} else{

pageList.push(pageNumber-2, pageNumber-1, pageNumber, pageNumber+1, pageNumber+2);

}

component.set("v.pageList", pageList);

component.set("v.showLoader",false);

removeFilters : function(component,helper){

component.find("parentKDNR").set("v.value", "");

component.find("KDNRName").set("v.value", "");

component.find("comanyName").set("v.value", "");

component.find("paymentMethod").set("v.value", "");

component.find("profileLinkable").set("v.value", "");

component.find("searchDate").set("v.value", "");

component.find("revenueRM").set("v.value", "");

component.set("v.countryName","");

component.set("v.cityName","");

convertArrayOfObjectsToCSV : function(component,objectRecords){

var csvStringResult, counter, keys, columnDivider, lineDivider;

if (objectRecords == null || !objectRecords.length) {

return null;

}

columnDivider = ',';

lineDivider = '\n';

keys = ['KDNR','Name','BillingCountry','BillingCity','Payment_Type','X12_Months_Rolling_Revenue','CreatedDate','Profile_Linkable','parentKDNR'];

csvStringResult = '';

//csvStringResult += keys.join(columnDivider);

csvStringResult += ['KDNR Name','Company Name','Billing Country','Billing City','Payment Type','REVENUE R12M','Created Date','Included KDNR','Parent KDNR' ];

csvStringResult += lineDivider;

for(var i=0; i < objectRecords.length; i++){

counter = 0;

for(var sTempkey in keys) {

var skey = keys[sTempkey] ;

if(counter > 0){

csvStringResult += columnDivider;

}

console.log(objectRecords[i][skey]);

if(objectRecords[i][skey] != undefined){

csvStringResult += '"'+ objectRecords[i][skey]+'"';

}else{

csvStringResult += '"'+ '' +'"';

}

counter++;

}

csvStringResult += lineDivider;

}

return csvStringResult;

filterDataFromAllData: function(component,queryTerm, searchField){

try {

var tempArray = allData.filter(function(item){

var temp = '';

if(searchField === 'Profile_Linkable'){

temp = (item && item[searchField] && item[searchField].toString()) ? item[searchField].toString() : 'false';

}else{

temp = (item && item[searchField] && item[searchField].toString()) || '' ? item[searchField].toString() : '';

}

return temp.includes(queryTerm)

});

return tempArray;

}

catch(e) {

alert(e);

}

getMiniLayout:function(component, event, helper){

var accountId = component.get("v.accountIdHover");

var action = component.get("c.doMouseOverData");

action.setParams({

accountId : accountId

});

action.setStorable();

action.setCallback(this,function(response) {

var state = response.getState();

if (state === "SUCCESS") {

console.log(JSON.stringify(response.getReturnValue()));

component.set('v.mouseHoverData', response.getReturnValue());

component.set("v.hoverRow", parseInt(event.target.dataset.index));

component.set("v.togglehover",true);

}

});

$A.enqueueAction(action);

sortBy: function(component, field) {

var sortAsc = component.get("v.sortAsc"),

sortField = component.get("v.sortField"),

data = window.allData,

sortAsc = field == sortField? !sortAsc: true;

data.sort(function(a,b){

var t1 = a[field] == b[field],

t2 = a[field] > b[field];

return t1? 0: (sortAsc?-1:1)*(t2?-1:1);

});

component.set("v.sortAsc", sortAsc);

component.set("v.sortField", field);

component.set("v.data", data);

}

});

.THIS .kdnrClass{

font-family: 'Roboto', sans-serif;

font-weight: 600;

font-size: 12px;

line-height: 1.42857;

color: #ff5f00 !important;

font-weight: bold !important;

}

.THIS .slds-text-title_caps{

color:black;

background:#eeeeee;

}

public class OverviewDetailsCtrl {

@AuraEnabled

public static List<Account> getLimitedAccounts(){

List<Account> accounts = [SELECT

Id, Name

FROM Account ORDER BY CreatedDate LIMIT 15000];

return accounts;

}

Salesforce Live

What is Cryptography in salesforce and what are all the algorithms provided by them ?

Salesforce Lightning Application Events Tutorial with single page

Custom Labels in Lightning Component for different languages

SFDX VSCode with GIT Salesforce

client side pagination using lightning component

Featured

What is Cryptography in salesforce and what are all the algorithms provided by them ?

Popular

Translate