Toggle en Popup Menu en Oracle APEX

Este blog será un pequeño extracto de como customizar un popup menu en Oracle APEX. Para esta oportunidad hablaremos sobre el tipo toggle

Ejemplo: blog

Como base nos guiaremos del blog de John Snyders donde crea un popup menu custom. APEX 5.0 Custom Menus

La documentación oficial del ítem y otras opciones están en Widget: menu y un ejemplo de Oracle Menu Popup

Consideraciones

• Como parte del ejemplo estamos agregando dos ítems para mostrar el resultado en cada acción set del toggle, ver line con apex.item(“P1010_TOGGLE_1”).setValue(e);

• Se están usando dos botones de toggle, para ver la diferencia cuando se coloca el label o cuando queremos usar un label e icono diferente en on y off del toggle.

Necesitaremos un botón que abrirá el menu:

• Recordemos agregar el atributo data-menu=“actionsMenu” donde actionsMenu será nuestro identificador para agregar los valores del menu luego

Ahora crearemos las opciones del menu , en la sección Function and Global Variable Declaration de APEX

// Creamos nuestra variable *toggleGlobal* que nos servirá para guardar el estado del toggle
var toggleGlobal1 = true;
var toggleGlobal2 = true;
var menu$ = $("<div id='actionsMenu'></div>");

function _initMenuPopup()  {

  $("body").append(menu$);
  menu$.menu({
  iconType: "fa",
  items: [
      {
        id:'toggleTest1'
      , type: "toggle"
      , 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
        toggleGlobal1 = e;
        apex.item("P1010_TOGGLE_1").setValue(e);
      }
     , 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,toggleGlobal1);
        return toggleGlobal1;
      }
     //, label:  "toggle" // si definimos label , será prioridad sobre el on / off label
     , onLabel:  "Toggle onLabel"
     , offLabel:  "Toggle offLabel"
     , onIcon: "fa-badge-check"
     , offIcon: "fa-badge"
     //, disabled: false
    },
    {
      type: "separator",
      label: "-",
      href: "separator"
    } ,
    {
        id:'toggleTest1',
        type: "toggle"
      , label:  "toggle"
      , 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
        toggleGlobal2 = e;
        apex.item("P1010_TOGGLE_2").setValue(e);
        }
      , 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,toggleGlobal2);
         return toggleGlobal2;
       }
      , label:  "toggle" // si definimos label , será prioridad sobre el on / off label
      , onLabel:  "Toggle onLabel"
      , offLabel:  "Toggle offLabel"
      , onIcon: "fa-badge-check"
      , offIcon: "fa-badge"
      //, disabled: false
    }
  ]
  })
};

inicializamos nuestra función

_initMenuPopup();