Thursday, 9 November 2017

Quick Demo - Salesforce Platform Events

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>
In above code, you can see, as soon as it receives a event, it changes the indicator values on progress bar.

5) My second subscriber here is another VF page called "OpportunityStatusGraph". It shows current stage of opportunity in  a CSS Circle format with different colors.



It uses same way for subscribing event using "cometd" plugin. See the below 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> .circle { width: 300px; height: 300px; border-radius: 50%; font-size: 25px; color: #fff; line-height: 300px; text-align: center; background: #d9534f; } </style> <div class="circle">{!currentStatus}</div> <script> $(document).ready(function() { setcolor( $(".circle").text()); $.cometd.init({ url: window.location.protocol+'//'+window.location.hostname+'/cometd/41.0/', requestHeaders: { Authorization: 'OAuth {!$Api.Session_ID}'} }); $.cometd.subscribe('/event/Opportunity_Status_Event__e', function(message) { if(message.data.payload.Record_Id__c == "{!oppId}"){ $(".circle").text(message.data.payload.Status__c); setcolor( $(".circle").text()); } }); }); function setcolor(circolor){ if(circolor == 'Prospecting') $(".circle").css("background-color","#f7f7f7"); else if(circolor == 'Qualification'){ $(".circle").css("background-color","#0275d8"); }else if(circolor == 'Needs Analysis'){ $(".circle").css("background-color","#5bc0de"); }else if(circolor == 'Value Proposition'){ $(".circle").css("background-color","#f0ad4e"); }else if(circolor == 'Perception Analysis'){ $(".circle").css("background-color","#d9534f"); }else if(circolor == 'Negotiation/Review'){ $(".circle").css("background-color","#292b2c"); }else if(circolor == 'Closed Won'){ $(".circle").css("background-color","#5cb85c"); } } </script> </apex:page>


5) This is the Apex Class code. This is straight forward code:

public class OpportunityStatusController{ public string oppId {get;set;} public string currentStatus {get;set;} public OpportunityStatusController(ApexPages.standardcontroller sc){ oppId = sc.getRecord().Id; currentStatus = [select id, stagename from opportunity where id=:oppId].StageName; } public List<String> getStageValues(){ Schema.DescribeFieldResult fieldResult = Opportunity.StageName.getDescribe(); List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues(); List<String> options = new List<String>(); for( Schema.PicklistEntry f : ple){ options.add(f.getValue()); } return options; } }

Now, to see full demo of this functionality, check the video below:




Now, you can see, in salesforce we can fire any type of custom event using Platform Events feature. We can also have external apps or websites, which can subscribe these events and updates contents automatically. Like we can have custom web page on heroku or amazon or mobile app window which can subscribe these custom events and listen it.

We can think many other ways or ideas where we can utilize this amazing feature of salesforce.

Comment or drop email if you have any question or suggestion on this.

Downloads:
Static Resources

Thanks

4 comments:

  1. It was so nice article. I was really satisfied by seeing this article. google cloud online course Hyderabad

    ReplyDelete
  2. Every year, you celebrate a special day that is all yours. It's the day when you came to the world, a day known as your birthday. On this special day of yours, what kind of things do you receive? Do you get phone calls from loved ones? Do you get gifts of all kinds? Or do you receive something special in the mail? love shayari images

    ReplyDelete
  3. Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info. business sms service

    ReplyDelete