# Toggle en Popup Menu 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](https://apex.oracle.com/pls/apex/f?p=32431:1010::::::)

![demo_gif]

Como base nos guiaremos del blog de John Snyders donde crea un popup menu custom. [APEX 5.0 Custom Menus](https://hardlikesoftware.com/weblog/2015/07/13/apex-5-0-custom-menus/)

La documentación oficial del ítem y otras opciones están en [Widget: menu](https://docs.oracle.com/en/database/oracle/apex/23.2/aexjs/menu.html) y un ejemplo de Oracle [Menu Popup](https://apex.oracle.com/pls/apex/f?p=42:1306)



### 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);**

![itemsDemo]

  - 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

![ButtonConfig]


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

``` js

// 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

```js
_initMenuPopup();
``````

![initFunct]



[ButtonConfig]: https://github.com/Aftorres02/blog_app_examples/raw/master/post_2024/2024_toggle_menu_popup/ButtonConfig.png

[initFunct]: https://github.com/Aftorres02/blog_app_examples/raw/master/post_2024/2024_toggle_menu_popup/initFunct.png

[itemsDemo]: https://github.com/Aftorres02/blog_app_examples/raw/master/post_2024/2024_toggle_menu_popup/itemsDemo.png

[demo_gif]: https://github.com/Aftorres02/blog_app_examples/raw/master/post_2024/2024_toggle_menu_popup/demo.gif