Iniciar sesión País Llamar

Menú

Oracle Technology Network / Artículos / Application Express

Framework para el Desarrollo

de Aplicaciones
Application Express Cambiar el estado de registros utilizando Cuadrículas Interactivas de Oracle Application
Business Intelligence Express 18.1 - Parte I
Cloud Computing Por Mónica Godoy Millán
Publicado en Septiembre 2018
Communications

Rendimiento y Disponibilidad Revisado por Mario Escobar

de Base de datos
Data Warehousing

.NET
Lenguajes de Programación Oracle Application Express es una herramienta que permite desarrollar aplicaciones asombrosas seguras, escalables y disponibles para
Dinámicos cualquier dispositivo. Nació en el 2004 como HTML DB 1.5 y ha evolucionado para ahora conocerse formalmente como Oracle
Application Express y dentro de la comunidad como Oracle APEX.
Embedded
Arquitectura Enterprise En la versión 5.1 se incluyeron las Cuadrículas Interactivas, las cuales fueron la evolución de las formas tabulares adicionando muchas de
Enterprise Management
las acciones incluidas en los Reportes Interactivos. Estas Cuadrículas permiten listar las columnas de una tabla o consulta SQL, así como
también crear, actualizar o borrar registros de una tabla. Adicionalmente, es posible crear relaciones Maestro – Detalle en los niveles que
Grid Computing sean necesarios.
Identidad y Seguridad
Chat
Java

Linux
Service-Oriented Architecture
SQL & PL/SQL
Virtualización

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Es común que en estas cuadrículas interactivas se requiera que los usuarios puedan cambiar el estado de uno o más registros. Una
opción puede ser señalar varios registros y dar clic en el botón correspondiente. Otra opción es que los usuarios puedan ejercer una
acción sobre un registro, con solo dar clic en el ícono del registro correspondiente.

En este primer artículo les mostraré como se puede diseñar una cuadrícula interactiva para cambiar el estado de los empleados
dinámicamente con el uso Acciones Dinámicas e íconos Font Awesome.
La versión utilizada en esta práctica es la versión 18.1.0.00.45.

Cuadrícula Interactiva

Lo primero que necesitamos es crear la región de tipo cuadrícula interactiva, con una consulta básica a la tabla de empleados. Chat

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Elementos

Seguidamente crear dos elementos, uno para contener el número del empleado si el usuario requiere activarlo. Otro para contener el
número del empleado si el usuario requiere inactivarlo.

Chat

Ahora, vamos a modificar la consulta SQL de la cuadrícula. Donde integraremos los iconos Font Awesome fa-thumbs-up y fa-thumbs-
down para que el usuario pueda cambiar el estado del empleado dando clic sobre los íconos, teniendo en cuenta los siguientes
escenarios:

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Si el empleado se encuentra Activo, solo se mostrará el ícono para que pueda inactivarlo.

Si el empleado se encuentra Inactivo, solo se mostrará el ícono para que pueda activarlo.

En caso de que no se haya establecido el estado, se mostrarán los dos íconos para que el usuario pueda ejecutar la acción
que requiera.

Consulta SQL

En la consulta se añaden los escenarios anteriormente descritos en una nueva columna llamada STATE_FA. Cuando el usuario haga clic
sobre uno de los íconos, la función de JavaScript asignará el número del empleado al elemento correspondiente (P4_ACTIVAR /
P4_INACTIVAR).

En la columna STATE aplicamos la función DECODE para mostrar la descripción del estado del empleado.

select EMPNO,

ENAME,

JOB,

MGR,

HIREDATE,

SAL,

COMM, Chat

DEPTNO,

ROWID,

DECODE(STATE,'I','Inactivo','A','Activo','Sin Estado') STATE,

(CASE

STATE

WHEN 'I' then '<a href=javascript:$s(''P4_ACTIVAR'','||EMPNO||');>

<i class="fa fa-thumbs-up"></i></a> '
WHEN 'A' then '<a href=javascript:$s(''P4_INACTIVAR'','||EMPNO||');>
<i class="fa fa-thumbs-down"></i></a> '

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 ELSE '<a href=javascript:$s(''P4_ACTIVAR'','||EMPNO||');>
<i class="fa fa-thumbs-up"></i></a>        ' ||
'<a href=javascript:$s(''P4_INACTIVAR'','||EMPNO||');>
<i class="fa fa-thumbs-down"></i></a>'

END) STATE_FA

