Ya hemos cubierto varios aspectos referentes a la personalización de las cuadrículas interactivas de APEX y hemos tratado los temas:
- Conociendo las cuadrículas interactivas
- IG – Eliminar secciones de barra de herramientas
- IG – Agregar botones a barra de herramientas
- IG – Cambiar la apariencia de los botones
En esta oportunidad, voy a explicar cómo agregar un menú personalizado a la barra de herramientas de una cuadrícula interactiva, pero adicionalmente explicaré como personalizar el menú de Acciones o cómo eliminar este.
Recordárles una vez más, que en primera entrega de la serie, pueden aprender lo básico y necesario para poder entender como funciona y como está estructurada la barra de herramientas.
Agregar un menú personalizado
Además de agregar botones en las diferentes secciones de la barra de herramiemtas de una cuadrícula interactiva, podemos agregar menús desplegables, ya sea para ejecutar funciones predefinidas o para ejecutar acciones personalizadas que queramos agregar a nuestra cuadrícula. Nuevamente, el procedimiento general es:
- Abrir la página que contiene la cuadrícula interactiva.
- Seleccionar la región de cuadrícula interactiva, ya sea en la lista de componentes o en la vista de diseño de la página.
- Hacer clic en la pestaña Atributos, en el paño de propiedades en la columna derecha del diseñador de páginas.
- En la sección Avanzada, en Función de Inicialización JavaScript, agregar el código de la función que nos permite modificar los botones.
La función que necesitamos utilizar para agregar un menú personalizado, debe ejecutar las siguientes acciones:
- Recuperar la configuración actual
- Definir la sección en la que se vamos a agegar nuestro menú
- Definir las opciones que van a conformar nuestro menú
Habiendo dicho esto, si queremos crear un menú que nos permita filtrar, crear un gráfico, descargar la cuadrícula y adicionalmente levantar una alerta, nuestra función debería mirarse de la siguiente manera:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
function(config) { let $ = apex.jQuery, toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(), toolbarGroup = toolbarData.toolbarFind("actions4"); toolbarGroup.controls.push({type: "MENU", id: "menu-s", label: "Menú Corto", icon: "fa fa-navicon", iconBeforeLabel: true, hot: false, action: "custom-menu", menu: { items: [{ type: "action", action: "show-filter-dialog", label: "Filtrar" }, { type: "separator" }, { type: "action", action: "chart-view", label: "Gráfico" }, { type: "separator" }, { type: "action", action: "show-download-dialog", label: "Download" }, { type: "separator" }, { type: "action", action: function(){ alert('Acción 1');}, label: "Action 1", icon: "fa fa-number-1-o" }] } }); config.toolbarData = toolbarData; return config; } |
En las líneas 3-5, recuperamos la configuración actual de la barra de herramientas y nos posicionamos en la sección deseada de la barra de herramientas (las definimos en el primer artículo de esta serie) en la que vamos a agregar nuestro menú. En este caso vamos a utilizar la sección más a la derecha de la barra de herramientas.
Las líneas 7 a 13, definen las propiedades generales de nuestro nuevo menú, de la siguiente manera:
- Línea 7, tipo de elemento: MENU
- Línea 8, Id del elemento: menu-s
- Línea 9, etiqueta del elemento Menú Corto
- Línea 10, icono: fa fa-navicon
- Línea 11, posición del icono: iconBeforeLabel: true
- Línea 12, se debe resaltar: false
- Línea 13, acción: action-menu
Las líneas 15 a la 41, definen las diferentes entradas del menú. Si son observadores, habrán notado que entre cada entrada existe una definición de separador, estos son necesarios y mandatorios.
También pueden notar que las líneas 35 a 38 definen una opción que es diferente a las anteriores, en este caso estamos definiendo una opción que ejecuta una función Javascript que lo que hace es levantar una alerta con el mensaje “Acción 1”.
Finalmente, las líneas 43 y 44 definen y retornan la nueva configuración de la barra de herramiemtas.
Muy importante recordar que al estar utilizadno Javascript que es “case sensitive” , debemos tener el cuidado de conservar los nombres tal cual se muestran en el ejemplo.
A continuación podemos observar el resultado final.
Eliminar menú de acciones
Si lo que quieren es eliminar de la barra de herramientas de una cuadrícula interactiva el menú de acciones, esto es muy fácil de conseguir.
Todo lo que deben hacer es eliminar la sección que contiene dicho menú.
Para hacer esto, nuestra función de personalización de la cuadrícula interactiva sería como esta:
|
1 2 3 4 5 6 7 8 |
function(config) { let $ = apex.jQuery, toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(); toolbarGroup = toolbarData.toolbarRemove("actions1"); config.toolbarData = toolbarData; return config; } |
Las líneas 2 y 3 recuperar la configuración actual de la barra de herramientas, mientras que la línea 4 remueve la sección actions1 que contiene el menú acciones.
El resultado final lo muestra la siguiente imagen.
Personalizar menú de acciones
Si lo que queremos hacer es personalizar el menú de acciones de la barra de herramientas de una cuadrícula interactiva, por ejemplo para que no muestre la opción de crear gráficos y la de descargar el reporte.
La función de configuración que realice estas funciones debería lucir como la siguiente:
|
1 2 3 4 5 6 7 8 9 10 |
function(options) { var toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(); toolbarData.toolbarRemove("chart-view"); toolbarData.toolbarRemove("show-download-dialog"); options.toolbarData = toolbarData; return options; } |
La línea 3 de la función, recupera la configuración actual de la barra de herramientas de la cuadrícula interactiva.
La línea 4 elimina la opción de Gráficos del menú de acciones.
La línea 5, elimina la opción de descarga del reporte incluida en el menú de acciones de la barra de herramientas.
Y el resultado final se vería asi:
Si adicionalmente, queremos agregar una opción personalizada al menú de acciones, como por ejemplo para levantar una ventana de alerta, a la función anterior le agregamos algunas líneas para que lusca como la siguiente:
|
1 2 3 4 5 6 7 8 9 10 |
function(options) { var toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(); toolbarData.toolbarRemove("chart-view"); toolbarData.toolbarRemove("show-download-dialog"); options.toolbarData = toolbarData; return options; } |
Por venir
En entregas posteriores, les mostraré nuevos trucos para personalizar nuestras cuadrículas interactivas, como por ejemplo:
- Cómo agregar nuevas opciones al menú de acciones.
- Cómo agrear un menú personalizado de acciones por línea.
- Cómo agregar una barra de desplazamiento en la parte superior de una cuadrícula interactiva.
- Y algunos otros trucos más.
