En este blog extenderemos las funcionalidad del popup Menu de Oracle APEX, permitiendo agregar y modificar botónes de acción de forma dinámica y condicional a nuestros requerimientos.
Pueden revisar la demo aquí APP
Como base principal tendremos una menu popup generado a través de una Lista estática del sharecomponents de APEX.
1) Creando el Popup Menu
- Creamos una lista en APEX con el siguiente SQL. Si tú ya tienes una lista puedes pasar al paso de: Agregando un nuevo botón de acción.
with menu_test as (
select 10 id, 'New' as entry_text, '#' as entry_target, 'fa-file-o' as entry_image from dual union all
select 20 id, 'Open' as entry_text, 'javascript:console.log(''test parent'')' as entry_target, 'fa-folder-open-o' as entry_image from dual union all
select 30 id, '---' as entry_text, 'separator' as entry_target, '' as entry_image from dual union all
select 40 id, 'Exit' as entry_text, '#' as entry_target, '' as entry_image from dual union all
select 50 id, 'Spreadsheet'as entry_text, '#' as entry_target, 'fa-file-excel-o' as entry_image from dual union all
select 60 id, 'Image' as entry_text, '#' as entry_target, 'fa-file-image-o' as entry_image from dual
)
select null
, 'ID:'||id|| ' - ' || entry_text label
, entry_target target
, null is_current
, entry_image image
, 'width="20" height="20"' image_attrib
, 'image_alt' image_alt
, id a01 -- this place is for display the ID
from menu_test
- Ahora creas un botón y una región con la siguiente configuración.
Lo importante son los puntos marcados en rojo, ya que los IDs nos serviran de selector luego.
Agregando un nuevo botón de acción
Ahora para agregar un botón de forma dinámica nos apoyaremos de los siguientes blogs.
Este control soporta diferentes opciones entre ellas el evento,
Esto nos permite la manipulación del elemento antes de mostrarlo, una de las primeras cosas que haremos será agregar una nueva acción a la lista actual.
Para el ejemplo agregaremos el botón tipo= acción y label= Link Demo
// Usamos el ID que le dimos a nuestra región del popup menu, para seleccionar el elemento
$( "#customized_menu" ).menu({
// creamos un "listener" del evento beforeOpen
beforeOpen: function( event, ui ) {
// adicional console para ver la información que se tiene cuando se habre el menu
console.log(event, ui);
// condicional para verificar si el botón ya existe y no volverlo agregar
// para este caso los IDs con muy importantes para diferenciarlos
// El type, label, icon, action son totalmente personalizables de acuerdo a nuestras necesidades
if ( !ui.menu.items.find(objeto => objeto.id === 'myIdDemo') ){
ui.menu.items.push({id: 'myIdDemo'
, type: 'action'
, label: 'Link Demo'
, icon: 'fa-badge-check'
, action: function() {
console.log('Click en el nuevo botón');
}
})
}
}
});
Para completar la demostración agregue un botón que usa una acción dinámica y ejecuta el javascript.
Muestra una alerta al finalizar
Y al probar el botón de acciones vemos como se agrego una nueva acción.
Modificando un atributo en todos los elementos
Solo como ejemplo podremos hacer algo asi, cambiar un solo atributo a todos los elementos.
- Revisar los comentarios del código siguiente
// Usamos el ID que le dimos a nuestra región del popup menu, para seleccionar el elemento
$( "#customized_menu" ).menu({
// creamos un "listener" del evento beforeOpen
beforeOpen: function( event, ui ) {
// guardamos la colección de items para luego recorrer uno por uno
var menuItems = ui.menu.items;
menuItems = menuItems.map( function ( item ) {
//por cada elemento cambiamos el icono a fa-bug
item.icon = 'fa-bug';
// retornamos el item modificado
return item;
});
}
});
Modificando acciones específicas #1 (ubicadas por el ID)
Como podemos ver nuestro popup menu del ejemplo ya tiene un ID único, esto para poder encontrar de manera fácil cual elemento deseamos modificar.
Seleccionaremos un ID especifico y le cambiaremos el tipo, Icono, Label en on y en off
// Usamos el ID que le dimos a nuestra región del popup menu, para seleccionar el elemento
$( "#customized_menu" ).menu({
// creamos un "listener" del evento beforeOpen
beforeOpen: function( event, ui ) {
// guardamos la coleccion de items para luego recorrer uno por uno
var menuItems = ui.menu.items;
menuItems = menuItems.map( function ( item ) {
// buscamos si es el ID 40 y modificamos sus propiedades
if (item.id == 40 ){
item.label = 'Botón cambiado';
item.icon = 'fa-ban';
}
return item;
});
}
});
Modificando acciones específicas "2 (ubicadas por el ID)
Seleccionaremos un ID especifico y le cambiaremos el tipo, Icono, Label en on y en off. Este es un caso mas complejo ya que el tipo toggle maneja diferentes opciones, como vemos a continuación.
var toggleGlobal = true;
// Usamos el ID que le dimos a nuestra región del popup menu, para seleccionar el elemento
$( "#customized_menu" ).menu({
// creamos un "listener" del evento beforeOpen
beforeOpen: function( event, ui ) {
// guardamos la coleccion de items para luego recorrer uno por uno
var menuItems = ui.menu.items;
menuItems = menuItems.map( function ( item ) {
// buscamos si es el ID 40 y modificamos sus propiedades
if (item.id == 40 ){
item.type = "toggle";
item.set = function(e) {
// e tiene el valor de true o false, dependiendo del estado del toggle
console.log('set status',e);
// lo asignamos a nuestra variable global
toggleGlobal = e;
}
item.get = function(e,f) {
// aquí devolvemos true o false, dependiendo que queremos mostrar
// para el ejemplo retornamos el valor de nuestra variable global toggleGlobal1
console.log('get',e,f,toggleGlobal);
return toggleGlobal;
}
//item.label = "toggle"; // si definimos label , será prioridad sobre el on / off label;
delete item.label; // remover la propiedad label definida inicialmente
item.onLabel = "Toggle onLabel";
item.offLabel = "Toggle offLabel";
item.onIcon = "fa-badge-check";
item.offIcon = "fa-badge";
}
return item;
});
}
});
A little knowledge to share (Oracle APEX) 
Wow que bueno eso que explicas. Gracias por enviarlo.
Sigue enviando consejos muy buenos como este.
Saludos.
LikeLike