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.

Simple page showing it in action.

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

Suggested references

jQuery selectors
Related OTN forum post


5 comments:

APEX Developer In the USA said...

Scott,
Trying this code with a simple report off the emp table does NOT work it seems.. I am trying to set the report total item BOLD and set the color to RED..

Any suggestion?

APEX 5.01 with BOTH theme 26 and 42..

Thank you,

Tony Miller
Los Alamos, NM

Scott Wesley said...

I think you'll find the .text() returned has different case in 5.x, regardless of theme. I've seen other examples in the forums that don't rely on the text content.

Anonymous said...

This page reallyy has all thhe information I needed
about this subject and didn't know who tto ask.

Josep Coves said...

Hi,

At newest APEX versions (at least 5+) it's possible to achive this without jQuery. Under "report -> Attributes -> Break Formatting -> Report Sum Label" you can specify your total label.

Hope it helps!!

Scott Wesley said...

Ahh yes, I have noticed it does render nicer now. These silent trimmings that get added are fun to find.

Anonymous - that's hilarious ;p