ADF 11g RichFaces: implementing a 'pick which columns to show & hide' feature for RichTables

Just over two years ago I wrote an article on this blog – integrating-adf-faces-and-myfaces-tomahawk-creating-a-popup-with-adf-faces-shuttle-component (supported by Changing the order of columns in a JSF Table Component -in the client, at run-time, by the end user and having-the-end-user-hide-and-display-columns-in-a-jsf-table-component) – on how to implement functionality in ADF 10g applications that allowed the end user to bring up a popup window associated with a table. In this window, she can select the columns to display in the table and determine their other. This means for example that you can define a table with 25 columns, specify only five or so to be displayed when the page is first displayed and have the user select a different set of columns to display. In specific situations this can be very useful functionality – and at the very least it looks cool in demos.

The ADF 10g implementation is not extremely straightforward. It entails using the Apache MyFaces popup component and leveraging the ADF Shuttle Component. Some additional wiring with a managed bean is required. Not too hard, but not very elegant either.

I thought to implement this feature with the ADF 11g RichFaces components. I figured with the native popup component it would be a lot simpler to implement and look better as well.

So I got started. And guess what? …  It is takes two lines of code. It’s already there, in the RichFaces components themselves. Where’s the challenge?

Create your table like you normally do – for example by dragging a collection from the Data Control Palette and dropping it as an ADF Table. Or dropping a Table component and binding it to a managed bean.

With that table in place, all you need to do is wrap the table with:

<af:panelCollection>

And you’re done! Here I was sitting, ready for a nice little investigation and experimenting, a little yelling at my computer and finally leaning backwards all satisfied with myself. And then it only takes this! How disappointing… Well, on to something a little more challenging!

Run the page again. You will see a little toolbar appearing at the top of the table:

When you click on the View menu option:

You get a menu where you can select which columns to show in the table.

Using the Reorder Columns option in the View menu, you have an alternative for Column Drag & Drop to reorder the columns that are displayed:

When the changes are made, the table now looks like this:

Note: the settings – which columns are displayed and in which order – are currently retained during the session. With the Fusion Middleware 11g release and the introduction of MDS, these settings can also be stored persistently across sessions for the user.