Skip to content

Instantly share code, notes, and snippets.

@Sunil02kumar

Sunil02kumar/SK_PromisePatternDemo.cmp

Created April 10, 2020 20:49
Show Gist options
  • Save Sunil02kumar/769616c6bc9f8447f102a347bcdef4f4 to your computer and use it in GitHub Desktop.
Save Sunil02kumar/769616c6bc9f8447f102a347bcdef4f4 to your computer and use it in GitHub Desktop.
Download ZIP
Using JavaScript Promises in Lightning Components
Raw
SK_PromisePatternDemo.cmp
<aura:component controller="SK_PromisePatternDemoController">
<aura:attribute name="ltngAccList" type="List"/>
<aura:attribute name="ltngTaskList" type="List"/>
<aura:attribute name="ltngClickedAction" type="String" default=""/>
<aura:attribute name="ltngAccInfoString" type="String" default=""/>
<aura:attribute name="ltngTaskInfoString" type="String" default=""/>
<lightning:button label="Fetch 2 records using callback pattern" onclick="{!c.findDataUsingNormalCall}"/>
<lightning:button label="Fetch 3 records using promise pattern" onclick="{!c.findDataUsingPromise}"/>
<br/>
<aura:if isTrue="{!v.ltngClickedAction=='NormalCall'}">
{!v.ltngAccInfoString}
<aura:if isTrue="{!!empty(v.ltngAccList)}">
<div style="background-color:#E6E6FA;border-style: solid;margin:5px;">
<table class="slds-table slds-table_fixed-layout slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-title--caps">
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Industry</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.ltngAccList}" var="item">
<tr class="slds-hint-parent">
<td scope="row"> {!item.Name}</td>
<td > {!item.Type}</td>
<td > {!item.Industry}</td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
</aura:if>
<br/>
{!v.ltngTaskInfoString}
<aura:if isTrue="{!!empty(v.ltngTaskList)}">
<div style="background-color:#E6E6FA;border-style: solid;margin:5px;">
<table class="slds-table slds-table_fixed-layout slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-title--caps">
<th scope="col">Subject</th>
<th scope="col">Status</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.ltngTaskList}" var="item">
<tr class="slds-hint-parent">
<td scope="row"> {!item.Subject}</td>
<td > {!item.Status}</td>
<td > {!item.Description}</td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
</aura:if>
</aura:if>
<br/>
<aura:if isTrue="{!v.ltngClickedAction=='PromiseCall'}">
{!v.ltngAccInfoString}
<aura:if isTrue="{!!empty(v.ltngAccList)}">
<div style="background-color:#E6E6FA;border-style: solid;margin:5px;">
<table class="slds-table slds-table_fixed-layout slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-title--caps">
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Industry</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.ltngAccList}" var="item">
<tr class="slds-hint-parent">
<td scope="row"> {!item.Name}</td>
<td > {!item.Type}</td>
<td > {!item.Industry}</td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
</aura:if>
<br/>
{!v.ltngTaskInfoString}
<aura:if isTrue="{!!empty(v.ltngTaskList)}">
<div style="background-color:#E6E6FA;border-style: solid;margin:5px;">
<table class="slds-table slds-table_fixed-layout slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-title--caps">
<th scope="col">Subject</th>
<th scope="col">Status</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.ltngTaskList}" var="item">
<tr class="slds-hint-parent">
<td scope="row"> {!item.Subject}</td>
<td > {!item.Status}</td>
<td > {!item.Description}</td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
</aura:if>
</aura:if>
</aura:component>
Raw
SK_PromisePatternDemoApp.app
<aura:application extends="force:slds">
<c:SK_PromisePatternDemo/>
</aura:application>
Raw
SK_PromisePatternDemoController.cls
public class SK_PromisePatternDemoController {
@AuraEnabled
public static List<Account> findMyAccounts(integer numberOfRecords){
return [select id,Name,Type,Industry from Account where createdById=:UserInfo.getUserId() order by LastModifieddate DESC Limit :numberOfRecords];
}
@AuraEnabled
public static List<Task> findMyPendingTasks(integer numberOfRecords){
return [select id,Description,Status,Subject from Task where OwnerId=:UserInfo.getUserId() order by LastModifieddate DESC Limit :numberOfRecords ];
}
}
Raw
SK_PromisePatternDemoController.js
({
findDataUsingNormalCall : function(component, event, helper) {
component.set("v.ltngClickedAction","NormalCall");
component.set("v.ltngAccInfoString","");
component.set("v.ltngTaskInfoString","");
var accList=component.set("v.ltngAccList",[]);
var accList=component.set("v.ltngTaskList",[]);
//find account list
component.set("v.ltngAccInfoString","Waiting for apex response from Server to get account records");
var actionName= component.get("c.findMyAccounts");
var params={"numberOfRecords":2};
actionName.setParams(params);
actionName.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var apexResponse=response.getReturnValue();
//set response to attribute value
console.log('***'+JSON.stringify(apexResponse));
component.set("v.ltngAccInfoString","Response recieved from Server for Account records.");
component.set("v.ltngAccList",apexResponse);
}else if(state === "ERROR"){
var errors = response.getError();
console.error(errors);
alert('Problem with connection. Contact your system administrator.');
}
});
$A.enqueueAction(actionName);
//find task list
component.set("v.ltngTaskInfoString","Waiting for apex response from Server to get task records");
var actionName= component.get("c.findMyPendingTasks");
var params={"numberOfRecords":2};
actionName.setParams(params);
actionName.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var apexResponse=response.getReturnValue();
//set response to attribute value
console.log('***'+JSON.stringify(apexResponse));
component.set("v.ltngTaskInfoString","Response recieved from Server for Task records.");
component.set("v.ltngTaskList",apexResponse);
}else if(state === "ERROR"){
var errors = response.getError();
console.error(errors);
alert('Problem with connection. Contact your system administrator.');
}
});
$A.enqueueAction(actionName);
},
findDataUsingPromise : function (component,event,helper){
console.log('****inside findDataUsingPromise');
component.set("v.ltngAccInfoString","");
component.set("v.ltngTaskInfoString","");
component.set("v.ltngClickedAction","PromiseCall");
var accList=component.set("v.ltngAccList",[]);
var accList=component.set("v.ltngTaskList",[]);
component.set("v.ltngAccInfoString","Waiting for response from Server to get Account Records.");
var params={"numberOfRecords":3};
var accountDataPromise = helper.ServerCallUsingPromise(component,'c.findMyAccounts',params);
accountDataPromise
.then(
$A.getCallback(function(result){
// Set Account Attribute
console.log('***inside success for first promise call');
console.log('***'+JSON.stringify(result));
component.set("v.ltngAccInfoString","Response recieved from Server for Account Records.");
component.set("v.ltngAccList", result);
console.log('***calling pending task using second promise');
var params={"numberOfRecords":3};
component.set("v.ltngTaskInfoString","Waiting for response from Server to get Task Records.");
return helper.ServerCallUsingPromise(component,'c.findMyPendingTasks',params);
}),
$A.getCallback(function(error){
alert('An error occurred getting the account : ' + error.message);
})
)
.then(
$A.getCallback(function(result){
console.log('***inside success for second promise call');
console.log('***'+JSON.stringify(result));
component.set("v.ltngTaskInfoString","Response recieved from Server for task records.");
component.set("v.ltngTaskList", result); // Set task Attribute
}),
$A.getCallback(function(error){
// Something went wrong
alert('An error occurred while getting the task : ' + error.message);
})
);
}
})
Raw
SK_PromisePatternDemoHelper.js
({
callToServer : function(component, method, callback, params) {
var action = component.get(method);
if(params){
action.setParams(params);
}
console.log('****param to controller:'+JSON.stringify(params));
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
callback.call(this,response.getReturnValue());
}else if(state === "ERROR"){
var errors = response.getError();
console.error(errors);
alert('Problem with connection.'+errors);
}
});
$A.enqueueAction(action);
},
ServerCallUsingPromise : function( component,method, params ) {
var promiseInstance = new Promise( $A.getCallback( function( resolve , reject ) {
var action = component.get(method);
if(params){
action.setParams(params);
}
console.log('****param to controller:'+JSON.stringify(params));
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
resolve(response.getReturnValue());
}else if(state === "ERROR"){
var errors = response.getError();
console.error(errors);
reject(response.getError() );
}
});
$A.enqueueAction(action);
}));
return promiseInstance;
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment