Ordenamiento en reportes Oracle APEX (secuencias)

En determinada ocasión tenemos la necesidad de mostrar los registros al usuario dando prioridad al orden de los elementos listados en un reporte. Para ello podría indicar que hay dos formas no comunes de ordenar, una es usando drag y drop para lo cual les recomiendo el blog de Jorge y la otra seria agregando unos botones de subir o bajar, que es le método que les enseñare a continuación.

Demo en YouTube
Primero creamos un reporte clásico. en mi caso he usado la tabla DEPT para la demo.
Asi mismo he agregado una nueva columna para guardar el orden de los registros.
Lo ordenaremos por nuestra nueva columna,  order by order_dept
Agregaremos dos botones con HTML para mover arriba y abajo.
A este código he agregado el data-id para obtener el ID del registro, clase \”arrow_container \” para identificar donde esta mi ID, y en los botones un data-move_dir para saber la dirección , y una clase \”move_row\” para saber cuando se hace click al botón.

<div data-id=\"#DEPTNO#\" class=\"arrow_container\" >
<button type=\"button\" data-move_dir=\"UP\" title=\"Up\" aria-label=\"Up\" class=\"move_row t-Button t-Button--noLabel t-Button--icon t-Button--hot t-Button--small t-Button--noUI\">
<span aria-hidden=\"true\" class=\"t-Icon fa fa-chevron-up\">

<button type=\"button\" data-move_dir=\"DOWN\" title=\"Down\" aria-label=\"Down\" class=\"move_row t-Button t-Button--noLabel t-Button--icon t-Button--hot t-Button--small t-Button--noUI\">
<span aria-hidden=\"true\" class=\"t-Icon fa fa-chevron-down\">

Luego crearemos una acción dinámica para escuchar el click de los botones y pasaremos el elemento.

move_row(this.triggeringElement);
Mi función la he agregado a nivel de página para tener un mejor orden.

function move_row(element){
// direcction = up or down
var direction = element.dataset.move_dir;
var row = $(element).parents(\"tr:first\");
if (direction == \"UP\" ) {
row.insertBefore(row.prev());
} else {
// down
row.insertAfter(row.next());
}
save_order();
}
La función save_order es la que me permitirá actualizar los registros en la base de datos a través de un llamada AJAX. la agregare también a nivel de la página.

function save_order(){

var rowsOrder = $(\"#department_report\").find(\".t-Report-report tbody tr .arrow_container\")
var questionnaireOrder = Array.from(rowsOrder, x => $(x).data(\'id\') );
console.log(questionnaireOrder);

apex.server.process(\"UPDATE_ORDER\",
{
f01: questionnaireOrder
},
{ success: function(pData){
apex.event.trigger( \"#department_report\", \"apexrefresh\" );
},
error: function(e) {
console.log(e);
}
}
);

}
He creado un proceso AJAX callback y allí tengo lo siguiente.
declare
l_order number;
begin

for i in 1..apex_application.g_f01.count loop

l_order := i * 10;

update dept
set order_dept = l_order
where deptno = to_number(apex_application.g_f01(i))
and nvl(order_dept,0) != l_order;

end loop;

apex_json.open_object;
apex_json.write(\'success\',true);
apex_json.close_object;

exception
when others then
apex_json.open_object;
apex_json.write(\'success\',false);
apex_json.write(\'error_msg\',sqlerrm);
apex_json.close_object;
end;
Y finalmente el resultado
Nota, para los botones he usado el button builder de apex.oracle/ut

Published by Angel O. Flores Torres

System engineer, Applications engineer, working with C# and Oracle Apex 5, 5.1 since 2017. I specialize in Oracle APEX (Oracle Application Express )

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: