Monday, February 26, 2018

Uso correcto/ Timing Items to Return en Dynamic Actions (AJAX) Oracle Apex

Estaba trabajando con mi amigo Jorge R. y nos encontramos con algo realmente interesante, cuando usamos llamadas PLSQL en un dynamic actions.

Revisando un problema de un combo box , donde se necesitaba usar un valor despues de la seleccion del elemento, usamos un dynamic action y retornamos dos valores, aqui es donde descubrimos que el orden del retorno de las variables es "Muy Importante".

Vamos a revisarlo en un ejemplo:

Tengo una lista, P16_LIST_DEP el cual en mi caso asignare valores a los items, P16_VAL_1 y P16_VAL_2



Como vemos estoy colocando 10 y 20 en nuestros items y retornandolos en "Items to Return".

Adicionalmente, tengo un Dynamic Action que se ejecuta cuando cambia el valor de de P16_VAL_1 y este muestra en consola el valor de P16_VAL_2.



Entonces corremos la aplicacionm cambiare la seleccion de P16_LIST_DEPT y vemos el valor  ....



Vacio ??, pero tenemos un valor en "Items to Return",  si efectivamente, es lo que vimos, y esto ocurre por que cuanndo usamos Dynamic Action estamos usando Ajax.

Entonces estamos retornando primero el valor de P16_VAL_1,  al cambiar el valor se ejecuta el DA pero nuestra variable P16_VAL_2 , aun no tiene valor, asi que muestra vacio.

Ahora cambiare el orden de retorno de los valores y veamos lo que pasa.



Y si ahora lo vemos correctamente:



Lo que paso ahora es que el P16_VAL_2 se coloco en sesion primero, y luego el valor de P16_VAL_1   cuando este cambio, se ejecuto el DA y mostro correctamente en consola el valor de P16_VAL_2.

Asi que, a tener mucho cuidado en el orden de los items que retornamos , si estos ejecutan un DA, con un valor que tambien esta retornando.




Share:

Thursday, February 8, 2018

Usando el Context Menu y botones , click derecho en grid / right click on grid / oracle apex

Al usar click derecho muchas veces tenemos la necesidad de abrir un menu de opciones, el llamado ContextMenu, en este post veremos como capturar primero el click derecho y luego abriremos un menu personalizado, para crear dicho menu personalizado nos apoyaremos del Blog HardLikeSoftware .

Podemos ver la demo en este link, usando credenciales de demo/demo, subMenu ClickDerecho.

Como primer paso necesitamos crear un grid, para esta demo utilizares un Interactive Report, y le asignaremos un id. Para efectos demostrativos veremos como capturar el click de dos formas, asi que creamos otro Interactive Report con un id distinto al primero.

Interactive Report
 ID : id_reporte

Interactive Report 2
 ID : id_reporte_2

Luego capturaremos el evento del click derecho, para esto nos ubicamos en la seccion de
 "Function and Global Variable Declaration" colocamos:


 $(document).on('contextmenu','#id_reporte tr td',function(ev){     
     $("#MenuContext").menu( "toggle", ev.pageX, ev.pageY );
        ev.preventDefault(); 
        return false;      
 });

id_reporte_2_content.addEventListener('contextmenu', function(ev) {
        $("#MenuContext").menu( "toggle", ev.pageX, ev.pageY );
          ev.preventDefault(); 
          return false;  
    }, false);  

Como vemos aqui esta las dos formas de capturar el evento del click derecho en el primero usamos el ID del reporte 1 y el segundo el reporte 2, #MenuContext es el nombre de una region que revisaremos mas adelanteque contiene nuestro menu personalizado.

Agregamos el siguiente codigo en la seecion de "Execute when Page Loads", esto es para la creacion del nuevo menu que se va desplegar, aqui podemos personalizar muchas cosas, como el icono, label, type, accion, podemos revisar mas informacion de esta fuente, un poco mas de informacion sobre el menu HardLikeSoftware.


var menu$ = $("<div id='MenuContext'></div>");
$("body").append(menu$);
menu$.menu({
    iconType: "fa",
    items: [
       {
            type: "action",
            labelKey:"Test Button 1",
            icon: "fa-language ",
            action: function(menu, btn) {  
                $.event.trigger('CustomButton1');  
            }
        },
        {
            type: "action",
            labelKey: $v("P13_TEST_LABEL"),
            class: "validate-confirm",
            icon: "fa-check",
            action: function(menu, btn) {
                $.event.trigger('CustomButton2');  
            },
            disabled: function() {
                return $v("P13_IS_VALIDATED") == "N";
            }
        }
    ]
});

Como vemos, hemos creado un div con el id MenuContext, y luego este menu lo agregamos al body, asi mismo he creado dos botones, la diferencia del primero con el segundo es que el Label es dinamico, basado en un Item P13_TEST_LABEL y tiene un atributo de disable, de igual forma referenciando a un item P13_IS_VALIDATED.

item 1
name: P13_TEST_LABEL
type: display only
label: Test label

item 2
name: P13_IS_VALIDATED
type: Switch
label: Habilitar boton 2
custom settings:

Finalmente deberemos tener algo similar a esto:



Espero que les sea de mucha ayuda, cualquier duda en los comentarios.













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