Wednesday, 16 October 2013

Customise Totals row in APEX classic report

This post covers one way of customising the declarative sum totals on classic APEX reports.

Classic Report sum totals

The default output isn't that flash looking, and no doubt many would prefer at least a different label. Unfortunately I haven't found a method within APEX, so I applied some jQuery.

If you're not aware, these are turned on using the checkbox in the 'Sum' column on the relevant region's 'Report Attributes'.

Classic Report Attributes

So to customise the label, first we should add a Static ID on the region attributes. This will be used to help identify the report.

Static Region ID

Then we can use Chrome's 'Inspect Element' option upon right-clicking the label. Using this we can identify more of the jQuery selector we'll need to identify this cell.

Using the browser to identify DOM components

Now I'd still consider myself beginner/intermediate when it comes to jQuery. I know how to adopt code well, but I'm not yet familiar with the full suite. So if any of you have suggestions on how to improve this bit of code, especially from a performance perspective - I'd be happy to hear them. I've resigned myself to never being an elegant OO programmer, but fire away if I've also made this ugly.

jQuery code running as part of page render

$('#emp td.data').each(function(){
     if ($(this).text() == 'report total:') {
        $(this).text('Total Salary');
        $(this).css({'font-weight':'bold', 'color':'red'});
     }
});
This code identifies the cell using the selector specified within the $(''). This is the #emp ID we added to the region, and any cell within that report. For each cell it will check the contents to match the default label, then modify that cell as desired.

The final product
So add CSS to your heart's content. I'd be happy to hear people's ideas on how to add snaz.

Extra challenge : find a way to extend the selection to locate the cells with numeric totals.

Suggested references

jQuery selectors
Related OTN forum post


Post a Comment