APEX 18.2 and Interactive grid detail view sorting

APEX 18.2 and IG Detail view

 

IG Detail view does not have a sort by feature

 

Workaround?

This post is about how you can cheat your interactive grid detail view and still impose ordering of your elements. 

First of all I will assume you know what detail view of IG is and how to get it working. 

If not please refer to my previous post or download IG cookbook app by John Snyders as there is a great example of detailed view implementation in there. To be precise I am talking about page 20.

In my example I have done the same created IG, defined it to show Detail view and slightly simplified how my 'cards' are structured.

Okay if I now run my page this is what I get

As you can see my elements are in random order. Unfortunately there is no out of the box way to get this sorted. 

How do we get this sorted?

Answer is of course using JavaScript. 

So my initial idea was to add row_number() over( order by empno desc ) row_nbr,

to my query so I can utilized this later using JavaScript. But I encountered a problem described more in my previous post where aggregate column causes IG save process to break. 

You may be lucky enough that your IG does not have to save the data so you may even use this approach. As alternative you can simply rely on your ID column or even on a date column. This should all give you a solid grounds for ordering your elements. 

In my case I had to use date based approach. So I added to_char(created_date, 'YYYYMMDDD') as sort_by 

 

to my query. Next step is to update an HTML used in detail view to include this column.

You probably already see where the story is going. To make sure all is rendered well inspect your page

Which shows that we successfully added new data-* tag to our HTML.

If you add this to your Function and Global JS page functions
$("#p40-monthly-update").on("tablemodelviewpagechange", function (event, data) {
    var numericallyOrderedDivs = $("div.my-IG-details").sort(function (a, b) {
        return $(b).attr("data-sort-id") - $(a).attr("data-sort-id");
        });
   
        $("#p40-monthly-update .my-sort-container").html(numericallyOrderedDivs);
}); 

This will do the magic of sorting for you. #p40-monthly-update is my IG region ID.

What it does is it gets an array of elements based on a div tags we created and sorts the array before passing it back to DOM. Simple but still helpful. ;)

I am sure there are other ways how to achieve the same but most will use similar approaches until we do not get this configurable out of the box in IG. Maybe 19.1 version will address some of these issues so keep an eye out.

Happy APEXing,
Lino