Real-Time Dashboards

This video gives a demo of a Real Time Opportunity Dashboard in action. 

The XML for this page is available from our Sample Page Repository.

At a high-level, the approach we took for this page was to poll for changes to data in a particular object every 10 seconds. In our page, we have 2 Models: "Opportunity", which is the Model that our Table and Charts are associated to, and "RecentUpdates_Opportunity". We do not automatically update the main "Opportunity" Model, because doing so would create a very jarring, annoying user experience --- every 10 seconds or so, data would be updated, potentially interrupting a user as they were making changes, searching, filtering, or paging between records, or interacting with a chart. To minimize user disruption, we created the separate "RecentUpdates_Opportunity" Model, and it is this Model that we check for changes to every 10 seconds.

The polling logic required a few lines of JavaScript which basically just calls setInterval, which is JavaScript's method that causes a function to be run at a regular timer interval, e.g. every 10 seconds. This function does the following: it uses skuid's time API to set the value of a Condition on the RecentUpdates_Opportunity Model to be a Salesforce DateTime representation of "10 seconds ago", and then updates this Model. If the Model returns any rows, then we know that an Opportunity record was either added or modified in the last 10 seconds.

If the RecentUpdates_ model has any rows in it, then we show an informational message in yellow, which you can see in the video. This message lets the user know that there are new / updated records, and gives them a link that they can click which will update the main Opportunity Model, at their convenience.


The code for this page actually supports multiple Models, so if you wanted to check for changes to multiple objects, you could do that as well, and the code will automatically only update Models that actually had updates made to them (rather than updating all Models).

To  use this page's code with different / more models, you'll need to edit BOTH of the 2 JavaScript Resources to change the Model names that the code is looking for. Look for these lines:

(In "poll for updates")

var RECENT_UPDATES_MODELS = [ 'RecentUpdates_Opportunity' ];

(In "newRecordsAlert")

var MODELS_TO_REFRESH = {
    'RecentUpdates_Opportunity' : 'Opportunity'
};
var ALERT_MESSAGE = 'There are new / updated Opportunities.';
var MESSAGE_WHILE_LOADING = 'Loading new / updated records...';

You can change the parts in bold. For the MODELS_TO_REFRESH, the key must be the Recent Update model, and the value must be the Model that you want to refresh. This lets Skuid check the Recent Update model to see if it has any changes, and if it does then it will update the value Model.