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).
I am getting an error like this:
ReferenceError: app is not defined
app.init();
Please help
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.
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!
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 ;)
hi
i have the same problem, any of you could make it work
accounting is not defined app.js:7
app is not defined
Hi,
really nice post!!
Which of the ionic templates are you using in youre previous post??
Thanks a lot
Kind regards
daniel
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.
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
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!