How to create visualforce page using Streaming API

Streaming API allows to push data (whenever records are created or updated in the backend) to a visualforce page opened by a user without refreshing page. It is very much similar to push notifications in mobile apps. You can refer Streaming API developer guide to get additional details regarding streaming API. Since it is an API in Salesforce, you can connect to it using multiple ways. You can build a java client application to connect to Salesforce. In this post, we will cover how to create a visualforce page using streaming API. This page will show newly created opportunities without reloading the page.

Steps to Use

1. Create a push notification in Salesforce

Streaming API works on the model of subscribing to push notifications. So first step is to create a push notification at the salesforce end to which we can subscribe from the visualforce page we are going to create. In this post we will create a push notification on opportunity object. Easiest way to create this is execute below code in developer console.

//Creating push notification for new opportunities
PushTopic pushTopic = new PushTopic();
pushTopic.Name = 'AllOpenOps';
pushTopic.Query = 'SELECT Id,Name,IsClosed,Amount,StageName,Probability FROM Opportunity';
pushTopic.ApiVersion = 33.0;
pushTopic.NotifyForOperationCreate = true;
pushTopic.NotifyForFields = 'Referenced';
insert pushTopic;

2. Create visualforce page and controller to subscribe to this push notification

Cometd JavaScript library is used to get data in JSON format to visualforce page. Then using this JavaScript data can be rendered to visualforce page. In the example given below, controller queries 10 opportunity records and displays as a table in page level. Thereafter whenever new opportunities are created in the backend, streaming API pushes data as JSON to page and using JavaScript this data is appended at the end of the table.

<apex:page standardStylesheets="false" controller="StreamingController" showHeader="TRUE" sidebar="false">
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <div class="container">
        <!--Displaying initial 10 opporunities in a table-->
        <table id="oppTable" class="table table-hover table-bordered table-striped">
            <thead>
                <tr>
                <th>
                    Name
                </th>
                <th>
                    Stage
                </th>
                <th>
                    Amount
                </th>
                </tr>
            </thead>
            <tbody>
                <apex:repeat value="{!oppList}" var="opp">
                    <tr>
                        <td>
                            {!opp.Name}
                        </td>
                        <td>
                            {!opp.StageName}
                        </td>
                        <td>
                            {!opp.amount}
                        </td>
                    </tr>
                </apex:repeat>
            </tbody>
        </table>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="{!URLFOR($Resource.jsUtilities, '/js/json2.js')}"></script>
    <script src="{!URLFOR($Resource.jsUtilities, '/js/cometd.js')}"></script>
    <script src="{!URLFOR($Resource.jsUtilities, '/js/jquery.cometd.js')}"></script>
        <script>
      // initizlizing Streaming API
      (function($) {
        $(document).ready(function() {
          //Initializing cometd library to cometd endpoint
          $.cometd.init({
            url: window.location.protocol + '//' + window.location.hostname + '/cometd/33.0/',
            requestHeaders: {
              Authorization: 'OAuth {!$Api.Session_ID}'
            },
            appendMessageTypeToURL : false
          });

          // Subscribing to the push topic.
          //JSON-encoded data will be returned in the callback each time whenever opportunity is created
          $.cometd.subscribe('/topic/AllOpenOps', function(message) {
            if (message.data.event.type == 'created') {
              var newOpp =message.data.sobject;
              //Appeding newly created opportunity data to the table of opportunities as last row
              $("#oppTable > tbody").append('<tr class="success"><td>'+newOpp.Name+'</td><td>'+newOpp.StageName+'</td><td>'+newOpp.Amount+'</td></tr>');
            }
          });

        });
      })(jQuery)
    </script>
</apex:page>

//This controller queries 10 opprotunities randomly
public class StreamingController {
public List<Opportunity> oppList{get;set;}

    public streamingController(){
        oppList = [Select Id,Name,Amount,StageName FROM Opportunity limit 10];
    }

In the page a static resource is used with JavaScript libraries like cometd, JSON2 etc. You can find the static resource in Salesforce Sample Codes Github project.

Please note that streaming API usage is counted against a 24hour daily limit. Exact limit varies with edition of salesforce. For developer edition it is 10000 in 24 hours.

[Top]