Growl-style Notifications in VisualForce

January 23, 2014 Michael Press

This post is the latest in our ongoing series about Assets in our Asset Library.  Previous posts have described some full-scale solutions that we’ve developed as well as novel proof-of-concept integrations.   In today’s post we go right to the source – the Asset’s creator – to give us the implementation details for the Asset he’s created.

Vikash Goyal is a Consultant in our Jaipur, India office.  On a recent project for a large Pharma customer, Vikash needed to share important communication between users, who could be portal users or regular Salesforce users.  Chatter is not an option on portals, and this customer had custom broadcast and messaging requirements that Chatter doesn’t support.  So Vikash combined the flexibility of JQuery with the beautiful Growl-like notification toolkit Gritter for JQuery in a Visualforce page to meet these objectives, and then packaged it up into an Asset so it can be used across all of Appirio’s projects.

I’ll turn it over to Vikash to describe the technical details of his cool solution.

Michael Press

michael@appirio.com

Problem :

We needed a messaging tool for a partner portal, built on custom Visualforce pages, to enable communication between internal and portal users.  For example, an internal user may want to share important news for portal users, or a portal user may have a question regarding portal uses or portal content.

Our tool has to provide functionality to read broadcast messages as well as question/response pairs which can be initiated by either the portal user or the internal Salesforce user. A notification mechanism should alert the portal user of new and existing messages.

In short, whenever a portal user logs in, there should be a notification window or Growl-like box at bottom right for communication or messages.

Solution :

Our solution combines an existing Javascript library for Growl-like notifications messages (more on this later) with Salesforce infrastructure.  First we need to store all communication. So for this we can create a custom object in Salesforce with required fields — lets say it is “Message” with following fields:

  1. Contact (Lookup to Contact)  : to store message belongs to.

  2. Message Body (Text Area)

Now if we want to show broadcast message between specific time frame then we can add :

  1. Start Date

  2. End Date

If we want to use this as question/reply thread then we can add :

  1. Parent Message (Lookup(Message))  :  Lookup to message record which is question.

And if we want “Archive” functionality like mailbox (i.e. once it is marked as read it should go to “Archive” section or “Read” Section) then we can add :

  1. Marked as read (Checkbox)

To differentiate between broadcast and question/reply message we can add following record types as follows:

  1. Broadcast

  2. Question

  3. Response

Now we are thinking of how we will display notification like Growl function or SFDC chat notification, Ahhh don’t worry we have a good javascript library gritter.js for it which is build by Jordan Boesch from 7shifts.

Gritter provides the growl like black notification boxes, which look like :

visualforce

Now to add this on your portal pages, start with creating a component which can be included as many pages as required.

In component we can add gritters by using following script :

<apex:includeScript value="{!URLFOR($Resource.MessagingWithVF, 'js/jquery.gritter.min.js')}"  />
$j.gritter.add({
       // (string | mandatory) the heading of the notification
       title: 'New Messages found!',
      // (string | mandatory) the text inside the notification
      text: 'You have '+Count +' active broadcast messages.
});

There are much more options to include in gritter which you can refer on gritter.js.

Here we want when user clicks notification, the messages should get listed. So for this we can replace gritter text something like this :

$j.gritter.add({
       title: 'New Messages found!',
       text: 'You have '+Count +' active broadcast messages. <a href     = “#” onclick= “OpenModal();”>Click Here</a>
});

Now in javascript method openModal() we can write script which will display a dialog box using standard JQuery libraries which will look something like this:

Please refer jquery API Documentation to know about dialog options.

Now to handle all the communication, we need javascript remoting with VF page.

A) Start a new communication

To start a new communication, an internal user can directly add a message record to related contact record, but what about portal users?

For this we will have a button like in above dialog image “Post Question”, onclick it will open a new dialog with a textarea to enter the message. After entering message to save, need to call a remote function from javascript on click of save button which will create a new message record with record type as “Question” .

Visualforce.remoting.Manager.invokeAction(
   '{!$RemoteAction.PortalMessageController.saveQuestion }',
     contactId + '-' + text,
      function(result, event){
       },
     {escape: true}
);

B) Viewing messaging thread :

We want to add one additional piece of forum-like functionality — the whole message thread should be visible for selected message.

For this we can add one more javascript function which will be called on clicking the message, it will open a new dialog and again call a remote function to fetch the whole thread related to that message. As we are storing the messages in a hierarchy, Question as parent message and all replies to that are saved as child of that message. So all we need to call a remote function on click with parent message Id that will fetch all child messages as follows :

Visualforce.remoting.Manager.invokeAction(
   '{!$RemoteAction.PortalMessageController.getQuestionReplies }',
    parentMessageId, contactId,
    function(result, event){
        },
    {escape: true}
);

C) Add a new reply :

For this we will have a button like in above dialog image – “Add a reply” – that opens a new dialog with a textarea to enter the message. After entering message to save, we need to call a remote function from javascript with Parent Message Id which will create a new message record with record type as “Response” .

Visualforce.remoting.Manager.invokeAction(
     '{!$RemoteAction.PortalMessageController.replyToQuestion}',
      parentMessageId + '-' + text,contactId,
    function(result, event){
       },
       {escape: true}
 );

D) Archiving messages :

After seeing the new message, we want this message to show up in the new messages section  when we log in again.

So for this we can display a checkbox in front of each message labelled as “Mark Read”. So to archiving the message just check that checkbox. It will again call a remote function with current message ID and update the “mark read” checkbox on related message record. At the end it will refresh the dialog again, so the message is moved to the archive section.

Visualforce.remoting.Manager.invokeAction(
    '{!$RemoteAction.PortalMessageController.markAsRead}',
      recid,
      function(result, event){
        if(event.status) {
           $j( "#dialog" ).dialog('destroy');
           openModal(type);
        }
     }
);

Put all of that together and you have a robust broadcast and messaging application in Visualforce that can be used for both native Salesforce users as well as portal users.

Previous Article
Getting Off The "Happy Path": A Cool Approach To Synthetic Data.
Getting Off The "Happy Path": A Cool Approach To Synthetic Data.

By Kyle Bowerman (@kylebowerman) As developers, most of us first code our solution to data that we know wil...

Next Article
Offline Salesforce Data For Native iOS Apps – Salesforce Mobile SDK 2.0 SmartStore
Offline Salesforce Data For Native iOS Apps – Salesforce Mobile SDK 2.0 SmartStore

By Igor Androsov, Technical Architect For those of us involved in mobile development with Salesforce.com, w...