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).
Pingback: Building Interactive Dashboards in Visualforce Pages | Christophe Coenraets | Tnimish's Blog()
Pingback: Building Interactive Dashboards in Visualforce Pages | Christophe Coenraets |()
Pingback: The Quantified Self and Humanities Best Friend. | CodeFriar.com()