Real-Time Dashboards

  • 2
  • Question
  • Updated 3 years ago
  • Answered
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?
Photo of Peter Bender

Peter Bender, Champion

  • 6,296 Points 5k badge 2x thumb

Posted 4 years ago

  • 2
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 43,056 Points 20k badge 2x thumb
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.
Photo of Zach McElrath

Zach McElrath, Employee

  • 50,694 Points 50k badge 2x thumb
Official Response


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.
(Edited)
Photo of Peter Bender

Peter Bender, Champion

  • 6,296 Points 5k badge 2x thumb
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.
(Edited)
Photo of Zach McElrath

Zach McElrath, Employee

  • 50,694 Points 50k badge 2x thumb
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.
Photo of Peter Bender

Peter Bender, Champion

  • 6,296 Points 5k badge 2x thumb
Thanks Zach - Access granted (00Dd0000000hRff). The page is "LOOPDocs". (I'm trying some simple ways to automate DrawLoop mass document generation & merging.)
(Edited)
Photo of Peter Bender

Peter Bender, Champion

  • 6,296 Points 5k badge 2x thumb
Zach, was anyone on your team able to take a look?
Photo of Zach McElrath

Zach McElrath, Employee

  • 50,694 Points 50k badge 2x thumb
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.
Photo of Peter Bender

Peter Bender, Champion

  • 6,296 Points 5k badge 2x thumb
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?
Photo of Zach McElrath

Zach McElrath, Employee

  • 50,694 Points 50k badge 2x thumb
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.
Photo of Peter Bender

Peter Bender, Champion

  • 6,296 Points 5k badge 2x thumb
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".
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,978 Points 5k badge 2x thumb
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?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,448 Points 20k badge 2x thumb
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. 
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,448 Points 20k badge 2x thumb
Note.  In Zach's awesome explanation above he references code.  We used to put that code in GitHub. But now its in Bitbucket.  Here is the new link:  https://bitbucket.org/skuid/samplepages/src/b7cd058c66a5523e25bcf3f8d8d736071393df52/pages/RealTimeO...