Adjusting Interactive Reports - learning from mistakes

Sometimes I come across code where it's obvious someone has taught themselves APEX, then worked through a problem to come up with a solution - but they went a long way.

Today's situation required data in an interactive report to not wrap the output. I thought it'd be worth sharing because a few lessons might be demonstrated along the way for newer developers.

Here is the long way:

1) Add this to the Page Load property
$('td').attr("style","white-space:nowrap");
This will work to a point, until the user start filtering the IR. And it affects all td page elements, not just those in the report.

So now the developer (name withheld to protect the innocent) does the following:
2) Create a hidden item P1_IR_ID

3) Create on new instance computation to fetch the allocated report ID

SELECT interactive_report_id
FROM apex_application_page_ir
WHERE application_id = :APP_ID
AND   page_id        = :APP_PAGE_ID

The computation point will rarely fire because this is executed typically upon landing on the login page - at least the first APEX page visited before logon.

4) Create a dynamic action to reapply the original jQuery.
Event: After refresh
Selection type: DOM Object
DOM Object: &P1_IR_ID.

With a JavaScript action has per the page load. The dynamic action scope was Dynamic to ensure it was reapplied after any partial page refresh (PPR), but I think this would be superfluous to an "after refesh" event.

I admire the ingenuity here to identifying the report. This would have been easier solved with a static region ID being allocated to the region, eg: p1_report, then using jQuery selector #p1_report.

Here's the easy way.

Define the following CSS, either inline or within your supporting .css file.

.ir_nowrap td {
  white-space:nowrap
}

Add "ir_no_wrap" to the region's CSS classes.

Done.

However, my theme 25 IR template did require an additional adjustment, because I found the original template had two class attributes, and the second one was ignored and my class wasn't being used.

I changed the first line from this"
<section class="uIRRegion" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES# class="#REGION_CSS_CLASSES#">
to this:
<section class="uIRRegion #REGION_CSS_CLASSES#" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>

If you like this sort of example to learn from, then I bet you'll enjoy Peter's (coming) APEX Worst Practices presentation.