Saturday, June 30, 2018

APEX_ITEM Parte 2 Guardando Check Boxes con Ajax y manteniendo el valor en paginación + Oracle Apex + Jquery

Buen dia , continuando con el manejo de apex_items, hoy veremos como guardar el valor de un checkbox sin necesidad de hacer submit a la pagina y manteniendo el valor si  usamos la paginacion en un reporte.



En mi anterior tutorial veiamos  el manejo simple de un checkbox

Para este fin vamos a usar:

  • Colecciones / Collections
  • Ajax / apex.server.process
  • Interactive report
  • PlSql
Video demo:



Link demo apex, user: demo / pass: demo

Primero crearemos una coleccion, nombre: 'EMPLEADOS_COL' , y se creara a partir de un query de los empleados, notemos que tengo una columna donde me indica si el empleado pertenece al departamento seleccionado.

Documentacion  de colecciones


declare
  l_sql varchar2(4000);
  l_nombre_coleccion  varchar2(4000) := 'EMPLEADOS_COL';
begin

  if apex_collection.collection_exists (p_collection_name => l_nombre_coleccion)
  then
    apex_collection.delete_collection(p_collection_name => l_nombre_coleccion);
  end if;

  l_sql :='select empno
         , ename
         , deptno
         , sal
         , case when deptno = :P23_DEPARTAMENTO then 1 else 0 end pertenece
         , 0 ind_cambio
      from emp';

  apex_collection.create_collection_from_query_b
  (
      p_collection_name => l_nombre_coleccion
    , p_query           => l_sql
    , p_names           => apex_util.string_to_table('P23_DEPARTAMENTO')
    , p_values          => apex_util.string_to_table(:P23_DEPARTAMENTO)
  );

end;


Luego usaremos crearemos un reporte con la coleccion, aqui agregaremos el apex_item.checkbox2.


select seq_id
     , c001  empno
     , c002  ename
     , c003  deptno
     , c004  sal
     , apex_item.hidden(p_idx   => 1
                      , p_value => seq_id) ||
       apex_item.checkbox2(p_idx   => 2
                         , p_value => c005
                         , p_checked_values => 1)  pertenece
     , c006  ind_cambio
  from apex_collections
  where collection_name = 'EMPLEADOS_COL'

Luego crearemos una accion dinamica para capturar el click en el checkbox.

Dentro crearemos una accion de JavaScript, aqui llamaremos un proceso AJAX (apex.server.process), para actualizar la coleccion.

console.log(this.triggeringElement);

var elem = this.triggeringElement;
var estaMarcado = $(elem).is(':checked');
var seqId = $(elem).parent().find("input[name='f01']").val();

//console.log(estaMarcado);
//console.log(seqId);

apex.server.process("Actualizar_Coleccion",
        {  x01: seqId
         , x02: estaMarcado
        } 
      , {success: function(pdata){
          console.log(pdata.mensaje);  
                  }
        }
      // , {dataType: "text"}
    );
    






En el proceso AJAX .



* Actualizamos el atributo 6 del coleccion que es nuestro indicador que hubo un cambio en ese registro.
* Actualizamos el atributo 5 con 1 si esta el valor CHECKED y 0 si no lo es.
* Escribimos un objeto JSON para luego si deseamos personalizar el mensaje de nuestro cambio.


begin
  apex_collection.update_member_attribute (
      p_collection_name =>  'EMPLEADOS_COL',
      p_seq => apex_application.g_x01,
      p_attr_number => 5,
      p_attr_value => case when apex_application.g_x02 = 'true' then '1' else '0' end
      );
      
  apex_collection.update_member_attribute (
      p_collection_name =>  'EMPLEADOS_COL',
      p_seq => apex_application.g_x01,
      p_attr_number => 6,
      p_attr_value => 1
      );      
      
  apex_json.open_object;  
  apex_json.write(p_name => 'mensaje', p_value=> 'Actualizado correctamente');  
  apex_json.close_object;
exception
  when others then
  apex_json.open_object;  
  apex_json.write(p_name => 'mensaje', p_value=> 'Error al actualizar');
  apex_json.close_object;

end;

Finalmente creamos un proceso Pl/Sql para actualizar los valores en tabla.




* Notemos que en el proceso de ajax podemos hacer esta actualizacion.


for c_emp in (select c001 empno
                   , c005 pertenece  -- c005 es de pertenencia 
                from apex_collections
               where collection_name = 'EMPLEADOS_COL'
                 and c006 != 0 -- todos los que han cambiado de valor              
)
loop

  if c_emp.pertenece = 1 then 
    update emp
       set deptno = :P22_DEPARTAMENTO
     where empno = c_emp.empno; 
     
  else 
    update emp
       set deptno = null
     where empno = c_emp.empno; 
  end if;
 
end loop;










Share:

Monday, June 25, 2018

APEX_ITEM Parte 1 Guardando Check Boxes con APEX_APPLICATION.G_F01 en reportes + Oracle Apex

En este tutorial vamos a trabajar con los apex_item, en el caso particular de los checkbox dentro de reportes.



Lo primero a tener en cuenta es que usaremos APEX_ITEM ,aqui les lejo el link de la documentacion oficial, con apex_item podemos crear diferentes controles, como texto, listas de seleccion, etc.

El metodo nativo para guardar la informacion de esto es usar APEX_APPLICATION.G_F01 donde el 01, nos referenciara al identificador del apex_item.

Quiero aclarar que APEX_APPLICATION.G_F01 solo tendra valores cuando hagamos submit a la pagina, es decir que si los queremos usar con acciones dinamicas no podras obtener el valor. Para esto voy a crear otros post adicionales, para mostrarles como podriamos guardar esta informacion sin hacer submit.

