Menu Contextual Con Oracle Apex

¡Hola de nuevo! Hoy veremos la creación de un menú contextual personalizado para nuestras aplicaciones APEX utilizando el clic derecho del mouse. Este tipo de menú es extremadamente útil para mejorar la experiencia del usuario y proporcionar acciones específicas según la necesidad.

Comenzaremos creando una región y asignándole un identificador estático. En este ejemplo, he nombrado mi región de prueba simplemente como "mContextual".

A esta región agregaremos el siguiente div en la parte de Cabecera y Pie de Pagina.

<div id="contextMenu"></div>

En la declaración de funciones y variables globales, definiremos nuestro menú como una lista de objetos. Cada objeto representará una acción que queremos que el menú realice. Por ejemplo, mostrar una alerta, una confirmación o abrir un modal. Cada objeto tiene una etiqueta y una función de acción asociada.

let menuList = [
{ type:"action",
label: "mostrar alerta",
action: function() {
apex.message.alert("un mensaje");
} }, {
type:"action",
label: "mostrar confirmacion",
action: function() {
apex.message.confirm("estas seguro?");
} }, {
type:"action",
label: "mostrar modal",
action: function() {
javascript:openModal('modal');
} }];

Una vez que hemos definido nuestro menú, lo inicializamos al cargar la pagina utilizando jQuery. Esto se hace seleccionando el div con el id "contextMenu" y llamando al método .menu() sobre él, pasando como parámetro la lista de acciones que definimos anteriormente.

$( "#contextMenu" ).menu( {
items: menuList
} );

Para que nuestro menú aparezca cuando hagamos clic derecho, creamos un evento en la Declaración de Función y Variable Global que se active cuando se detecte un clic derecho en la región. Este evento se encargará de evitar el comportamiento predeterminado del navegador y activar el menú en las coordenadas del clic derecho.

$(mContextual).on( "contextmenu", function( event ) {
event.preventDefault();
$( "#contextMenu" ).menu( "toggle", event.pageX, event.pageY );
});

Recuerda que para que la opción de mostrar una modal funcione correctamente, necesitaremos crear una región con la plantilla "Inline Dialog" y un identificador estático, que en este caso se llamó "modal". Luego, en la acción correspondiente del menú, llamaremos a la función openModal() pasando el identificador de nuestra región modal como parámetro.

javascript:openModal('modal');

https://www.youtube.com/watch?v=BbwunRtq_gY

¡Y eso es todo! Con estos pasos, tendrás un menú contextual totalmente funcional en tus aplicaciones APEX. ¡Espero que esta guía te haya sido útil! Si quieres ver el post original en inglés, puedes visitar el perfil de Paulo Augusto Künzel.

Si quieres probar la demo pueden ingresar aqui