Change Sort Icon in APEX 5 classic report

Question

How can I change the heading sort icon in a APEX 5 classic report?

The customer just wants to have his own sort icons for desc and for asc. He does not like the new APEX sort icons.

ORACLE says:

Desupported Report Heading Sort Icons The following attributes used to define the report heading sort icons have been de-supported for interactive reports and classic reports: Ascending Image, Descending Image, Asc Image Attributes, and Desc Image Attributes. Instead of referencing images directly, Oracle Application Express now uses CSS to render sort icons. For interactive reports uses the following classes: .a-Icon.icon-irr-sort-asc and .a-Icon.icon-irr-sort-desc For classic reports use the following classes: .a-Icon.icon-rpt-sort-asc and .a-Icon.icon-rpt-sort-desc

I have no clear idea how that task can be made. I just know that APEX now uses CSS to render sort icons (a-Icon.icon-rpt-sort-asc and .a-Icon.icon-rpt-sort-desc).

It could be "Static Application Files" > #APP_IMAGES#sort_asc.png / #APP_IMAGES#sort_desc.png.

I am new with APEX, my colleagues say changing a sort icon in classic report was an easy task in APEX 4.2 but this easy way is no longer available in APEX 5.

Does someone has a piece of code and some hints?

Dmitriy Dmitriy · Accepted Answer · 2016-01-26T09:04:47

You need to define your own CSS classes .icon-rpt-sort-asc and .icon-rpt-sort-desc. They have to look like this:

span.icon-rpt-sort-asc {
    background-image: url("/i/custom_asc_sort_image.png");
}
span.icon-rpt-sort-desc {
    background-image: url("/i/custom_desc_sort_image.png");
}

Here you set names of images, which will be shown in a report column header. After that you need to use this CSS. Here you have two ways to do this:

Open page properties, go to CSS tab, place CSS code there. This isn't a good way, because you have to add this code to every page, where you need custom images.
Recommended way - create a css file with code above, put it in /i/ folder, and change page template (Shared Components->User Interface->Templates-> desired page template -> Definition tab). In Header section add a <link> tag:
```
<head>
  ...
  #PAGE_CSS#  
  #FAVICONS#
  #HEAD#
    <link rel="stylesheet" href="#APP_IMAGES#mycss.css" type="text/css"></link>
  ...
</head>
```

where mycss.css - name of your CSS file. And, of course, you have to put your custom sorting icons to apex images folder.

Change Sort Icon in APEX 5 classic report

1 Answers