===========================================================================
En este post se adjuntan 4 archivos. En el siguiente post adjunto el resto.
Archivos que son los que añado en el proyecto como archivo adjunto para que los guarde siempre en la caché de Velneo :
- 4 archivos JS
- 1 archivo para el CSS del visor de firma ‘pad’.
En el fichero app.js está modificada la última función para que se pueda insertar en el visor HTML del formulario V7 el churro de la firma en base64, así como para que Velneo V7 se entere de que tiene que capturar y grabar la firma (conexión de evento Link clicked).
En V7 lo que tengo es lo siguiente :
-
Un formulario de Albaranes de Venta.
-
Dentro de ese formulario 2 visores HTML. Uno es para el proceso de firmar con el ‘pad’ de firma. El otro es para mostrar la firma ya capturada y grabada en la tabla (en un objeto texto). Por tanto ambos visores, en mi caso, tienen condiciones de visibilidad. El primer visor tiene la condición de que el albarán de venta exista y esté vacío el campo objeto texto (aún no se ha firmado). El segundo tiene la condición de visibilidad de que el campo objeto texto no esté vacío (significa que ya se ha firmado y grabado la firma en el albarán).
-
En el primer visor HTML el contenido lo tengo como Texto Html, con el siguiente HTML (esto pinta el ‘pad’ de firma en el visor HTML, con su CSS bonito y tal) :
"<!doctype html>
<html lang=‘es’>
<head>
<meta charset=‘utf-8’>
<title>Signature Pad</title>
<meta name=‘description’ content=‘Signature Pad - HTML5’>
<meta name=‘viewport’ content=‘width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no’>
<meta name=‘apple-mobile-web-app-capable’ content=‘yes’>
<meta name=‘apple-mobile-web-app-status-bar-style’ content=‘black’>
<link rel=‘stylesheet’ href=\cfile:///"+sysCacheClientPath+"signature-pad.css\c>
</head>
<body onselectstart=‘return false’>
<canvas></canvas>
C A P T U R A D E L A F I R M A
<button class='button clear' data-action='clear'>Limpiar</button>
<button class='button save' data-action='save'>Guardar</button>
<script>
function simulateClick(id) {
var evt = document.createEvent(‘MouseEvents’);
evt.initMouseEvent(‘click’, true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
var cb = document.getElementById(id);
cb.dispatchEvent(evt);
}
</script>
<script src=\cfile:///"+sysCacheClientPath+“signature_pad.js\c></script>
<script src=\cfile:///”+sysCacheClientPath+"app.js\c></script>
</body>
</html>"
-
En el segundo visor HTML el contenido lo tengo como URL. Y en este caso en contenido tengo el campo objeto texto en el que se ha guardado el churro de la firma. Recuerda que el JS de la firma la devuelve como URL.
-
En el formulario también tengo dos manejadores de evento (que también te adjunto el código JS de cada uno de ellos en PDF) :
-
El manejador JS “POS_INI_JS” (se dispara en una conexión de evento Post_Inicializado del formulario)
-
El manejador JS “CLK” (se disparará en una conexión de evento Link clicked del primer visor HTML)
Y ya está, esto es todo.
El manejador JS “CLK” está montado de modo que al darle al botón de “Guardar” graba la URL de la firma obtenida en el campo objeto texto (en mi caso en una tabla extendida de albaranes de venta) y a continuación cierra el formulario principal del albarán de venta. Al volver a abrir el formulario del albarán de venta ya aparece el segundo visor HTML con la imagen de la firma digitalizada (URL capturada y guardada en la tabla extendida). Supongo que se podría mejorar para que al guardar la firma ya refresque y aparezca el segundo visor HTML con la firma capturada y dibujada.
Por último, en el informe (albarán a imprimir) con el vReport, el control que incrusta la firma es una imagen, URL del origen de datos, apuntando al campo objeto texto que contiene grabada la URL, y en formato de imagen le tengo puesto Codificado Base64.