Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Visualforce component to display browser notifications when a case is updated that is owned by the currently logged in user
<apex:component >
<apex:attribute name="topic" description="The topic name" type="String" required="true"/>
<apex:includeScript value="{!URLFOR($Resource.streaming, 'streaming/cometd.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.streaming, 'streaming/jquery-1.5.1.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.streaming, 'streaming/json2.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.streaming, 'streaming/jquery.cometd.js')}"/>
<script type="text/javascript">
(function($){
$(document).ready(function() {
$.cometd.addListener("/meta/*",
function(message) {
var dateStr=new Date().toUTCString();
$('#log').prepend(dateStr + '<br/>' +
'Received message ' +
message.channel +
'<br/>Successful = ' +
message.successful +
'<br/>Version = ' +
message.version +
'<br/>Client id = ' +
message.clientId +
'<br/>Advice = ' + (null!=message.advice?('<br/>Reconnect: ' +
message.advice.reconnect +
'<br/>Interval: ' +
message.advice.interval)
:message.advice) +
'<br/>Error = ' + message.error + '<br/>');
})
// Connect to the CometD endpoint
$.cometd.init({
url: window.location.protocol+'//'+window.location.hostname+'/cometd/24.0/',
requestHeaders: { Authorization: 'OAuth {!$Api.Session_ID}' }
}
);
// Subscribe to a topic. JSON-encoded update will be returned
// in the callback
$.cometd.subscribe('/topic/{!topic}', function(message) {
$('#content').append('<p>Notification: ' +
'Channel: ' + JSON.stringify(message.channel) + '<br>' +
'Record name: ' + JSON.stringify(message.data.sobject.Name) + '<br>' +
'Record owner: ' + JSON.stringify(message.data.sobject.OwnerId) + '<br>' +
'Created: ' + JSON.stringify(message.data.event.createdDate) + '<br>' +
"ID: " + JSON.stringify(message.data.sobject.Id) + '<br>' +
"Number: " + JSON.stringify(message.data.sobject.CaseNumber) + '<br>' +
"Event type: " + JSON.stringify(message.data.event.type)+ '<br/>' +
"Mine : " + (message.data.sobject.OwnerId=='{!$User.id}'?'Yes':'No') + '</p>');
if (message.data.sobject.OwnerId=='{!$User.id}')
{
notify(message.data.sobject, message.data.event.type);
}
});
if (Notification && typeof Notification.permission==="undefined")
{
var testNotification = new window.Notification('This is a test');
if (testNotification.permission)
{
Notification.permission=testNotification.permission;
}
}
if (Notification && Notification.permission!== "granted" && (Notification.permission !== "denied" ))
{
$('#notifyon').click(function () {
Notification.requestPermission(function (status) {
// Change based on user's decision
if (Notification.permission !== status) {
Notification.permission = status;
}
// If it's granted show the notification
if (status === "granted") {
var n = new Notification("Notifications Enabled", {
tag: 'Notifications Enabled',
body: 'Notifications have been enabled for this page'
});
$('#notifyon').toggle();
}
});
});
}
});
})(jQuery)
function notify(sobject, eventtype)
{
// If notifications are granted show the notification
if (Notification && Notification.permission === "granted")
{
var millis=new Date().getTime();
var tag = 'CU:' + millis;
var n = new Notification("Case Update", {
icon : '{!URLFOR($Resource.notifyimg)}',
tag: tag,
body: 'Case ' + sobject.CaseNumber + ' ' + eventtype
});
n.onclick = function(){
window.focus();
this.cancel();
};
}
}
</script>
<button id="notifyon" style="display:none">Enable Chrome Notifications</button>
<button id="sendnotify" onclick="notify();">Send Notification</button>
<div style="float:right; width:250px"><h2>Log</h2></div>
<div style="clear:both; float:right; width:250px;height: 400px; overflow:auto" id="log">
</div>
<div id="content" style="margin-right: 250px">
<p>Notifications should appear here...</p>
</div>
</apex:component>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment