Cómo agregar botones en la barra de herramientas de una Cuadrícula Interactiva - APEX 5.1

Por Clarisa Maman Orfali Oracle ACE director
Publicado en Mayo 2018

Revisado por Ana Gamba



Si hemos trabajado con las cuadrículas interactivas, podemos ver que no hay una posición de región de botón llamada “Barra de Búsqueda a la Derecha del Informe Interactivo” que nos permite una ubicación agregar botones, como así los hay en los Informes Interactivos.

Podemos hacerlo, pero es un poco más complicado que cuando estamos trabajando con los Informes Interactivos. Guiándonos de la aplicación de ejemplo de las Cuadrículas Interactivas de Application Express, vamos a desmenuzar como implementar esto.

En este ejemplo vamos a crear un botón “Crear” en la barra de herramientas de la Cuadrícula Interactiva de Empleados, que al hacer clic en el botón se abrirá una página modal de APEX para crear, editar o eliminar un empleado. Esto puede ser útil si deseamos aprovechar las nuevas funciones de la cuadrícula interactiva, como columnas congeladas, manteniendo el patrón de edición existente.

Para comenzar tenemos el siguiente escenario, una cuadricula interactiva de la tabla empleados, que en mi caso es la página 8 de mi aplicación demo. Luego tenemos otra página de APEX con el formulario de carga de datos de la tabla EMP, en mi caso la página 5 de mi aplicación demo.

El objetivo de este artículo es crear un botón en la barra de búsqueda de la cuadrícula interactiva en la última posición del grupo de botones, como se muestra en la siguiente imagen:


Antes de personalizar la barra de herramientas, necesitamos colocar un identificador estático en la región de la cuadrícula interactiva, por ejemplo, con el nombre emp.


La personalización de la barra de herramientas es una configuración de la sección de configuración avanzada de atributos de la cuadrícula interactiva.

Usamos el atributo de Código JavaScript para especificar una función que puede agregar o cambiar las opciones de configuración. La cuadrícula Interactiva usa el widget de la barra de herramientas que también usa el botón de acciones. Estas son las mismas acciones que el menú APEX puede usar para admitir atajos de teclado.

En este ejemplo agregaremos un botón “Crear” al último grupo de la barra de herramientas y se asociará con una nueva acción crear-empleado. La parte difícil de abrir un cuadro de diálogo de APEX es que la URL debe ser generada por el servidor. Hay algunas formas de hacerlo, pero en este ejemplo vamos a crear un botón oculto con un comportamiento para redirigir a la página de diálogo. La acción crear-empleado simplemente toma prestados los botones ocultos en el controlador de clics.

En primera instancia, vamos a agregar una región de contenido estático que la llamaremos “Oculto” que use la plantilla de región “Blank with Attributes”, y en la sección “Avanzada” en “Atributos Personalizados”, ingresamos el siguiente estilo CSS para no mostrar la región estática: style="display:none".  

Luego creamos un botón dentro de la región que lo llamaremos dummy1 y lo colocamos en la posición “Next”.

En la sección “Comportamiento” del botón, en el atributo “Acción” configuramos “Redirigir a Página en esta Aplicación” y en el atributo “Destino” colocamos la página de nuestro formulario, en mi caso la página 5 y borramos la cache colocando el número de página.

Es importante colocar un identificador estático en el botón porque lo usaremos más adelante en el código de JavaScript. Lo llamaremos, por ejemplo, hiddenCreate.

Guardamos los cambios.


Seguidamente, seleccionamos atributos de la cuadrícula interactiva y en propiedades nos dirigimos a la sección “Avanzada”.

function(config) {
    var $ = apex.jQuery,
        toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
        lastToolbarGroup = toolbarData[toolbarData.length - 1],
        createButton = {
            type: "BUTTON",
            hot: true,
            action: "crear-empleado"
        };
    lastToolbarGroup.controls.push( createButton );
    config.toolbarData = toolbarData;
    
    // this is how actions are added
    config.initActions = function(actions) {
        actions.add({
            name: "crear-empleado",
            // you could define the label directly as English text
            // label: "Create"
            // But better to use a message so it can be translated. In shared
            // components, text messages create MY_CREATE_BUTTON = Create and 
            // set Used in JavaScript: Yes
            labelKey: "MY_CREATE_BUTTON",
            // this sets the action to be what the hidden button does when you click it
            action: $("#hiddenCreate").prop("onclick")            
        });
    }
    return config;
}


