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’:
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:
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:
create function GET_LINK_CHNG_ACTIVE(
p_empno in emp_test.empno%type,
p_active in emp_test.active%type,
p_img_prefix in varchar2
) return varchar2
is
v_apex_url varchar2(2048);
v_img_file varchar2(255);
v_img varchar2(2048);
v_link varchar2(4000);
begin
v_apex_url := 'javascript:chng_confirm('||p_empno||', '''||p_active||''')';
case p_active
when 'YES' then
v_img_file := 'switch_on_2.gif';
else
v_img_file := 'switch_off_2.gif';
end case;
v_img := '<img src="'||p_img_prefix||v_img_file||'"'||
' alt="EMP Active: '||p_active||'"'||
' title="EMP Active: '||p_active||'"'||
' style="vertical-align:middle">';
v_link := '<a href="'||v_apex_url||'">' || v_img || '</a>';
return v_link;
exception
when others then
return null;
end GET_LINK_CHNG_ACTIVE;
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:
Al guardar estos cambios y volver a cargar el informe de empleados debería aparecernos algo similar a lo siguiente:
¡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:
Una vez aceptados los cambios, si volvemos a cargar el informe deberíamos encontrarnos con una imagen como la siguiente:
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:
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.
desc EMP 