Interactive Mobile Dashboards in the Salesforce1 App

This is my third and last article in a series dedicated to building dynamic mobile dashboards with D3, ChartJS, and other data visualization libraries on top of the Salesforce platform.

The source code is always the same, but each post focuses on a different deployment option:

  • In the first article, I showed how to deploy the dashboards in a hybrid app using Cordova and the Mobile SDK.
  • In the second article, I demonstrated how to deploy the same dashboards in Visualforce pages.
  • In this third article, I’ll show the same Visualforce pages running in the Salesforce1 App.

Watch the video here:

Responsive Design

As you can see in the video, the dashboard layouts are “responsive”, and adapt to the screen size. In this example, I used the Twitter Bootstrap grid to make the dashboards responsive. The typical markup for a dashboard in this application looks like this:

<div class="row-fluid">
    <div id="chart1" class="chart col-xs-12 col-md-12"></div>
</div>
<div class="row-fluid">
    <div id="chart2" class="chart col-xs-12 col-md-6"></div>
    <div id="chart3" class="chart col-xs-12 col-md-6"></div>
</div>

Deployment Options

One advantage of deploying the dashboards in the Salesforce1 app is that you can easily modify them or add new ones, and your changes take effect immediately: no need to repackage or redeploy the application. If you need complete control over the user experience, a custom app may still be the right choice. The good news is that no matter which deployment option you choose, the code base is the same, and it’s just HTML, JavaScript and CSS.

7 Responses to Interactive Mobile Dashboards in the Salesforce1 App

  1. Nikita March 13, 2014 at 11:42 am #

    Hi Christophe, could you please describe how actually you integrate it into Salesforce1 App?
    Is it just UIWebView in native application or Salesforce1 App is hybrid app by itself?
    Thanks.

  2. rando April 5, 2014 at 11:51 am #

    I have followed your writing since I interest on backbone.js for my app. But now I still learn how to use D3. I see on your video you showing responsive donut chart use chart js, right? but how you could make legend text? do you combine it with D3?

  3. Eddie June 20, 2014 at 4:36 am #

    Hi Christophe, I’d also like to know how you integrate it with the Salesforce 1 App and if you have the source code too, thanks again.

  4. stefan June 29, 2014 at 9:59 am #

    Hi, my svg is not working after downloaded your sample code. any one else having such issue?

  5. Bilal Öztürk July 13, 2014 at 9:01 am #

    Bu oyunumuzda sizin bir bebeğiniz var. Ama bu bebeğinizi süsleyerek bir Bebek Bratz yapacaksınız. Oyuna “Play” butonuna tıklayarak başlayacaksınız. Sol ve sağ taraflarda takı, göz rengi, ten rengi vb. eşyalar var. Bu eşyaların bazılarını farenizle tutup bebeğin üzerine sürükleyeceksiniz. Bazılarının üzerine sadece tıklayacaksınız. Bebeğimizi Bratz yaptıktan sonra “Finish” butonuna tıklayacaksınız ve oyunu bitireceksiniz. İyi oyunlar. Daha fazla ameliyat oyunları için bağlanmanız gereken adres şu şekilde olacaktır. http://ameliyatoyunlari.us/ Tıklayarak ulaşmanız mümkündür.

  6. Matt August 5, 2014 at 3:39 am #

    Hi Christophe,

    Great article (and website)!!! Any chance you can provide a step-by-step guide for the Salesforce1 integration. I’m having a few issues getting it up and running.

    Cheers,

    Matt.

Trackbacks/Pingbacks

  1. A Beginner's Guide to Salesforce1 - Developer Relations - July 2, 2014

    […] Interactive mobile dashboards: This blog covers how to build a page with interactive mobile dashboards using D3.js and the Salesforce Analytics API. It covers the specific use case of making the page accessible from within Salesforce1. […]

Leave a Reply

css.php