Como podemos ver en el código estamos usando el identificador estático del botón:

action: $("#hiddenCreate").prop("onclick")


Crear Acción Dinámica

Como nuestro formulario es una página modal, necesitamos crear una acción dinámica para que se cierre la ventana modal.

Creamos entonces una acción dinámica de Cuadro de Dialogo Cerrado.

- Ingresamos el nombre: AD AD Close

- Cuando: Selector de jQuery

- Selector de jQuery: body

En acción verdadera seleccionamos: Ejecutar Código JavaScript.

Ingresamos el siguiente código:

// make sure it is the dialog we are expecting that closed
if ( this.data.dialogPageId  === 5 ) {
    if ( this.data.successMessage ) {
        // use new API to show the success message if any that came from the dialog
        apex.message.showPageSuccess(this.data.successMessage.text);
    }
    // use the new API to refresh the region to pick up any changes made by the 
dialog that just closed
    apex.region("emp").refresh();
    // the old way to refresh also works
    //$("#emp").trigger("apexrefresh");
} 

En el código debemos colocar el número de página que se hace referencia, en este caso es la número 5 y debemos colocar el identificador estático de la región de la cuadrícula interactiva, en este caso lo llamamos emp.

Algunas cosas que debemos tener en cuenta sobre la acción dinámica “Dialog closed”es que la AD escucha el elemento body en lugar de la región de la cuadrícula interactiva porque el botón de creación oculto está fuera de la región de la cuadrícula. El mensaje de éxito de la ventana de diálogo se muestra con la nueva API apex.message.showPageSuccess. Anteriormente, esto no era posible sin actualizar toda la página. Por último, se muestra la nueva API para actualizar cualquier región, aunque el método de evento desencadenante apexrefresh también funciona.

Guardamos los cambios.



Nombre del Botón

Para mostrar el nombre del botón, como nos sugiere la aplicación demo, podemos crear un mensaje de texto. Podemos utilizar los mensajes de texto para crear cadenas de texto traducibles con variables de sustitución que se pueden llamar desde código PL/SQL, paquetes, procedimientos y funciones y para que lo use los códigos JavaScript necesitamos especificarlo.

Ingresamos a Componentes Compartidos de la aplicación → Globalización → Mensajes de Texto.

Hacemos clic en el botón Crear Mensaje de Texto >

- Nombre: MY_CREATE_BUTTON

- Idioma: Español

- Utilizado en JavaScript:

- Texto: Crear


Hacemos clic en el botón “Crear Mensaje de Texto”.

Volvemos a la página de nuestra Cuadrícula Interactiva y la ejecutamos. Podemos ver el botón creado que se llama “Crear” en la barra de búsqueda de nuestra cuadrícula.


Al hacer clic se abre la ventana modal, ingresamos los datos de un empleado y se cierra la ventana, se actualiza la grilla y se muestra el mensaje de Acción procesada. (podemos cambiar ese mensaje en las propiedades de la página del formulario).

Todo funciona según lo esperado.


¡La gran ayuda que nos ofrece las aplicaciones de ejemplo de Application Express son invaluable! Por eso te invito a instalar estas aplicaciones en tu entorno de desarrollo y aprender a utilizar infinidad de funciones y características para que las puedas usar en tus propios desarrollos en APEX.



Clarisa Maman Orfali es fundadora y CEO de ClarTech Solutions Inc. Se ha convertido en Oracle ACE hace algunos años, tiene más de 15 años de experiencia en el desarrollo y la capacitación en tecnologías de la información. Hace unos años descubrió la belleza de Oracle Application Express (APEX) y se ha especializado en esa área. Ella también es una Co-Fundadora y Directora del Argentina Oracle User Group (AROUG) y ha participado activamente en la organización de grandes y populares eventos. Ella tiene una gran pasión por las tecnologías de Oracle y quiere ampliar esa pasión e influencia transfiriendo su conocimiento y experiencia a la totalidad de las comunidades de Oracle América Latina y en todo el mundo.

Este artículo ha sido revisado por el equipo de productos Oracle y se encuentra en cumplimiento de las normas y prácticas para el uso de los productos Oracle.