Using Dojo in SalesForce
Posted By: Alex.Cottner on December 5th, 2012 in General
No Gravatar

Today we’re going to look at using Dojo, our beloved JavaScript framework, inside of a VisualForce page. We needed to do this for a customer recently to display a lot of data (several hundred fields) on a single page that could be easily navigated without a lot of postbacks. After a little playing with proof of concepts I settled on using Dojo inside a VisualForce page to get the job done. I have worked with Dojo quite a bit over the last year, however I had only built a couple small VisualForce pages. I was quite pleased to find out that SalesForce lives up to their promise with VisualForce.

Working with Dojo inside of VisualForce is just like working with Dojo inside of any web application. First, add your CSS class and dojo libraries.


<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dijit/themes/claro/claro.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js" djConfig="parseOnLoad: true" />

Next we need to define what Dojo libraries we need, and at this point I figured I would give myself some visual confirmation that Dojo was loading from google’s CDN.

<script type="text/javascript">
    require(["dojo/ready", "dijit/layout/TabContainer", "dijit/layout/ContentPane"], function(ready) {
        ready(function() {
            alert('dojo loaded!');
        });
    });
</script>

At this point, I was quite pleased with how things had progressed. Now all we needed to do is define a tab control and make sure everything looked okay.
<div class="claro" data-dojo-type="dijit/layout/TabContainer" id="tabContainer" persist="true" tabPosition="top" style="height: 400px;">
    <div data-dojo-type="dijit/layout/ContentPane" id="tab1" title="First Tab">
    ...apex controls...
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" id="tab2" title="Second Tab">
    ...more apex controls...
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" id="tab3" title="Third Tab">
    ...and some more apex controls...
    </div></div>

After overriding a few things in the claro css, we had a good looking and very responsive tab control in a Visual Force page that users were going to love. At least they’ll love this in comparison to their current page, which is about 50,000 pixels tall. Now all we need to do is get the fields added.

*Note: I am aware of the tab control provided by SalesForce, however it would not work for our particular application. This example is more about the ability to include any dojo object inside of a VisualForce page, and less about my exact application.


Leave a Reply