Wednesday, October 31, 2012

Invincible 'Dashboard' using Visualforce

One of our clients wanted to build a 'dashboard' to display in their lobby, to show some key metrics about how the business was doing for all employees to see without having to go run reports.  Here are the requirements:
  • Update at least every 10 minutes
  • Secure from the outside world (so competitors can't find and watch it)
  • Don't need to babysit it
  • Work across multiple sites
  • Have custom branding
We decided to build it as a custom Visualforce page and put it in a public facing site. We then limited the access setting for the sites profile to only allow certain IP ranges that the client owned.  

The Visualforce nature lets us easily grab the information direct from their database and build it with custom branding.  Building into a public site takes out all the headache and security issue that go along with authentication, and makes it so that the unattended PC it is running on is not a security issue.  We can keep out people that shouldn't be looking at it by restricting the IP range to the sites that are going to use it. Finally, it is pretty easy to update it as often as needed by using an <apex:actionPoller />.

This let us fulfill all the requirements except for the babysitting requirementIf the computer lost internet for a few minutes, or if the Salesforce servers went down for maintenance overnight, the page would throw an error, and the actionPoller would stop runnng. Then someone would have to find the computer and hit 'refresh' to get it to start up again. 

To get around this, we built a second Visualforce page and used it to wrap the page with the actionPoller on it.  We then just use javascript to refresh the frame that the real page lives in.  The result is a page that is virtually indestructible.  Because the full page is not re-rendering, it will self-heal, even if the wrapped page goes down or the internet gets disconnected for a bit.
<apex:page showHeader="false" sidebar="false" cache="false">
<script>
     setInterval ( "refreshFrame()", 600000 );// Self-heal every 10 min

     function refreshFrame ( )
     {
          // (refresh the dashboard)
          window.DashboardFrame.location = "/apex/DigitalDashboard";
     }

</script>
<iframe src="/apex/DigitalDashboard" name="DashboardFrame" id="DashboardFrame" scrolling="no" height="768" width="1024"/>
</apex:page>
To summarize, here are the steps to build your own 'dashboard':
  • Build a Visualforce page that displays whatever data you want. 
  • Build the wrapper page above, replacing 'DigitalDashboard' with the page name you just built
  • Create a Site, and add both pages to the site
  • In your site, modify the 'Public Access Settings' and add the IP ranges that you want to view the site.  If you want it totally public, just skip this step.
  • On the computer you want to show the dashboard on, browse to the site URL, and hit F11 to put it in fullscreen.  
  • Walk away!  The dashboard should run forever.

Considerations:

  • I realize it seems odd to wrap a refreshing page in another page that also refreshes.  The key difference is that one uses an AJAX actionPoller, which does not 'flicker' when re-loading, and the other uses a frame refresh, which might flicker when re-loading.  If you don't mind flickering, you don't need to use an actionPoller at all. 
  • A Salesforce Site has limited bandwidth.  It is easy to check by just going to the Site details in Setup; limits and usage are listed at the bottom of the page.  If this page is going to run 24/7, which is the point, you should turn the refresh rate down to make sure you don't blow over the limits.