Real-Time Dashboards

We’re looking for possibilities of real-time dashboards. Skuid now has great charting capabilities when you change data on your page. What about functionality that automatically refreshes a Skuid table and/or visualization component when a user on another machine updates data related to the page’s models? Any ideas other than just refreshing the page on a schedule?

Create a snippet to update the model x seconds if there are no changes pending to the model. Don’t have the code or anything but set the interval, look for model changes if necessary before trying to query, then requery. If you are using models that can’t be edited from the current page, then set interval and query without checking.

If you want to look for changes and only update if there are changes, I’m not sure how this could be achieved. I’m all ears though. I as well would like to know. I’d like to eventually put 20 hours aside to build a Skuid version of Trello.



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.

Zach, I’ve tried to get this to work on my own page, but can’t. Seems like I can get the notification of changes to work, but it never refreshes the table on the page. If I refresh the page, I see the new/changed records, and I seem to get notified when new/changed records should be available, but the table in which they should be rendered never is updated when I click the link to do so.

Peter, can you grant login access in the org this is happening? I could take a look real quick and maybe help sort it out, probably something small.

Thanks Zach - Access granted (00Dd0000000hRff). The page is “LOOPDocs”. (I’m trying some simple ways to automate DrawLoop mass document generation & merging.)

Zach, was anyone on your team able to take a look?

Peter, I took a look at it but couldn’t find anything wrong — when I clicked the link in the message, it updated the Model correctly.

Well, that’s good, but why doesn’t the table on the page change when its model is refreshed? Is there some config setting I’m missing?

Peter, we might need to do a GoToMeeting to debug this further — without being able to create / delete sample data for your page, I’m not sure i’d be able to assist further. Send me / support an email directly for a time that works for you.

Thanks for the help Zach. We got it working. I had used the object name instead of the model name on the “var MODELS_TO_REFRESH = …”  line. This should be “refresh_model_name : display_model_name”.

Is it possible to refresh multiple models for each of the update models? As in one model is updated and is noticed by the Poll for Updates, and the newRecordsAlert snippet calls multiple models to be refreshed?

I’m pretty sure that should be possible by simply adding additional lines to the refresh section of the javascript.  Alternatively you could ad a requery action to  model actions on the first model - so its changes kicked off a sequence.