Making a Classic Report Sortable
Requirement
Allow users to drag rows around, have code which updates the database in the background.
There is an excellent series of 4 videos by Jorge Rimblas on this. It is really worth watching this because Jorge doesn't get everything right first time, and you can watch him debugging via the console and showing you what he is seeing while he inspects what the page is doing.
See acknowledgements for links.
I went on the whole journey with him, learning how to manipulate the report to look like a list.
But you can do this with a simple out of the box classic report. The method is different because you have a table of anchors, rather than a list. Watch the second half of the last (4th) video, where he explains what you need to do. Again, he struggles a bit to get it working which is really good because he shows you how to debug. You will definitely need to know how to debug and tweak the code if you are using a different theme from him.
The basics:
1. Create a template and associate with your classic report. Note: This is the template on the attributes of your classic report.
Note the name of the class, it is used in the function further down.
2. A dynamic action on refresh of your region (executing on page load as well), fires this Java code.
var el = this.affectedElements[0];
$(el).find("ul").sortable({
items: 'li'
, containment: el
, update: function(event,ui) { updateDisplaySeq(el); }
});
Your report is now sortable, but isn't doing anything to the data.
3. Create function "updateDisplaySeq" ,defined under page Javascript declarations, thus:
function updateDisplaySeq(pRegionID) {
var results = $("ul.appFavourites").sortable('toArray',{attribute:'data-id'});
apex.server.process ( "UPDATE_ORDER",
{f01:results},
{
success: function( pData )
{
apex.message.showPageSuccess("New order saved.");
//apex.event.trigger('#favouritesRegion', 'apexrefresh');
}
}
);
}
Note: For some reason his instructions didn't work for my version of 18 out of the box. Even though I could drag the rows around, and the update was being done in the background, the order was skip back to what it was before. I commented out a line of his code and it worked..
As you can see, it's looking for an Ajax process call UPDATE_ORDER.
4. Create an Ajax Process with the below code.
declare
s number;
begin
for i in 1..apex_application.g_f01.count loop
s := i * 10;
update table_name
set seq = s
where id = to_number(apex_application.g_f01(i))
and seq != s;
end loop;
htp.prn('{"result":"OK"}');
exception
when OTHERS then
htp.prn('{"result":"ERROR"}');
end;
Comments
Post a Comment