Category Archives: Visualforce

DataTables in Visualforce, part 1

I’ve been doing a lot of work with jQuery DataTables. They can add a nice custom interface for your Salesforce data with very little coding. I’m going to devote the next few posts on ways to use DataTables in your Visualforce pages. In this first post, we’ll make it pretty simple using a standard html table created using an <apex:repeat> tag and then using jQuery to make the table into a DataTable with zero configuration. Then we’ll do a couple of extra things to make our table a little more functional.

First, we need a controller that gives us the data we need. Our example will be listing contacts in Salesforce.

Now, here is a Visualforce page that turns that ugly table into a nice looking DataTable with sorting and filtering, plus some styling. Pretty easy, right?

Alright, let’s get a little fancy. We want to have a drop down listing all the accounts so we can filter by account name. We also want to default the order of the rows by contact last name. To do the sorting, we specify order with an array. The columns are zero-based, so last name which is the 3rd column will be index 2.

To add the drop down, we use jQuery to get the unique values from the first column, sort them and then append them to a select component on the page. We also add a handler to the select component to filter when the value changes. If “All” is selected, then it clears the filter.

And here’s what it looks like.datatables1

In the next post, I’ll show how to leverage Visualforce remoting to add some dynamic features to a DataTable.


Visualforce Dispatcher Page

Sometimes, you might have a requirement that can’t be met using standard page layouts and you need to turn to Visualforce. But, maybe only a subset of the records need to use a Visualforce page and you’d prefer the others to stay using standard page layouts. The solution here is to use a Visualforce dispatcher page that redirects the user to the correct page depending on the criteria you set. There are several good posts about using a dispatcher page to redirect the user to different pages depending on specific criteria, including a classic from Jeff Douglas.

I haven’t seen a post that covers how to handle passing parameters from one page to the next. For example, if you are creating a child record from a related list, the new page prefills in the parent record values through the use of URL parameters. If you have a dispatcher page redirecting users, then the parameters can get dropped and your users don’t have as smooth of an entry process. Here’s a way to redirect and keep all the parameters.  I ran into a few oddities when implementing this. Hopefully the code below helps.

Chatter Mobile and Visualforce

Salesforce’s mobile offering keeps getting stronger with the run up to Dreamforce. Last night the latest version of Chatter Mobile for iOS hit the app store and it sounds like the Android one is hot on its heels. It is chock full of features, but the one that caught my eye immediately was that we can now include Visualforce in the app.

First, we need a Visualforce page that is already mobile-ready. Fortunately, I already had some in my demo org thanks to Reid Carlberg’s Javascript Playground. Install the unmanaged package into a dev org and you’ll see it includes several VF pages that work well in mobile browsers. The one I’m going to use is the page called LABJS_JQueryMobile130_Hello.

After we have a page, we need to tell Salesforce that the page itself is mobile ready. That is easy to do by navigating to Develop>Pages, editing the page and checking the box “Available for Salesforce mobile apps”

mobile enabling a VF page

Now, we get to the good stuff. Under Administer>Mobile Administration, you’ll find a new option called Mobile Navigation. This lets us rearrange “stage left” in the Chatter Mobile app. We can add and remove standard components and also add our mobile enabled Visualforce tabs here.

mobile navigation


With everything in place, you should be able to open Chatter Mobile, see your tab in the stage left menu and select it:

stageleft  vftab

And that’s all there is to getting Visualforce pages in Chatter Mobile. Have fun hacking!

Update: In my original post, I had stated that you also need to mark the tab as mobile ready. That isn’t needed so the post has been updated.