Category: ApEx

We recently upgraded our Oracle ApEx installation to 4.1. No major issues but a significant annoyance is that when you click on a sortable column on a classic report, the sort image (up and down arrow/pointers) are reversed. It appears that the problem is currently not patched by Oracle, but fortunately, there’s a workaround which works quite nicely and I’ve provided step by step instructions here with screen shots.

There are three main steps to apply the workaround. First step is to add a JavaScript to your page template.

Step 1. Add JavaScript

• Login to Application Express

• Click on “Application Builder”
• Click on the application you want to modify
• Click on “Shared Components”
• Under “User Interface”, click on “Templates”
• In the list of templates, scroll down to “Page” and edit the default template (indicated by a tick)

• Paste the following javascript in the Header definition just before the closing head tag (</head>):

<script type="text/javascript">
<!--
function correctStdReportSortImage(pThis){
var $img = pThis instanceof jQuery ? pThis : $(pThis);

//Only run the code if the image actually exists.
//Since this code will be listening to the entire document’s refresh events it could get other events (such as IR)
if ($img.length > 0) {
//If the href has ‘desc’ in it then make sure the image is ascending as the presence of “desc” means column is sorted asc
$img.attr(‘src’, $img.parent().children(‘a’).attr(‘href’).indexOf(‘desc’) > 0 ? $img.attr(‘src’).replace(‘down’, ‘up’) : $img.attr(‘src’).replace(‘up’, ‘down’));
}
}//correctStdReportSortImage
//–>
</script>

• Apply changes then click on “Application Builder”

Step 2. Add First Dynamic Action on Page 0

• Click on the application you want to modify
• Click on page 0 to edit it. If you haven’t created page zero, you need to create one. Instructions on how to create page 0 can be viewed here.

• Under “Dynamic Actions” click on the icon to add a new action

• Click on “Advanced”

• Type in a name (anything will do, for this example I typed in “Page Sort Image Fix Page Load”) then click on the “Next >” button

• Under “Event” select “Page Load”, leave condition as is then click on the “Next >” button

• Under “Action” select “Execute JavaScript Code” then paste the following JavaScript into “Code”:

$(this.affectedElements).each(function(){
correctStdReportSortImage(this);
});

• Click Next
• Under “Selection Type” select “jQuery Selector” then paste the following text under “jQuery Selector”:

.rpt-sort img

• Click on the “Create” button

Step 3. Add Second Dynamic Action on Page 0

• Under “Dynamic Actions” click on the icon to add a new action
• Click on “Advanced”
• Type in a name (anything will do, for this example I typed in “Page Sort Image Fix After Refresh”) then click on the “Next >” button

• Under “Event” select “After Refresh”
• Under “Selection Type” select “DOM Object”
• Under “DOM Object” enter the following text:

document

• Leave condition as is then click on the “Next >” button
• Under “Action” select “Execute JavaScript Code” then paste the following JavaScript into “Code”:

correctStdReportSortImage($(this.browserEvent.target).find('.rpt-sort img'));

• Click Next
• Leave “Selection Type” as is then click on the “Create” button

That’s it. Good luck.