proximamente mantener el valor de check box en paginacion
proximamente guardado automatico de apex_items

Link demo
user: demo  /pass:  demo

Link video tutorial



Entonces, primero definimos una estructura basica del query agregando el apex_item.checkbox2


select empno
     , apex_item.hidden(p_idx   => 1 
                      , p_value => empno) ||
       apex_item.checkbox2(p_idx   => 2
                         , p_value => empno) CheckBox
     , ename
     , deptno
     , sal
     , comm
     , job
  from emp
where deptno <> :P18_DEPARTAMENTOS

*Notamos que usamos un apex_item.hidden que se usara como indice principal.
* La clausula where es para no mostrar los registros que ya se hayan seleccionado para ese departamento.

Creamos un proceso que hara lo siguiente:


for i in 1..apex_application.g_f01.count loop
  for j in 1..apex_application.g_f02.count loop
    if apex_application.g_f01(i) = apex_application.g_f02(j) then
      -- esta seleccionado
      update emp 
         set deptno = :P18_DEPARTAMENTO
       where empno = apex_application.g_f02(i);
    end if;
  end loop; 
end loop;

*Dos loops, uno para tomar todos los indices, y el otro para tomar solo los seleccionados, luego se hace el update.














Share:

Monday, June 11, 2018

Snippets Apex Oracle , JavaScript , Css, / Codigo de uso diario

Quería escribir este post como una manera sencilla de organizar todas aquellas partes de código que a menudo uso para desarrollar, iré creando otro post con otros tips y código que uso, así como algunas herramientas que uso para desarrollar.



Botones:

icono : fa-save
  
<button type="button" class="t-Button t-Button--icon t-Button--success t-Button--simple t-Button--iconLeft">
<span aria-hidden="true" class="t-Icon t-Icon--left fa fa-save">
</span>Guardar
</button>


<button type="button" class="t-Button t-Button--icon t-Button--success t-Button--iconLeft">
<span aria-hidden="true" class="t-Icon t-Icon--left fa fa-save">
</span>Guardar</button>


icono: fa-ban
<button type="button" class="t-Button t-Button--icon t-Button--warning t-Button--iconLeft">
<span aria-hidden="true" class="t-Icon t-Icon--left fa fa-ban"></span>
Anular
</button>


<button type="button" class="t-Button t-Button--icon t-Button--warning t-Button--simple t-Button--iconLeft">
<span aria-hidden="true" class="t-Icon t-Icon--left fa fa-ban">
</span>Anular</button>


icono fa-trash :
<button type="button" class="t-Button t-Button--icon t-Button--danger t-Button--iconLeft">
<span aria-hidden="true" class="t-Icon t-Icon--left fa fa-trash">
</span>Eliminar</button>

<button type="button" class="t-Button t-Button--icon t-Button--danger t-Button--simple t-Button--iconLeft">
<span aria-hidden="true" class="t-Icon t-Icon--left fa fa-trash">
</span>Eliminar</button>


icono fa-check

icono fa-times-circle:

icono fa-chevron-left
icono fa-chevron-right


Todas estas conbinaciones se pueden realizar desde el button builder de universal theme de apex.

JavaScript:


  • Obteniendo valores:
$v("P2_ITEM");

  • Asignando valores :
$s("P2_ITEM","Hello World!");

  • Detener una secuencia de acciones dinamicas
apex.da.cancelEvent.call(this)


APEX - JS 


  •  Mostrar errores en APEX usando javascript

// First clear the errors
apex.message.clearErrors();
 
// Now show new errors
apex.message.showErrors([
    {
        type:       "error",
        location:   [ "page", "inline" ],
        pageItem:   "P1_ENAME",
        message:    "Name is required!",
        unsafe:     false
    },
    {
        type:       "error",
        location:   "page",
        message:    "Page error has occurred!",
        unsafe:     false
    }
]);



  • Pequeño cambio para mostrar el error en un ITEM especifico

var id_item = $v('P700_ERROR_ITEM'); 
 
apex.message.clearErrors(); 

apex.message.showErrors([
  {
   type:       "error",
   location:   [ "page", "inline" ],
   pageItem:   id_abs,
   message:    "Comment for disapprove is required!",
   unsafe:     false
  }
]);    


  • Capturando el cambio de valor de un ITEM
$('#item').change(funtion() {
 console.log(this);
});


  • Saber si un checkbox esta marcado, (checked)
$(document).ready(function(){  
  
    $("#checkbox_comprobar").click(function() {  
        if($("#checkbox").is(':checked')) {  
            alert("Está activado");  
        } else {  
            alert("No está activado");  
        }  
    });  
  
});

APEX

  • Usando las mascaras de fecha , definidas en la configuracion global de apex
APP_NLS_DATE_FORMAT

APP_DATE_TIME_FORMAT
-- Puedes reemplazar cualquier variable como una mascara ejem: &APP_DATE_TIME_FORMAT. o :APP_DATE_TIME_FORMAT


  • Habilitando el debug y mostrando mensaje , cuando se llama un proceso.

apex_debug.enable (p_level => 1);
 
apex_debug.message('Mensaje prueba mes inicio ' || :P120_MES_INICIO ,p_level =>1);

- luego puedes ver tu mensaje , abriendo la pestaba de verDebug en apex

  • Mostrando el icono de espera.
widget = apex.widget.waitPopup();
 
widget.remove();



Continuara ....

Referencias:

Checkbox

Obteniendo asignando valor items

Detener una accion dinamica




Share:

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