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,