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.
In the next post, I’ll show how to leverage Visualforce remoting to add some dynamic features to a DataTable.
Custom settings are an awesome tool for the Force.com developer. They allow you to control code, formulas, workflow rules and more on the platform. The problem is that they are a little hard to update since they don’t come with a tab, page layouts or other features of a full fledged object.
In order to manage a custom setting through the interface Salesforce provides, you must grant the user “Customize Application” permission. Now, this permission shouldn’t be handed out to just anyone. It allows users to edit layouts, object, fields and more. In some cases, you may want to let your users edit a custom setting, but don’t want them to get the other power of Customize Application.
I then started examining my debug logs and realized my save code wasn’t even executing. The error was happening somewhere upstream of the save method. This got me thinking about Visualforce and object binding. Sure enough, the problem was because I had bound my VF page directly to an instance of the custom setting. The VF page was allowing my user to view the setting, but when I did any method, including a cancel, it blocked it. It wasn’t letting me get to my code. I created a proxy class that mirrored my custom object and bound my VF page to it instead. Lo and behold my limited user was now able to save the custom setting.
Here’s my VF page which works with both controllers. Followed by the code that only works if the user has Customize Application permissions and then the code that works for everyone.
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.