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.

  • Nikita

    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.

  • 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?

  • Eddie

    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.

  • stefan

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

  • Pingback: A Beginner's Guide to Salesforce1 - Developer Relations()

  • 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.

  • Matt

    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.

  • my Android app is making me annoy emm switching to it .

  • kalite,fiyat uygunlugu ve imalattan.rofesyonek ekip eşliğinden güvenilir işler yapılmaktadır.  His highest production of our company, we use the sport socks products: cotton, cotton, polyester, nylon and lycra. It includes anti-bacterial.

  • thank you

  • I really like what you guys tend to be up too. Such clever work and coverage!
    Keep up the amazing works guys I’ve incorporated you guys
    to our blogroll.

css.php