Interactive Report + Column confirm button

Introducción

Vamos a convertir una columna de un Interactive Report (IR) de APEX en un botón de cambio de estado con confirmación previa.

Partimos de un IR convencional, sobre una copia de la tabla EMP a la que hemos añadido una columna ACTIVE con el valor por defecto ‘YES’:

apex_ir_emp_step01

Las imágenes que nos servirán para el botón se han cargado en el apartado de recursos compartidos de la aplicación (Shared Components) asociadas a la aplicación:

apex_ir_emp_step02

Nota: Es importante acordarse de descargar los scripts de instalación y desintalación de cada una de las imágenes para incluirlos en el apartado “Supporting Objects”. De esta forma, las imágenes se incorporarán de manera automática a los procesos de exportación / importación de la aplicación.

Paso 1: Preparamos el enlace

En nuestro ejemplo vamos a reemplazar la columna EMP.ACTIVE del informe por un botón que nos permita cambiar el valor entre ‘YES’ y ‘NO’ pulsando sobre él. Además, incluiremos una petición de confirmación previa para evitar que se ejecute por error.

El primer paso es crear una función PL/SQL que nos facilite la generación del código HTML con el que vamos reemplazar la información actual de la columna. Las siguientes líneas nos servirán:

En este ejemplo se construye un enlace HTML con las siguientes características:

  • Ejecuta una función JavaScript para solicitar la confirmación del usuario.
  • Incluye una etiqueta de imagen con la referencia al fichero cargado en Shared Componens y que está asociado al estado actual del registro:
    • La imagen “switch_on_2.gif” para los valores ‘YES’.
    • La imagen “switch_off_2.gif” para el resto de valores.

Para indicar la ubicación de la imagen se utiliza el parámetro “p_img_prefix”. Por norma general, las imágenes utilizadas en una aplicación APEX se suelen alojar en uno de estos tres lugares:

  • #WORKSPACE_IMAGES#: Cargadas en Shared Components y asociadas al espacio de trabajo.
  • #APP_IMAGES#: Cargadas en Shared Components y asociadas a la aplicación.
  • #IMAGE_PREFIX#: Ruta definida para las imágenes estáticas. Por defecto es “/i/”.

Una vez compilada la función, debemos modificar la consulta del informe para invocarla en lugar de la columna ACTIVE:

apex_ir_emp_step03

Al guardar estos cambios y volver a cargar el informe de empleados debería aparecernos algo similar a lo siguiente:

apex_ir_emp_step04

¡Vamos bien! Tal y como estaba configurada la columna ACTIVE en el informe, APEX no puede interpretar el código HTML que está generando la función GET_LINK_CHNG_ACTIVE. Pero esto tiene fácil solución. Solo tenemos que editar los atributos del informe y sustituir el valor “Display as a text” por “Standard Report Column” en la definición de esta columna:

apex_ir_emp_step05

Una vez aceptados los cambios, si volvemos a cargar el informe deberíamos encontrarnos con una imagen como la siguiente:

apex_ir_emp_step05

Paso 2: Control de la acción

De momento, si pulsamos sobre la imagen no ocurrirá nada. El código HTML que hemos generado invoca una función JavaScript que aun no hemos declarado. Para que nuestra aplicación tenga constancia de ella deberemos acceder a las propiedades de la página y en el espacio “Function and Global Variable Declaration” incluir el código necesario:

function chng_confirm(p_empno, p_active) {
  apex.confirm(
    'Change EmpNO '+p_empno+' Active status?',
    {request:'CHNG_STAT',
     set:{'P25_EMPNO_CHNG_STAT':p_empno,
          'P25_ACTIVE_CHNG_STAT':p_active}
    }
  );
}

Esta función se encarga de solicitar la confirmación al usuario y, en caso de obtenerla, ejecutar el submit de la página asignando los siguientes valoresde:

  • Item P25_EMPNO_CHNG_STAT = p_empno
  • Item P25_ACTIVE_CHNG_STAT = p_active
  • REQUEST = ‘CHNG_STAT’

Estos Items no existen aun en nuestra página. Así que vamos a crearlos con las siguientes características:

apex_ir_emp_step06

Nota: Es importante tener en cuenta que la propiedad “Value Protected” de cada un de estos Items debe ser ‘NO’ para permitir al código JavaScript modificar su valor después de que el usuario confirme la acción.

Paso 3: Modificación de los datos

Por último, deberemos crear el proceso que se encargue de ejecutar la acción y modifique los datos pertinentes. Es recomendable que este proceso se encuentre compilado en base de datos y, de esta forma, separar las operaciones sobre el modelo de datos del apartado visual. El código podría ser como el que sigue:

create procedure SET_ACTIVE (
    p_empno  in number,
    p_active in varchar2
    )
as
begin

  if p_empno is not null and p_active is not null
  then

    update emp_test set
      active = decode(p_active,
                      'YES', 'NO',
                      'NO', 'YES',
                      active)
    where empno = p_empno
      and active = p_active;

  end if;

end SET_ACTIVE;

Por último, necesitamos indicar al motor de APEX cómo y en qué momento debe ejecutar este bloque de código. De esto se va a encargar un proceso de página, o Page Processing, con las siguientes características:

  • Type: “PL/SQL anonymous block”
  • Process point: “On Submit and Before Computation”
  • Conditions: “Request = Expression 1” y con la expresión igual a la cadena’CHNG_STAT’ que hemos indicado anteriormente en nuestra función JavaScript.

El código PL/SQL a ejecutar en este caso es muy breve:

begin
  SET_ACTIVE(:P25_EMPNO_CHNG_STAT, :P25_ACTIVE_CHNG_STAT);
end;

Si volvemos a cargar el informe, ya podremos activar y desactivar registros de empleados tras aceptar la confirmación que se nos va a solicitar.

apex_ir_emp_confirm

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s