Hasta ahora hemos avanzado con el tema de 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
Toca el turno de explicar como personalizar la apariencia de los botones de la barra de herramientas para adecuarlos a las necesidades propias de nuestra aplicación.
Nuevamente, es muy importante tener presente la estructura de la barra de herramientas de la cuadrícula interactiva, por lo que si no lo recuerdan, pueden encontrar la información al respecto en la primera entrega de la serie.
Modificar Etiqueta
Ya sea que quieras modificar la etiqueta de alguno de los botones estándar de la barra de herramientas de la cuadrícula interactiva, o de algún otro botón que hallas agregado previamente, el procedimiento es el mismo y comprende el obtener la configuración actual para hacer las modificaciones del caso. 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.
Dentro de la función que utilizamos para realizar el cambio de la etiqueta debemos:
- Recuperar la configuración actual
- Definir la sección en la que se encuentra el botón o botones que vamos a modificar
- Localizar el botón o botones a modificar
- Realizar el cambio de la etiqueta
Teniendo en cuenta lo anterior, si miramos el siguiente código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function(config) { var my_new_label = "Modificar" let $ = apex.jQuery, toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(), toolbarGroup = toolbarData.toolbarFind("actions2"); var arrayLength = toolbarGroup.controls.length; for (var i = 0; i < arrayLength; i++) { var act = toolbarGroup.controls[i].action; if (act == "edit") { toolbarGroup.controls[i].label = my_new_label; } } config.toolbarData = toolbarData; return config; } |
Vamos a modificar la manera en que luce la barra de herramientas que se muestra arriba.
En la línea 3 estamos definiendo el valor que vamos a asignar como etiqueta al botón que queremos modificar.
En las líneas 4 y 5, recuperamos la configuración actual de la barra de herramientas y en la línea 6, nos posicionamos en la sección deseada de la barra de herramientas (las definimos en el primer artículo de esta serie).
En la línea 8 obtenemos el largo del objeto que contiene los botones, en este caso la sección “actions2”.
Las líneas 10 a la 15, definimos un ciclo que vamos a utilizar para localizar el botón o los botones deseados y que verificará desde el primer hasta el último botón de la sección, buscando una coincidencia con nuestro criterio de búsqueda. En este caso, el último elemento está dado por el dato calculado en la línea 8.
Dentro de este ciclo, para localizar el botón deseado, preguntamos por la acción asignada al botón, en este caso, estamos buscando un botón cuya acción este definida como “edit”. Esto lo podemos ver en la línea 12.
Cuando encontramos un botón que cumpla con el criterio de búsqueda, en la línea 13, cambiamos el contenido de la propiedad label del objeto indicado, que es lo que queremos hacer, y le asignamos el valor definido previamente en la línea 3.
Finalmente, en la línea 17 asignamos la nueva configuración de la barra de herramientas, con los cambios realizados y en la línea 18 retornamos esta configuración a APEX para que muestre el cambio realizado.
Les recuerdo nuevamente que estamos usando Javascript que es “case sensitive” por lo que debemos tener el cuidado de conservar los nombres tal cual se muestran en el ejemplo.
A continuación podemos observar el resultado obtenido.
Agregar Iconos
Para cambiar la apariencia de los botones también podemos agregar iconos a los botones, para de este modo sumar al rubro de accesibilidad de los botones, pudiendo definir los mismos con ayuda de iconos que sean comprensibles incluso de manera independiente al idioma de la etiqueta que utilicen nuestros botones.
En este caso, el procedimiento es similar al que se describió anteriormente para modificar la etiqueta de los botones, solamente que en este caso vamos a utilizar otras propiedades del objeto para lograr nuestro objetivo.
Continuando con el ejemplo que traemos, veamos el código Javascript de la función que vamos a utilizar, en donde vamos a conservar en que se utilizó para modificar la etiqueta del botón de edición, pero vamos a agregar un par de líneas para realizar la definición del icono que vamos a utilizar.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
function(config) { var my_new_label = "Modificar" let $ = apex.jQuery, toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(), toolbarGroup = toolbarData.toolbarFind("actions2"); var arrayLength = toolbarGroup.controls.length; for (var i = 0; i < arrayLength; i++) { var act = toolbarGroup.controls[i].action; if (act == "edit") { toolbarGroup.controls[i].label = my_new_label; toolbarGroup.controls[i].icon = 'fa fa-table-edit'; toolbarGroup.controls[i].iconBeforeLabel = true; } } config.toolbarData = toolbarData; return config; } |
En esta nueva función, tenemos las líneas 14 y 15 en donde definimos el icono para el botón de edición.
La línea 14 define el icono como tal, que en este caso estamos usando un icono de Font APEX.
Por su parte la línea 15, define que dicho botón se va a mostrar a la izquiera de la etiqueta.
El resultado se los muestra en la siguiente imagen.
Resaltar botón
Para finalizar con este artículo, les voy a mostrar como podemos hacer para resaltar un botón por sobre los otros.
Esto quiere decir que el botón de nuestro ejemplo se va a pintar con el color azul de manera que sea más visible y llamativo para el usuario. En este caso vamos a usar el botón de agregar nuevas líneas y lo vamos a resaltar. No vamos a usar el mismo botón de edición, porque este es un caso especial de botón.
Para lograr esto, vamos a agregar unas cuantas líneas más a la función de configuración que hasta ahora hemos utilizado, para que quede 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 |
function(config) { var my_new_label = "Modificar" let $ = apex.jQuery, toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(), toolbarGroup = toolbarData.toolbarFind("actions2"); var arrayLength = toolbarGroup.controls.length; for (var i = 0; i < arrayLength; i++) { var act = toolbarGroup.controls[i].action; if (act == "edit") { toolbarGroup.controls[i].label = my_new_label; toolbarGroup.controls[i].icon = 'fa fa-table-edit'; toolbarGroup.controls[i].iconBeforeLabel = true; toolbarGroup.controls[i].hot = true; } } toolbarGroup = toolbarData.toolbarFind("actions3"); var arrayLength = toolbarGroup.controls.length; for (var i = 0; i < arrayLength; i++) { var act = toolbarGroup.controls[i].action; if (act == "selection-add-row") { toolbarGroup.controls[i].hot = true; } } config.toolbarData = toolbarData; return config; } |
Como podrán ver, ahora tenemos las líneas 19 a 28, donde localizamos el botón deseado y específicamente en la línea 26, definimos que el atributo o propiedad “hot” del objeto sea true, lo que hará que se muestre de color azul.
Lo explicado en el párrafo anterior, produce como resultado lo que muestra la imagen siguiente.
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.
