Saturday 20 October 2018

lightning:empApi Salesforce Winter19


lightning:empApi 




Hi All,
Today I will talk about brand new lightning component lightning:empApi , Which was delivered in winter 19 salesforce realease.

When to use empApi:  To see live data in on lightning component.

We had serval options to do this such as polling which is an old technique in this we call server (Apex class) again and again. Or we use streaming api, and cometD JS (external javascript) which requires lots of efforts.

Drawbacks of polling (Calling apex server) : In this we need to travel to server after every particular interval. In this sometimes our server trip is useless , if we do not have any latest data there. 

But now we have an native lightning component (lightning:empApi) , which is very helpful and reducse developer's effort.

lightning:empApi can only be used in desktop browser only and require API version 44.0 and higher. lightning:empApi can be used with platform events, PushTopic events, generic events and Change Data Capture events.

Let's see an example of lightning:empApi with platform events. My colleague Aslam bari already have written an outstanding blog (quick demo salesforce platform events) on Platform event.

In our example we will display all case which has status = open. We would not reload our component and will see live/latest data.

Demo:



So firts of all we will create a new platform event.
I have created platform event (UpdateRecord__e).

Then we need to publish it whenever a new case is inserted with status = 'open'. As well as you can also publish platform event when status is changed from open to any other or vice versa. And same you can do for delete also.

CaseTrigger:


trigger CaseTrigger on Case (after insert) { List<Case> listOfOpenCase = new List<Case>(); for(Case objCase : trigger.new){ if(objCase.Status == 'Open'){ listOfOpenCase.add(objCase); } } if(listOfOpenCase.size() > 0){ EventBus.publish(new UpdateRecord__e(message__c = listOfOpenCase[0].id)); } }


empApiExample.cmp:

<aura:component controller="empApiExampleController" implements="force:appHostable"> <aura:handler name="init" value="{!this}" action="{!c.doInit}"></aura:handler> <aura:attribute name="listOfCases" type="List"/> <aura:attribute name="subscription" type="Map" /> <aura:attribute name="showSpinner" type="Boolean" default="false"/> <lightning:empApi aura:id="empApi"/> <aura:if isTrue="{!v.showSpinner}"> <lightning:spinner size="small"/> </aura:if> <lightning:card title="empApi Example" footer=""> <div> <table class="slds-table slds-table_cell-buffer slds-table_bordered"> <thead> <tr class="slds-line-height_reset"> <th class="slds-text-title_caps" scope="col"> <div class="slds-truncate" title="Opportunity Name">Case Subject</div> </th> <th class="slds-text-title_caps" scope="col"> <div class="slds-truncate" title="Account Name">Priority</div> </th> <th class="slds-text-title_caps" scope="col"> <div class="slds-truncate" title="Close Date">Reason</div> </th> </tr> </thead> <tbody> <aura:iteration items="{!v.listOfCases}" var="objCase"> <tr class="slds-hint-parent"> <td data-label="Case Subject"> <div class="slds-truncate" title="Cloudhub">{!objCase.Subject}</div> </td> <td data-label="Case Priority"> <div class="slds-truncate" title="Cloudhub">{!objCase.Priority}</div> </td> <td data-label="Case Reason"> <div class="slds-truncate" title="Cloudhub">{!objCase.Reason}</div> </td> </tr> </aura:iteration> </tbody> </table> </div> </lightning:card> </aura:component>



empApiExampleController.js



({ doInit : function(component, event, helper) { helper.getData(component); // Get the empApi component. var empApi = component.find("empApi"); // Error handler function that prints the error to the console. var errorHandler = function (message) { console.error("Received error ", JSON.stringify(message)); }; // Register error listener and pass in the error handler function. empApi.onError(errorHandler); var channel = '/event/UpdateRecord__e'; // platform event name var replayId = -1; var callback = function (message) { console.log("Event Received : " + JSON.stringify(message)); helper.getData(component); }; // Subscribe to the channel and save the returned subscription object. empApi.subscribe(channel,replayId, callback).then(function(newSubscription) { component.set("v.subscription", newSubscription); // can be used if you want to unsubscribe event }); } })

empApiExampleHelper.js



({ getData : function(component) { component.set("v.showSpinner",true); var action = component.get('c.getListOfCases'); action.setCallback(this,function(response){ if(response.getState() === "SUCCESS"){ component.set("v.listOfCases",response.getReturnValue()); component.set("v.showSpinner",false); } }); $A.enqueueAction(action); } })


empApiExampleController (Apex)


public class empApiExampleController { @AuraEnabled public static List<Case> getListOfCases(){ return [SELECT Id,Subject,Priority,Reason FROM Case WHERE Status = 'Open']; } }

Thanks,


2 comments:

  1. This information is impressive; I am inspired by your post writing style & how continuously you describe this topic. After reading your post, thanks for taking the time to discuss this, I feel happy about it and I love learning more about this topic.

    openstack training center in chennai | openstack certification training in chennai | redhat openstack training in chennai

    ReplyDelete
  2. The thrust is always on the utilization of the natural resources of the country in a sustainable manner, protection of the environment along with ensuring national security. Salesforce training in India



    ReplyDelete