Continuando con esta serie acerca de las cuadrículas interactivas, de la cual ya tenemos dos artículos:
En la tercera parte de la serie, les voy a explicar cómo podemos aregar botones en las diferentes secciones de la barra de herramientas de una cuadrícula interactiva.
Si no recuerdas la estructura de la barra de herramientas de la cuadrícula interactiva, puedes encontrar información al respecto en la primera entrega de la serie.
El procedimiento para agregar botones a las diferentes secciones de la barra de herramientas de una cuadrícula interactiva, utiliza nuevamente una función de JavaScript que vamos a agregar en los atributos de dicha cuadrícula. Para hacer esto debemos:
- 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 agregar los botones.
Cuando agregamos un botón, siempre vamos a utilizar una misma estructura para cada uno de ellos, la cual está compuesta por un tipo, una etiqueta, un icono y una acción.
Tomemos como base el siguiente código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function(config) { let $ = apex.jQuery, toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(), toolbarGroup = toolbarData.toolbarFind("actions4"); toolbarGroup.controls.push({ type: "BUTTON", label: "Agregar Línea(s)", action: "selection-add-row", icon: "icon-ig-add-row", iconBeforeLabel: true, hot: true }); config.toolbarData = toolbarData; return config; } |
En las línea 2 y 3 del código, las primeras dentro de la función Javascript, obtenemos la configuración de la barra de herramientas actual de la cuadrícula interactiva.
En la línea 4, nos posicionamos en la sección deseada de la barra de herramientas (las definimos en el primer artículo de esta serie).
Las líneas 6 a la 13, definen lalas caraccterísticas del botón que queremos agregar:
- la línea 7 define el tipo, que en este caso es BUTTON,
- la línea 8 define la etiqueta del botón,
- la línea 9 define la acción a ejecutar por el botón,
- la línea 10 define el nombre del icono que vamos a agregar al botón,
- en la línea 11, estamos indicando que el botón debe ir a la izquierda de la etiqueta
- y en la línea 12 definimos que el botón utilizará el resaltado para hacerlo notar.
Recuerden 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.
El resultado, lo podemos observar en la siguiente imagen.
En la tabla a continuación les dejo cada una de las acciones predefinidas que podemos utilizar:
| Nombre | Tipo | Descripción |
|---|---|---|
| search | Action | Maneja la funcionalidad principal de búsqueda disponible para el campo search en la barra de herramientas. |
| search-case-sensitive | Toggle | Alternar si la búsqueda distingue entre mayúsculas y minúsculas. |
| filter-column | Radio | Restringir la búsqueda a una columna específica |
| change-report | Radio | Cambiar a un reporte guardado diferente. |
| change-view | Action | Cambiar a una vista diferente (cuadrícula, icono, detalle, etc.). |
| chart-view | Action | Cambiar a una vista de gráfico. Nota: Esta es manejada de manera diferente a otras vistas porque es definida por el usuario y puede no estar configurada. |
| show-columns-dialog | Action | Muestra la ventana de diálogo de las columnas. |
| show-filter-dialog | Action | Muestra la ventana de diálogo de filtrado. |
| show-sort-dialog | Action | Muestra la ventana de diálogo de ordenado. |
| show-aggregate-dialog | Action | Muestra la ventana de diálogo de agregar. |
| show-flashback-dialog | Action | Muestra la ventana de diálogo de flashback. |
| show-highlight-dialog | Action | Muestra la ventana de diálogo de resaltado. |
| show-control-break-dialog | Action | Muestra la ventana de diálogo de total de control. |
| show-download-dialog | Action | Muestra la ventana de diálogo de descarga. |
| show-help-dialog | Action | Muestra la ventana de diálogo de ayuda. |
| stretch-columns | Toggle | Alterna si las columnas están configuradas para estirarse a su ancho disponible (para las vistas que lo admiten). |
| change-rows-per-page | Radio | Define el número de líneas de la cuadrícula que son desplegadas para la página actual. |
| save-report | Action | Guardar la definición actual del reporte. |
| show-save-report-as-dialog | Action | Muestra la ventana de diálogo “Guardar como”. |
| show-edit-report-dialog | Action | Muestra la ventana de diálogo “Editar Reporte”. |
| delete-report | Action | Elimina el reporte guardado actual. |
| reset-report | Action | Restaura la definición del reporte actual. |
| row-add-row | Action | Inserta una línea justo después de la línea actual. |
| row-duplicate | Action | Duplica la línea actual. |
| row-delete | Action | Elimina la línea actual. |
| row-refresh | Action | Refresca la línea actual. |
| row-revert | Action | Reviere la línea actual a su estado original cuando la Cuadrícula Interactiva fue refrescada. |
| selection-mode | Toggle | Alterna el modo de selección actual (true para selección de fila, false para selección de celda). |
| selection-duplicate | Action | Duplica las líneas seleccionadas. Nota: Las cuadrículas interactivas deben ser editables. |
| selection-delete | Action | Elimina las líneas seleccionadas. Nota: La cuadrícula interactiva debe ser editable. |
| selection-refresh | Action | Refresca las líneas seleccionadas desde el servidor. Nota: La cuadrícula interactiva debe ser editable. |
| selection-revert | Action | Revierte las líneas seleccionadas al estado original que tenían cuando la cuadrícula fue refrescada. Nota: La cuadrícula interactiva debe ser editable. |
| selection-copy | Action | Copy the current selection to the clipboard. Note: Interactive Grid must be editable. |
| selection-add-row | Action | Insert a row straight after any selected rows. If no rows are selected, or if cell selection mode is enabled, the new row will be added at the beginning. |
| selection-copy-down | Action | Copy cell values from columns in the first selected row to all the other selected rows within the same columns. Note: Interactive Grid must be editable, and only supported in ‘Grid’ view. |
| selection-clear | Action | Clear all cells in the current selection. Note: Interactive Grid must be editable, and only supported in ‘Grid’ view. |
| selection-fill | Action | Fill all cells in the current selection with the value provided. Note: Interactive Grid must be editable, and only supported in ‘Grid’ view. |
| refresh | Action | Refresh the Interactive Grid region. |
| edit | Toggle | Toggle the current edit mode. |
| save | Action | Save the current data changes. Note: Interactive Grid must be editable. |
| single-row-view | Action | Change to single row view. Note: The current view must support single row view. |
| close-single-row-view | Action | Change from single row view. Note: The current view must support single row view. |
También podemos agregar botones para ejecutar acciones personalizadas.
En el siguiente ejemplo, pueden ver como agregar un botón en cada una de las secciones de la barra de herramientas cuya funcionalidad es levantar un mensaje de alerta:
|
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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
function(config) { let $ = apex.jQuery, toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(), toolbarGroup = toolbarData.toolbarFind("search"); toolbarGroup.controls.push({ type: "BUTTON", label: "1", action: "alerta", icon: "", iconBeforeLabel: false, hot: true }); toolbarGroup = toolbarData.toolbarFind("reports"); toolbarGroup.controls.push({ type: "BUTTON", label: "2", action: "alerta", icon: "", iconBeforeLabel: false, hot: true }); toolbarGroup = toolbarData.toolbarFind("views"); toolbarGroup.controls.push({ type: "BUTTON", label: "3", action: "alerta", icon: "", iconBeforeLabel: false, hot: true }); toolbarGroup = toolbarData.toolbarFind("actions1"); toolbarGroup.controls.push({ type: "BUTTON", label: "4", action: "alerta", icon: "", iconBeforeLabel: false, hot: true }); toolbarGroup = toolbarData.toolbarFind("actions2"); toolbarGroup.controls.push({ type: "BUTTON", label: "5", action: "alerta", icon: "", iconBeforeLabel: false, hot: true }); toolbarGroup = toolbarData.toolbarFind("actions3"); toolbarGroup.controls.push({ type: "BUTTON", label: "6", action: "alerta", icon: "", iconBeforeLabel: false, hot: true }); toolbarGroup = toolbarData.toolbarFind("actions4"); toolbarGroup.controls.push({ type: "BUTTON", label: "7", action: "alerta", icon: "", iconBeforeLabel: false, hot: true }); config.initActions = function(actions){ actions.add({ name: "alerta", action: function() { alert('Esta es una acción personalizada'); } }); } config.toolbarData = toolbarData; return config; } |
En las siguientes entregas les mostraré otras cosas que podemos hacer con nuestras cuadrículas interactivas, como por ejemplo:
- Cómo cambiar la etiqueta de los botones desplegados
- Cómo agregar nuevas opciones al menú de acciones.
- Cómo agrear un menú personalizado de acciones por línea.
