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

9 comments:

  1. 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
  2. Great article Lot's of information to Read...Great Man Keep Posting and update to People..Thanks pipedrive pricing

    ReplyDelete
  3. Your blog is too much amazing. I have found with ease what I was looking. Moreover, the content quality is awesome. Thanks for the nudge! sviluppo siti web Corsico

    ReplyDelete
  4. I found that site very usefull and this survey is very cirious, I ' ve never seen a blog that demand a survey for this actions, very curious... 1000Pip Builder Forex System

    ReplyDelete
  5. I thoroughly enjoyed reading your post. I'll pass it along to my other friends because the information is extremely informative. Continue to share your fantastic work with us. Ea builder reviews

    ReplyDelete
  6. You have very interesting video on youtube. I think you should promote your channel more. You can get additional likes and views from this site https://soclikes.com/ for your video

    ReplyDelete
  7. Interesting, thanks to author. Don't you think it's worth posting these thoughts on Instagram? After all, this social network is now very popular. By the way, I advise you to buy instagram followers in order to quickly increase their number and promote your account to the top.

    ReplyDelete