Thursday, August 6, 2020

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"></span></button>

  <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"></span></button>
</div>

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


Share:

0 comentarios:

Post a Comment

Subscribe to my Newsletter

Acerca de mi:

img

Ing. Angel O. Flores Torres, soy Ingeniero de Sistemas e Ingeniero de Aplicaciones Oracle Apex, he trabajado con Oracle Apex 5 y 5.1 desde el 2017, En los ultimos años he desarrollado habilidades en CSS, JavaScript, Jquery y PlSql , I specialize in Oracle APEX (Oracle Application Express )

Followers

Popular Posts