Building Interactive Dashboards in Visualforce Pages

By Christophe Coenraets on February 26, 2014 in D3, Data Visualization, Salesforce, Visualforce

In my previous post, I shared a sample application showing how to build interactive Mobile Dashboards for the Salesforce platform using the Force.com Mobile SDK, D3, ChartJS, and other data visualization libraries.

As I mentioned in that post, the same application could be deployed in a Visualforce page hosted in your Salesforce environment.

Here is a short video showing the app running in a Visualforce page, first with the Salesforce chrome (header, sidebar, etc), and then “full screen” without the Salesforce chrome. This last version could be the one users access in a browser on their tablet.

Source Code

I shared the source code for the sample application in my previous post:

The ChartJS version is available in this GitHub repository.
The D3 version is available in this GitHub repository.

The objective of this experiment was to deliver a highly interactive experience. There are no page refreshes or even partial page refreshes. Instead of being regenerated, the charting components are updated “live” when their data source changes, allowing for nice and meaningful transitions and animations. There is very little code in the Visualforce page: the bulk of the application is written in JavaScript. The application accesses the data using the REST APIs through ForceTK.

Here is code for the Visualforce page:

<apex:page docType="html-5.0" standardStylesheets="false" showHeader="true" sidebar="false">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
    <link href="{!URLFOR($Resource.dashboard_embedded, 'bootstrap/css/bootstrap-responsive.min.css')}" rel="stylesheet" />
    <link href="{!URLFOR($Resource.dashboard_embedded, 'css/app.css')}" rel="stylesheet" />
</head>
<body>

<script src="{!URLFOR($Resource.dashboard_embedded, 'lib/jquery.js')}"></script>
<script src="{!URLFOR($Resource.dashboard_embedded, 'lib/forcetk.js')}"></script>
<script src="{!URLFOR($Resource.dashboard_embedded, 'js/app.js')}"></script>

<script>
    var client = new forcetk.Client();
    client.setSessionToken('{!$Api.Session_ID}');
    app.init(client);
</script>

</body>
</apex:page>

Summary

Depending on your requirements and your target audience, you can deploy the same application as a traditional mobile app that users would install through app stores (previous post), or inside the Salesforce environment as a Visualforce page (this post). You can also deploy the same dashboards in the Salesforce1 application (a future post).

Building Interactive Mobile Dashboards for the Salesforce Platform

Employee Directory Sample Application with Ratchet 2.0

12 Responses to Building Interactive Dashboards in Visualforce Pages

Lina March 4, 2014 at 4:20 am #

I am getting an error like this:

ReferenceError: app is not defined
app.init();

Please help

Reply
- Oleksiy April 11, 2014 at 3:16 pm #
  
  Christophe,
  
  I echo Lina – can we get the modified app.js (or dashboard_embedded resource content) you used for visualforce demo? I tried to modify the code to make it working in my org with no luck :(
  
  Thank you in advance.
  
  Reply
  - Cissou June 5, 2014 at 4:26 am #
    
    Lina/Oleksiy,
    did you eventually get to make the code work? I’m hitting the same issue (app is not defined), and could not find a way to solve it.
    Thanks!
    
    Reply
    - Oleksiy June 10, 2014 at 8:02 pm #
      
      Nope…
      
      I met Christophe at the Salesforce1 World Tour: Chicago and asked about this error – he confirmed that different code was used and said that will update the post, but he hasn’t obviously.
      
      Let’s hope that Christophe would be able to find a few minutes and will make some folks more happier ;)
      
      Reply
      - Ricardo July 25, 2014 at 12:35 pm #
        
        hi
        
        i have the same problem, any of you could make it work
        
        accounting is not defined app.js:7
        app is not defined
daniel March 5, 2014 at 7:11 am #

Hi,
really nice post!!

Which of the ionic templates are you using in youre previous post??
Thanks a lot

Kind regards
daniel

Reply
Caleb March 12, 2014 at 7:06 pm #

Hi Christophe,

Do you know if what you have done with these interactive dashboards can be done with reports as well. We are looking to use visualforce to display reports built and maintained by our employees to be exposed to a Customer Community that does not have reporting enabled.

Let me know if you think it can be done, I would love to chat about it.

Reply
Prashant Saxena April 23, 2014 at 6:50 am #

Hi Chris,

I have used your vf page in my dashboard(excluding static resources), just the simple page with all the page attributes you have mentioned.But unfortunately it does not show up in a Salesforce 1 app.
It gives the error “Visualforce components aren’t available.”Any idea why I have getting this error.
Any help will be greatly appreciated.Thanks in Advance.

Thanks
Prashant Saxena

Reply
sbobet June 2, 2014 at 12:34 pm #

Pretty nice post. I just stumbled upon your blog and wished
to say that I have really enjoyed surfing around your blog posts.
After all I’ll be subscribing to your rss feed and I hope you write again very soon!

Reply
does beer go bad these July 29, 2014 at 3:10 pm #

When these are kept in these bins they’re gonna final for months as well
as lengthier and continue to become as fresh since day you purchased them.
Be sure the gear you adopt along is strictly what you’ll need.

Whenever you raise your very own you could possibly make
sure to use a very good number of the particular worms when they’re still white and in addition tender.
Again as before, take into consideration your situation and plan to the worst.
does beer go bad these

Reply