Push notifications are the visual indicators which notifies the users for the latest alerts and changes in the system.
Push notifications does not require and refresh in current window/state of the user. The browser polls the system at regular intervals and notifies the user in case of change.
This is useful when the user stay on the current page for long and want to get notified in case of any change from backend systems.
In case of service console provided to call center agents, those are typically the 360 degree view of the customers. Now in case of any alert from the management A visual indicator should be provided on that screen only so that without any refresh of current state/window a call center rep should be aware about latest happening useful to him.
This actually helps the call center agents to satisfy customers in the better way. Say, call center agent while working/ attending a call with the customer is trying to pull the data/info about customer which is again integrated with other systems and meanwhile the service got down. So with notifications available there he will be immediately notified about the same. This will actually helps agent to handle the calls in more better way rather to make the customers wait and then regret for the same.
The code for the same will be below
<apex:page standardController="NewsMessage__c" extensions="Ctrl_AgentNewsAlerts" recordSetVar="msgs" id="msgCtrl" sidebar="false" showHeader="false" standardStylesheets="false">
<apex:includeScript value="{!$Resource.jQuery1_7_2}"/>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<apex:includeScript value="{!$Resource.cometd}"/>
<apex:includeScript value="{!$Resource.json2}"/>
<apex:includeScript value="{!$Resource.jquery_cometd}"/>
<apex:includeScript value="/js/functions.js" />
<apex:includeScript value="/soap/ajax/29.0/connection.js"/>
<apex:includeScript value="/support/console/29.0/integration.js"/>
<style>
.firstRow{
background-color:#BFCFE3;
margin-bottom:6px;
float:left;
width:100%;
border-collapse: separate;
border-spacing: 0;
border:solid 1px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius: 4px;
}
.secondRow{
background-color:#FFEAD3;
margin-bottom:6px;
float:left;
width:100%;
border-collapse: separate;
border-spacing: 0;
border:solid 1px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius: 4px;
}
</style>
<apex:form id="pgForm" style="background-color:#476B8F; height=500px;">
<apex:actionFunction action="{!refreshMessages}" name="refreshAlerts" rerender="pgForm"/>
<apex:actionFunction action="{!filterNewsAlerts}" name="refreshDate" rerender="pgForm">
<apex:param name="agentDispDt" value="" assignTo="{!agentDisplayDate}" />
</apex:actionFunction>
<apex:pageBlock id="pgBlck" tabStyle="NewsMessage__c">
<apex:outputPanel id="firstDiv" layout="block" rendered="true" style="background-color:#476B8F; height:28px; column-gap:6px;">
<span style="color:#F3F7FD; font-size:18pt; font-family:Arial; font-style:normal;">Agent News and Alerts</span>
<apex:commandButton status="fetchStatus" style="color:#25496D; float:right; font-size:10pt; font-family:Arial; font-weight:bold;" image="{!URLFOR($Resource.NewsAlertIcons,'Refresh.png')}" reRender="pgForm" title="Refresh" action="{!refreshMessages}"/>
</apex:outputPanel>
<apex:outputPanel id="secDiv" layout="block" rendered="true" style="background-color:#25496D; font-color:white; height:28px; column-gap:6px;">
<apex:inputHidden id="agentDatePicker" value="{!agentDisplayDate}" />
<apex:outputText id="displayDate" style="color:#6F8FAB; font-size:11pt; font-family:Arial; font-weight:bold;" value="Showing items for {0, date, MMMM d',' yyyy}" rendered="{!isFilter}" >
<apex:param value="{!agentFilterDate}" />
</apex:outputText>
<apex:commandButton status="fetchStatus" image="{!URLFOR($Resource.NewsAlertIcons,'clear-date-10x10.png')}" reRender="pgForm" title="Clear" action="{!refreshMessages}" rendered="{!isFilter}"/>
</apex:outputPanel>
<div id="thirdDiv" align="right" style="background-color:#476B8F; width:100%; height:25px;">
<apex:commandButton status="fetchStatus" reRender="pgForm" image="{!URLFOR($Resource.NewsAlertIcons,'back-enabled.png')}" action="{!previous}" rendered="{!hasPrevious}" title="Previous Page"/>
<apex:commandButton status="fetchStatus" image="{!URLFOR($Resource.NewsAlertIcons,'back-disabled.png')}" action="#" disabled="true" rendered="{!!hasPrevious}"/>
<apex:commandButton status="fetchStatus" reRender="pgForm" image="{!URLFOR($Resource.NewsAlertIcons,'next-enabled.png')}" action="{!next}" rendered="{!hasNext}" title="Next Page"/>
<apex:commandButton status="fetchStatus" image="{!URLFOR($Resource.NewsAlertIcons,'next-disabled.png')}" action="#" disabled="true" rendered="{!!hasNext}"/>
<apex:outputPanel style="color:#4AA02C;font-weight:bold">
<apex:actionStatus id="fetchStatus" startText="Fetching..." stopText=""/>
</apex:outputPanel>
</div>
<apex:dataTable id="pgBlckTbl" value="{!messageList}" var="msg" bgcolor="#476B8F" width="95%" align="center" rowClasses="firstRow, secondRow" cellpadding="6px">
<apex:column width="10%"> <apex:image url="{!URLFOR($Resource.NewsAlertIcons,msg.Icon_Uri__c)}"/> <br/> </apex:column>
<apex:column width="90%">
<apex:outputText value="{!msg.Alert_Message__c}" style="color:#25496D; font-size:13pt; font-family:Arial; font-weight:bold;" escape="false"/>
<apex:outputText value="{!msg.Post_Since__c}" style="color:#25496D; float:right; font-size:10pt; font-family:Arial; font-weight:bold;" escape="false"/>
<br/>
<apex:outputText value="{!LEFT(msg.Message_Detail__c, 150)}" style="color:#25496D; font-size:11pt; font-family:Arial; font-style:normal;" escape="false"/>
<apex:outputLink onClick="readMore('{!JSENCODE(msg.Alert_Message__c)}', '{!JSENCODE(msg.Message_Detail__c)}'); return false;" rendered="{!IF(LEN(msg.Message_Detail__c) > 150, true, false)}" style="color:#25496D; font-size:10pt; font-family:Arial; font-style:italic;" > (More...)</apex:outputLink>
<br/>
</apex:column>
</apex:dataTable>
<div id="fourthDiv" style="background-color:#476B8F; width:100%; height:100px;">
</div>
</apex:pageBlock>
<script type="text/javascript">
(function($)
{
$('[id$=agentDatePicker]').datepicker({
showOn: "both",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
dateFormat:"yy-mm-dd",
showAnim: "slide",
buttonImage: "{!URLFOR($Resource.NewsAlertIcons,'pick-date-18x18.png')}",
buttonImageOnly: true,
buttonText: "Select date",
onSelect: function(value, date) {
//alert('The chosen date is ' + value);
var agentDispDt = value;
refreshDate(agentDispDt);
}
});
})(jQuery);
</script>
<script type="text/javascript">
window.onbeforeunload = disconnect();
var j$ = jQuery.noConflict();
function readMore(alertMsg, detailText) {
var options = {};
var dialog = j$('<div></div>')
.css({overflow:"auto"})
.html(detailText)
.dialog({
closeOnEscape: true,
modal: true,
title: alertMsg,
height: 300,
width: 400,
closeText: "Close"
});
}
//================Streaming API code to refresh status===================
//var j$ = jQuery.noConflict();
jQuery.noConflict();
(function($)
{
var liveAgentCheckInterval;
var buttonName = 'News Alert';
var originalName = 'Agent News and Alerts';
var flashInterval;
var lastShade = '#c0e2ea';
var newReqs = 0;
var oldReqs = 0;
var requests = {};
function setButtonText(reqs) {
//alert('Inside setButtonText :: ' + reqs);
var newText = reqs ? buttonName + ' - 1' : originalName;
//alert('newText ::' + newText);
sforce.console.setCustomConsoleComponentButtonText(newText);
}
function setButtonBgColor(color) {
//alert('Inside setButtonBgColor:' + color);
if (!color) {
return;
}
sforce.console.setCustomConsoleComponentButtonStyle('background-color: ' + color + ';');
}
function stopFlashAlert() {
//alert('Inside stopFlashAlert 1');
setButtonBgColor('transparent');
setButtonText(false);
clearInterval(flashInterval);
flashInterval = null;
}
sforce.console.onCustomConsoleComponentButtonClicked(function() {
//alert('Inside compButtonClicked');
setButtonBgColor('transparent');
clearInterval(flashInterval);
flashInterval = null;
//refresh
if(newReqs > 0){
//alert('refreshing page on button clicked');
newReqs = 0;
setButtonText(false);
}
refreshAlerts();
});
function flashAlert(reqs) {
//alert('Inside flashAlert');
startFlashing = function() {
flashInterval = setInterval(function() {
lastShade = lastShade == '#E4F3F7' ? '#149BC8' : '#E4F3F7';
setButtonBgColor(lastShade);
}, 700);
}
if(!flashInterval && reqs) {
oldReqs = reqs;
//alert('Inside flashAlert 2');
sforce.console.isCustomConsoleComponentWindowHidden(function(a) {
if (a.hidden) {
startFlashing();
}
});
}
if (reqs > 0) {
setButtonText(reqs);
} else {
stopFlashAlert();
}
}
$(document).ready(function() {
var cometd = $.cometd;
// Connect to the CometD endpoint
cometd.init({
url: window.location.protocol+'//'+window.location.hostname+'/cometd/29.0/',
requestHeaders: { Authorization: 'OAuth {!$Api.Session_ID}'}
});
// Subscribe to a AgentNewsMessage topic
cometd.subscribe('/topic/AgentNewsAlert', function(message)
{
//on new Alert Addition Streaming API
alert('Streaming API');
newReqs++;
//alert('Value:'+newReqs);
flashAlert(newReqs);
refreshAlerts();
});
});
})(jQuery);
function disconnect() {
// alert('Closing Window');
$.cometd.disconnect();
}
//========================================================================
</script>
</apex:form>
</apex:page>
/**
* Name : Ctrl_AgentNewsAlerts
* Usage : Ctrl_AgentNewsAlerts class used for building Agent News and Alerts custom console component.
* By querying data from custom object NewsMessage__c and display
*
*
* Created By : Mukul Goel
* Modified By :
* Modified Date : Mar26, 2015
*
*/
public class Ctrl_AgentNewsAlerts {
public List<NewsMessage__c> alertNews;
public Integer noOfRecords{get; set;}
public Integer size{get;set;}
public Date agentFilterDate{get;set;}
public String agentDisplayDate{get;set;}
public boolean isFilter {get;set;}
public list<NewsMessage__c> getMessageList(){
alertNews = new List<NewsMessage__c>();
for(NewsMessage__c msg : (list<NewsMessage__c>)stdController.getRecords())
alertNews.add(msg);
return alertNews;
}
public Ctrl_AgentNewsAlerts(ApexPages.StandardSetController controller) {
agentDisplayDate = null;
agentFilterDate = null;
isFilter = false;
}
public ApexPages.StandardSetController stdController {
get{
if(stdController == null){
size = 3;
string queryString = 'select Id, Name, Alert_Message__c, Message_Detail__c, Post_Since__c, Icon_Uri__c, Detail_Text__c ' +
' from NewsMessage__c where Active__c = true order by CreatedDate desc';
stdController = new ApexPages.StandardSetController(Database.getQueryLocator(queryString));
//stdController.setPageNumber(1);
stdController.setPageSize(size);
noOfRecords = stdController.getResultSize();
isFilter = false;
}
return stdController;
}set;
}
public PageReference refreshMessages(){
stdController = null;
agentFilterDate = null;
agentDisplayDate = null;
isFilter = false;
alertNews = getMessageList();
stdController.setPageNumber(1);
return null;
}
/*public pageReference refresh() {
stdController = null;
agentFilterDate = null;
agentDisplayDate = null;
isFilter = false;
getMessageList();
stdController.setPageNumber(1);
return null;
}*/
public Boolean hasNext {
get {
return stdController.getHasNext();
}
set;
}
public Boolean hasPrevious {
get {
return stdController.getHasPrevious();
}
set;
}
public Integer pageNumber {
get {
return stdController.getPageNumber();
}
set;
}
/*public void first() {
stdController.first();
}
public void last() {
stdController.last();
}*/
public void previous() {
stdController.previous();
}
public void next() {
stdController.next();
}
public PageReference filterNewsAlerts(){
isFilter = true;
system.debug( 'agentDisplayDate::' + agentDisplayDate);
if(agentDisplayDate != null && agentDisplayDate.trim().length() > 0)
agentFilterDate = Date.valueOf(agentDisplayDate);
system.debug('agentFilterDate::' + agentFilterDate);
stdController = null;
size = 3;
string queryString = 'select Id, Name, Alert_Message__c, Message_Detail__c, Post_Since__c, Icon_Uri__c, Detail_Text__c ' +
' from NewsMessage__c where Active__c = true and DAY_ONLY(CreatedDate) =: agentFilterDate order by CreatedDate desc';
stdController = new ApexPages.StandardSetController(Database.getQueryLocator(queryString));
stdController.setPageNumber(1);
stdController.setPageSize(size);
noOfRecords = stdController.getResultSize();
return null;
}
}
Static resources can be downloaded from here. In folder there is image for the object structure alos. Please create object accordingly .
https://drive.google.com/folderview?id=0B4gJmOMW7SwwUHpLd0s2dzNCWFE&usp=sharing
Before proceeding further we need to create the push topic since we are using the streaming api
Execute the following in developer console.
PushTopic pushTopic = new PushTopic();
pushTopic.ApiVersion = 23.0;
pushTopic.Name = 'NewAlert';
pushTopic.Description = 'Notify if the Alert created';
pushtopic.Query = 'Select id,name,alert_info_url__c, alert_message__c,icon_uri__c From NewsMessage__c';
insert pushTopic;
System.debug('Created new PushTopic: '+ pushTopic.Id);
Once this setup is complete
GOto Setup --> Customize --> Custom console components.
Create a new component with the above visual force page.
Now go to setup --> Create ---> Apps
Select the console app and add the custom console component in the footer.
Go to console page.
Open the News and alert object in another browser. Create a record for the same. As soon as u create the record go to original window. the component in the footer will start flashing automatically without any refresh .
Thanks for reading. I am happy to help if someone requires any kind of help
Best Answer
I believe you've stumbled into a web of overloaded terminology and recent release changes. Here's a bit of history of the console naming and current state of affairs that I hope clears it up.
Before Winter 16: We have a console product named Salesforce Console for Service/Sales. This is the same console that currently exists, and is the only one currently available to new orgs. Anything called Console is this same product.
Winter 16: Lightning Experience is released! There was much rejoicing. Users can now swap between Classic and Lightning experience. At the same time, the Salesforce Console was re-skinned and re-branded to become the Lightning Service Console. In appearance it aligns with the new Lightning Experience UI and has other UI upgrades, but the underlying product is the same and it is only accessible through the Classic experience.
At this time, you were able to select the console from the App Launcher in Lightning. This would switch the user back to the Classic experience and take you to the console.
Winter 17: For reasons, access to the Console was removed from the App Launcher in Lightning Experience. This included removing the ability to change consoles from setup when using Lightning. You need to switch back to Classic Experience in order to access consoles or edit them via Setup.
Winter 17 patch 10 (approx. Oct 18): A patch went out to restore some functionality that was changed in Winter 17. After this point you are able to see the console apps from the App Launcher and clicking them should launch a new browser tab and take you to your console, but you will not be able to edit them as admins without switching back to Classic.
tl;dr There is only one Console, and it exists in Classic only. [see edit at bottom of post] You can access it via Lightning but it will switch you back to Classic mode when you do. Admin changes to the console must be done through Classic setup.
References:
https://releasenotes.docs.salesforce.com/en-us/winter16/release-notes/rn_console_ui.htm
https://releasenotes.docs.salesforce.com/en-us/winter16/release-notes/rn_lex.htm
http://releasenotes.docs.salesforce.com/en-us/winter17/release-notes/rn_salesforce_console_access_change.htm (this link may be dead at the time of reading, as this topic will be removed from the release notes as it's no longer accurate after the patch)
https://help.salesforce.com/articleView?id=console2_configuration.htm&language=en_US&type=0
[Edit Jan 9, 2017]
In Spring '17 Salesforce is introducing the Lightning Service Console, an all-new console app which lives exclusively in Lightning and is built natively on the Lightning framework. So now there are two consoles, one that lives in Classic and one that lives in Lightning. https://resources.docs.salesforce.com/206/latest/en-us/sfdc/pdf/salesforce_spring17_release_notes.pdf