Quick Demo – Salesforce Platform Events

Quick Demo – Salesforce Platform Events

by :Aslam Bari 

 9

Hi All,
I am going to show you all a quick demo which I have made using Salesforce Platform Custom Events. Follow below steps:

1) Create Custom Event object:
In setup -> Platform Events -> Create a new object lets say “Opportunity Status Event”. Please see below picture for the same.

2) The purpose for this demo is to fire a event as soon as opportunity stage field value changed. So we need to write a trigger on Opportunity object. This trigger will fire a custom event for “Opportunity Status Event” using EventBus.Publish() method. Please check below code:

trigger OpportunityTrigger on Opportunity (after update) {
    list<Opportunity_Status_Event__e> eventList = new list<Opportunity_Status_Event__e>();
    for(Opportunity opp: trigger.new){
        if(opp.StageName != Trigger.oldmap.get(opp.id).StageName){
            Opportunity_Status_Event__e statusEvent = new Opportunity_Status_Event__e();
            statusEvent.record_id__c = opp.id;
            statusEvent.status__c = opp.StageName;
            eventList.add(statusEvent);
        }
    }
    
    if(eventList.size() > 0){
        EventBus.publish(eventList);
    }
    
}

3) Now, as you have created publisher. Now you need to make subscribers.

4) My first subscriber here is VF page called “OpportunityStatus”. It shows all opportunity stage names in a graphical way, to make this graphic component, i took help from this site: https://codepen.io/anon/pen/MOJyQN

In this VF page, we need to subscribe our Custom Event which is fired from Opportunity Trigger. For subscribing it, I used “cometd”. You can extract this library from internet or you can download all source code from bottom section of this blog. Please see following code:

<apex:page standardController="Opportunity" sidebar="false" extensions="OpportunityStatusController">
<script src="{!URLFOR($Resource.cometd,'cometd/cometd.js')}"/>
<script src="{!URLFOR($Resource.cometd,'cometd/jquery-1.5.1.js')}"/>
<script src="{!URLFOR($Resource.cometd,'cometd/json2.js')}"/>
<script src="{!URLFOR($Resource.cometd,'cometd/jquery.cometd.js')}"/>

<apex:sectionHeader title="Opportunity Stage" subtitle="Indicator"/>
<style>
/* Form Progress */
.progress {
  text-align: center;
}
.progress .circle,
.progress .bar {
  display: inline-block;
  background: #fff;
  width: 40px; height: 40px;
  border-radius: 40px;
  border: 1px solid #d5d5da;
}
.progress .bar {
  position: relative;
  width: 110px;
  height: 6px;
  margin: 0 -5px 17px -5px;
  border-left: none;
  border-right: none;
  border-radius: 0;
}
.progress .circle .label {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 32px;
  margin-top: 3px;
  color: #b5b5ba;
  font-size: 17px;
}
.progress .circle .title {
  color: #b5b5ba;
  font-size: 13px;
  line-height: 30px;
  margin-left: -18px;
}

/* Done / Active */
.progress .bar.done,
.progress .circle.done {
  background: #eee;
}
.progress .bar.active {
  background: linear-gradient(to right, #EEE 40%, #FFF 60%);
}
.progress .circle.done .label {
  color: #FFF;
  background: #8bc435;
  box-shadow: inset 0 0 2px rgba(0,0,0,.2);
}
.progress .circle.done .title {
  color: #444;
}
.progress .circle.active .label {
  color: #FFF;
  background: #0c95be;
  box-shadow: inset 0 0 2px rgba(0,0,0,.2);
}
.progress .circle.active .title {
  color: #0c95be;
}
.title{
   white-space: nowrap;
}
</style>

<div class="progress">
<apex:variable value="{!1}" var="index"/>
<apex:repeat value="{!stageValues}" var="stage">
<div class="circle">
    <span class="label">{!index}</span>
    <span class="title">{!stage}</span>
    <apex:variable value="{!index+1}" var="index"/>
</div>
<apex:outputPanel rendered="{!stage != 'Closed Won'}" styleClass="bar done"></apex:outputPanel>
</apex:repeat>
</div>

<script>

var i = 0;
$('.progress .circle').removeClass().addClass('circle');
$('.progress .bar').removeClass().addClass('bar');


$(".progress .circle").each(function( index ) {
  if($(this).find(".title").text() == "{!currentStatus}"){
      $(this).addClass("active");
      i = 1;
  }else if(i == 0){
      $(this).addClass("done");
  }
});


var j$ = jQuery.noConflict();
j$(document).ready(function() {

    j$.cometd.init({
        url: window.location.protocol+'//'+window.location.hostname+'/cometd/41.0/',
        requestHeaders: { Authorization: 'OAuth {!$Api.Session_ID}'}
    });

    j$.cometd.subscribe('/event/Opportunity_Status_Event__e', function(message) {
        if(message.data.payload.Record_Id__c == "{!oppId}"){
            j$('.progress .circle').removeClass("active");
            j$('.progress .circle').removeClass("done");
            i = 0;
            j$(".progress .circle").each(function( index ) {
              if(j$(this).find(".title").text() == message.data.payload.Status__c){
                  j$(this).addClass("active");
                  i = 1;
              }else if(i == 0){
                  j$(this).addClass("done");
              }
            });
        }
        
    });
});

</script>
</apex:page>