from EMP

Chat

Tipo de la columna

Modificar el tipo de la columna a Expresión HTML, para que interprete el código HTML y JavaScript ingresado en la consulta SQL.

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Chat

Acción Dinámica

Ahora necesitamos crear dos acciones dinámicas para la activación e inactivación de los empleados.

Activación: Sobre el elemento P4_ACTIVAR, crear la acción dinámica cuando cambie el valor del elemento con la condición de que el
elemento no sea nulo.

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Chat

Adicionar dos acciones:

1. Actualizar la columna de estado del empleado

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 2. Refrescar la cuadrícula interactiva

Chat

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Inactivación: Sobre el elemento P4_INACTIVAR, crear la acción dinámica cuando cambie el valor del elemento con la condición de que
el elemento no sea nulo.

Chat

Adicionar dos acciones:

1. Actualizar la columna de estado del empleado

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 2. Refrescar la cuadrícula interactiva

Chat

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Finalmente tendremos la Cuadrícula Interactiva con los íconos para cada registro. Si la columna STATE no tiene valor se mostrarán los
dos íconos, si ya tiene valor solo se mostrará uno de los íconos.

Adicionalmente, podemos aplicar División de Control sobre la Cuadrícula, para que agrupe los registros de acuerdo con el estado de los
Empleados.

Chat

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 La interacción a través de los íconos Font Awesome que hemos añadido a la Cuadrícula permite al usuario final:

Identificar rapidamente el estado en que se encuentra un empleado.

Asignar el estado de los empleados. Chat

Activar ó inactivar un empleado.

Mantener la información de la Cuadrícula siempre actualizada después de haber activado ó inactivado los empleados.
Cambiar el estado de un empleado con un solo clic, sin requerir ejecutar otra acción como por ejemplo dar clic en el botón Guardar.

En el próximo artículo les mostraré como ejecutar una acción sobre varios registros en una Cuadrícula Interactiva, como por ejemplo
aprobar ó rechazar los registros marcados. Para esto personalizaremos la función JavaScript y utilizaremos Acciones Dinámicas para
ejecutar código PL/SQL.

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Mónica Godoy Millán tiene 10 años de experiencia en el desarrollo de software. Actualmente trabaja como consultora de tecnología
independiente y desarrolladora de aplicaciones web en Oracle APEX. Fundó el meetup de Oracle APEX Colombia en 2015 para dar a
conocer esta gran herramienta en su país y de esa manera impulsar las empresas. Ha sido ponente en conferencias como: OTN y ODT
Colombia y es miembro activo de Oracle Developer Community, y blogger en https://community.oracle.com/blogs/monicagodoy/

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.

E-mail this page Printer View

Contáctenos Cloud Acciones principales Temas clave

Ventas en EE. UU.: Descripción general de Cloud Descargue Java ERP, EPM (Finanzas)
+1.800.633.0738 Solutions Descargue Java para HCM (RR. HH. y talento)
Reciba una llamada de Oracle Software (SaaS) desarrolladores
Mercadeo
Contactos globales Plataforma (PaaS) Pruebe Oracle Cloud CX (Ventas, servicio, comercio)
Directorio de soporte Infraestructura (IaaS) Suscríbase a los correos
Soluciones sectoriales
electrónicos Chat
Datos (DaaS) Base de datos
Acerca de Oracle Prueba gratuita de la nube
Noticias MySQL
Información de la empresa Middleware
Comunidades Eventos Sala de prensa
Java
Revistas
Carreras Oracle Code Sistemas de ingeniería
JavaOne Historias de éxito de los clientes
Blogs
Todos los eventos de Oracle

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 © Oracle Mapa del sitio Términos de uso y privacidad Cookie Preferences Opciones de publicidad

Chat

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD