Group Headings in an Interactive Report (APEX)

Did you ever wanted a group heading above your column headings in an Interactive Report in APEX? I wondered why that wasn't already included in APEX, as all components are there to get it to work. Let's create a little example to show what I mean.

Create an Interactive Report on the emp table (for ex. select * from emp).

In your Interactive Report details there's a section Column Groups where you can define groups.
But it also says: "Column Groups are used to group columns together on the single row view."
In my example I created two groups.


Next we need to edit the group to say which columns belong to which group.
In my example I specified that the columns Empno and Ename belong to Group 1. I specified some other columns for my Group 2.


If you run the page you'll see this IR (without group headings)


But when you select the single row view (the Edit icon in front of the row) you'll see this:


So you can see the groups nicely in the single row view but it's not there in the normal report...

So I thought, as APEX is completely dictionary driven, we should be able to find all the pieces and with some javascript we should be able to change the DOM element to include the group headings in the normal report too. The result:

You can see this example live here, the source code is also there, so you can see how I did things.

On the page I open the "Select Columns" automatically, so you can see the available columns and the groups in () and you can dynamically play with showing and hiding columns.

In short the way it works:
1) Query the APEX dictionary to see which columns and groups there are defined and return a string that can be parsed into a json object.
2) Create a javascript function to add the group headings above the column headers. I put some notes in the javascript and added a lot of console.log's. If you remove the // you'll see in Firebug a full trace what is happening.
3) To attach it to the Interactive Report and call it from your page you need to do some more. At OOW I had a chat with Carl about it, at the moment you can't call your own function at the end when the interactive report is called (but he was going to change that in future releases). Carl told me I was forced to put a little timeout there to make sure the Interactive Report was drawn before my javascript ran.

Feel free to try it in your own environment and give some feedback. The code is generic so you should be able to plug it into your environment without that much effort. I didn't use jquery as I wanted a generic solution for a "normal" APEX environment. Another thing I didn't do is looking if you defined a link (edit icon) before the row or not. So these might be enhancements for the next release...