2. Autenticación · OpenOffice (.odt) AcroForm (.pdf) El tipo de plantilla recomendado es PDF, puesto que este formato soporta la posibilidad de modificar los datos del mensaje en

1. Introduccióni. Control de cambios

2. Autenticación3. Interfaz4. Mi perfil5. Redactar6. Pendientes7. Borradores8. Finalizadas9. Buscador

10. Plantillasi. Uso de plantillas

i. Microsoft Word (.docx)ii. OpenOffice (.odt)iii. AcroForm (.pdf)

i. Generar pdf rellenable mediante Acrobatii. Convertir plantilla .docx a PDF rellenable mediante LibreOffice

ii. Uso de formulariosi. Formulario baseii. Formulario avanzadoiii. Diseñador de formularios

11. Dispositivos12. Guías de Uso

i. Dispositivos externosii. Verificar documento firmado

Tabla de contenido

2

La solución viafirma documents está compuesta por un backend con un panel de gestión de documentos y dispositivos,y sus apps nativas para iOS y Android.

En esta guía se describe el modo de uso del backend de viafirma documents para usuarios finales.

Si lo deseas puede descargar este manual en formato PDF aquí.

Uso del backend de viafirma documents

3Introducción

http://doc.viafirma.com/documents/user/book_es.pdf

Esta documentación técnica está sujeta a modificaciones diarias, y alguna información o configuración avanzada podríano estar reflejada. Consulte en cualquier caso con el equipo de soporte técnico.

Revisión Fecha

Actualización 21-julio-2016

Servicios Versión

Backend 3.2.7

App iOS 3.2.2

App Android 3.2.1

DB Documents (backend) 0.0.63

Biometric signature verifier 1.4.1

Fecha Cambio

21-jul-16 Nuevo capítulo 11 Guías de Uso

17-mar-16 Versión inicial del manual de usuario

Control de cambios

Últimas versiones liberadas

Últimos cambios

4Controldecambios

La autenticación en la aplicación se realizará a través de usuario y contraseña.

En caso de no recordar su contraseña, puede solicitar su recuperación desde el apartado ¿Has olvidado tucontraseña?.

Introduzca su correo o su nombre de usuario y recibirá un correo electrónico con un enlace para restablecer lacontraseña.

Autenticación

5Autenticación

Desde el menú lateral podemos acceder a las siguientes pantallas:

Redactar: Creación de un nuevo mensaje.Pendientes: Listado de mensajes no finalizados.Borradores: Listado de mensajes en estado borrador.Finalizadas: Listado de mensajes finalizados.Buscador: Búsqueda avanzada de mensajes.Plantillas: Listado de plantillas asociadas al usuario.Dispositivos: Listado de dispositivos del usuario.

Viafirma documents soporta diferentes idiomas en su interfaz. Desde este apartado puede seleccionar el idioma amostrar.

Acceso al perfil del usuario autenticado en viafirma documents.

Interfaz

Menú lateral

Selección de idioma

Acceso a mi perfil

6Interfaz

Cierra la sesión actual del usuario en viafirma documents.

Cerrar sesión

7Interfaz

Desde este apartado el usuario puede consultar sus datos personales y modificar su contraseña de acceso.

Mi perfil

8Miperfil

Desde esta pantalla se podrá redactar una nueva petición.

El proceso se realiza en tres pasos:

Selección de plantillaCompletar formularioSelección de destinatario

Se mostrará un listado con las plantillas sobre las que el usuario tiene permiso.

Existe la posibilidad de filtrar el listado de plantillas introduciendo el texto a filtrar en el cuadro de búsqueda y pulsandoBuscar.

Para seleccionar una plantilla pulse en el botón de la plantilla deseada.

En esta pantalla se rellenarán los datos del formulario definido en la plantilla. Será necesario rellenar al menos aquellosque estén marcados como obligatorios (*).

Además se podrá seleccionar si la petición requiere origen mixto y si los campos del formulario se mantendrándeshabilitados.

Redactar

Selección de plantilla

Completar formulario

9Redactar

Para acceder a la selección de destinatario pulsar Siguiente.

En esta pantalla existe la posibilidad de guardar la petición en borrador para proceder al envío en otro momento. Paraello se debe pulsar, una vez completado el formulario, el botón Guardar borrador.

En esta pantalla se seleccionará el dispositivo al que enviar la petición. Para ello es necesario seleccionar la aplicacióny el usuario destinatarios previamente.

Los posibles destinatarios dependerán el del rol del usuario logado. De forma que pueden darse tres casos:

User: Sólo pueden enviarse peticiones a si mismo.Dispatcher: Puede enviar a todos los usuarios de su grupo.Administrador: Puede enviar a todos los usuarios.

Selección de destinatario

10Redactar

Una vez seleccionado el dispositivo se debe pulsar en Continuar para proceder al envío de la petición.

En esta pantalla también existe la posibilidad de guardar la petición en borrador para proceder al envío en otromomento. Para ello se debe pulsar el botón Guardar borrador.

11Redactar

En esta pantalla se muestra el listado de peticiones recibidas por el usuario pero que no han sido completadas.

Existe la posibilidad de filtrar el listado de peticiones introduciendo el texto a filtrar en el cuadro de búsqueda y pulsandoBuscar. Para mostrar el listado completo pulsamos Mostrar todas.

Las acciones que se pueden realizar sobre cada petición son:

Acceder al detalle de la petición.

Rechazar la petición existente y crear una nueva petición en estado borrador con los mismos datos que estapetición.

Rechazar la petición.

Al pulsar sobre el botón de una petición accedemos al detalle de la misma. En esta pantalla además de poderconsultar los datos de la petición podemos descargar el JSON o el XML de la misma.

Pendientes

Ver detalle de la petición

12Pendientes

13Pendientes

Al pulsar el botón de una petición se rechaza la petición existente y se crea una nueva petición en estado borradorcon los mismos datos que le petición rechazada.

Al pulsar el botón de una petición se solicita la confirmación del rechazo de la petición. En caso afirmativo lapetición se rechaza.

Rechazar petición y crear copia

Rechazar petición

14Pendientes

En esta pantalla se muestra el listado de peticiones guardadas como borrador en el apartado Redactar y que no hansido enviadas aún.


Sobre cada borrador se pueden realizar las siguientes acciones:

Continuar con la petición. Se muestra la pantalla Completar formulario del apartado Redactar con los datos deguardados de la petición.

Eliminar el borrador.

Borradores

15Borradores

En esta pantalla se muestra el listado de peticiones finalizadas por el usuario.


Se podrá acceder al detalle de cada una de estas peticiones, para lo cual hay que pulsar el botón .

En la pantalla de detalle de la petición además de poder consultar los datos de la petición podemos descargar el JSON,el XML o el PDF firmado de la misma.

Finalizadas

16Finalizadas

17Finalizadas

Además también se podrá acceder al detalle de la firma realizada, para ello debe pulsarse en el código de la firma amostrar. Una petición puede tener más de una firma.

En la pantalla de detalle de firma se podrán consultar los datos de la firma realizada.

18Finalizadas

19Finalizadas

20Finalizadas

En esta página se puede realizar una búsqueda avanzada de peticiones. Por defecto estarán activos los filtros Códigode usuario solicitante igual al usuario autenticado y código de usuario destinatario igual al usuario autenticado. Deforma que un usuario sólo tendrá acceso a aquellas peticiones en las que él es el destinatario o el remitente.

Además se podrá filtrar por los siguientes conceptos:

Aplicación de destinatarioAplicación solicitanteCódigo de firmaCódigo de grupoCódigo de plantillaCódigo del dispositivoCódigo del mensajeDescripción del mensajeEstado de transferenciaEstado del mensajeFecha de actualizaciónFecha de creaciónResultado de transferenciaTítulo del mensaje

Las acciones que se pueden realizar sobre cada petición son:

Acceder al detalle de la petición. Para todas las peticiones.

Buscador

21Buscador

Rechazar la petición existente y crear una nueva petición en estado borrador con los mismos datos que estapetición. Sólo para peticiones pendientes (estado WAITING)

Rechazar la petición. Sólo para peticiones pendientes (estado WAITING)

22Buscador

En esta pantalla se muestra el listado de plantillas asociadas al usuario.

Existe la posibilidad de filtrar el listado de plantillas introduciendo el texto a filtrar en el cuadro de búsqueda y pulsandoBuscar. Para mostrar el listado completo pulsamos Mostrar todas.

Un usuario podrá realizar las siguientes acciones sobre aquellas plantillas de las que es propietario:

Editar la plantilla.

Eliminar la plantilla.

Además podrán crear nuevas plantillas y descargar el listado de plantillas en formato xls.

Los usuarios podrán añadir nuevas plantillas, para ello deben pulsar en .

Con ello accederá a la pantalla de gestión de plantillas. En esta página el usuario rellenará los datos propios de laplantilla e incorporará la plantilla y el formulario asociados a la misma.

Para más información sobre la creación de plantillas y formularios ver los apartados 9.1 Gestión de plantillas y 9.2Gestión de formularios

Plantillas

Añadir una nueva plantilla

23Plantillas

Viafirma documents soporta los siguientes formatos de plantillas:

Microsoft Word (.docx)OpenOffice (.odt)AcroForm (.pdf)

El tipo de plantilla recomendado es PDF, puesto que este formato soporta la posibilidad de modificar los datos delmensaje en la app, sin necesidad de tener conexión a internet.

Uso de plantillas

24Usodeplantillas

Para definir las variables en un documento de word se pueden emplear dos opciones:

Con prefijo "$"Campo "merge field"

Para insertar en nuestro documento una variable sólo será necesario insertar en el lugar deseado el nombre de lavariable precedida de $, por ejemplo $client_surname.

Nombredecliente:$client_name

Apellidosdelcliente:$client_surname

Importedelacompra:$purchase_amount

Es necesario añadir las variables al diccionario del corrector ortográfico para que este no las detecto como palabrasincorrectas, dado que esto genera problemas a la hora de sustituir las variables por sus correspondientes valores.

Microsoft Word (.docx)

Uso del prefijo "$"

25MicrosoftWord(.docx)

Otro mecanismo de insertar variables en nuestra plantilla será haciendo uso del merge field. Y a diferencia delmecanismo anterior, para insertar una nueva variable debemos posicionarnos en el lugar deseado y seleccionar laopción insertar campo del tipo Merg Field, que en cualquier caso dependerá de la versión del Editor de Texto con elque se trabaje.

Uso merge field


La ilustración anterior muestra explica el acceso a la opción merge field sobre una versión de Microsoft Word 2007 paraMac.


Para insertar en nuestro documento una variable sólo será necesario insertar en el lugar deseado el nombre de lavariable precedida de $, por ejemplo $client_surname.

Nombredecliente:$client_name

Apellidosdelcliente:$client_surname

Importedelacompra:$purchase_amount

OpenOffice (.odt)

Uso del prefijo "$"

28OpenOffice(.odt)

Viafirma documents puede generar documentos a partir de ficheros pdf con formularios. Concretamente se soportan lossiguientes tipos de campos:

Campo de textoCasilla de verificación con estilo cruzBotón de radio con estilo cruz

Existe una restricción a la hora de definir los diferentes campos que componen la plantilla y es que el nombre de lamisma debe empezar por $. De forma que para un formulario en el que se ha definido un item con key nombre el valorde la variable asociada en el pdf será $nombre.

Toda plantilla que desee emplearse de forma completamente offline deberá ser de este tipo.

Existen varias formas para crear pdf rellenables, en los siguientes enlaces se muestran algunas de ellas:

Usando Acrobat Reader ProfessionalUsando OpenOffice

AcroForm (.pdf)

29AcroForm(.pdf)

A continuación se describen los pasos necesarios para crear un pdf rellenable empleando Adobe Acrobat Professional.

Una vez abierto el pdf hemos de seleccionar la opción Crear PDF.

Para crear un pdf rellenable hemos de partir de un fichero existe de alguno de los tipos soportados, al pulsar crear seabrirá el explorador para seleccionar el fichero de origen.

Generar pdf rellenable mediante Acrobat

1) Crear PDF

30AcroForm(.pdf)

NOTA:NoempleamoslaopciónCrearformularioPDFporqueloscamposquesecreanconesta

funcionalidadsonincompatiblesconnuestraaplicación.

En nuestro ejemplo vamos a emplear un pdf no rellenable generado con word a partir de este .docx.

El programa realizará la conversión del fichero de origen a un pdf.

31AcroForm(.pdf)

Encasodequeelficherodeorigenestéenformatopdfestepasonoseránecesario,

tansólodeberemosabrirelpdfconelprograma.

Para ello seleccionamos Herramientas / Formularios / Editar

La aplicación detectará que no hay campos actualmente en el formulario y nos preguntará si queremos que los detecteautomáticamente. Seleccionaremos No, dado que los campos creados automáticamente presentan problemas para suuso en viafirma documents.

En tareas pulsamos en Agregar nuevo campo y dentro del listado seleccionamos Campo de texto.

2) Crear formulario

3) Añadir campos

3.1) Añadir campo de tipo texto

32AcroForm(.pdf)

Al colocar el ratón encima del pdf veremos que el icono del ratón se ha modificado por la caja de texto, de forma quedeberemos colocar la caja en el lugar indicado pulsando con el botón izquierdo del ratón.

Por ejemplo lo colocaremos debajo de Campo de Texto 1.

Se mostrará un formulario para introducir el nombre del campo este valor será el nombre del key asociado a la variableen el formulario de la plantilla con $ delante. En nuestro ejemplo será $texto1.

Ya tenemos el campo añadido al formulario. Ahora podemos personalizarlo si lo deseamos.

33AcroForm(.pdf)

Por un lado, se puede modificar su tamaño mediante los puntos que aparecen en los bordes de la caja de texto.

También se puede modificar las propiedades de los campos (Botón derecho / propiedades), por ejemplo el tamaño ytipo de fuente en la pestaña Aspecto. Puede ver más información sombre las propiedades de los campos en la páginade ayuda de Acrobat.

En tareas pulsamos en Agregar nuevo campo y dentro del listado seleccionamos Casilla de verificación.

Al colocar el ratón encima del pdf veremos que el icono del ratón se ha modificado por la casilla de verificacion, deforma que deberemos colocarla en el lugar indicado pulsando con el botón izquierdo del ratón.

Por ejemplo lo colocaremos debajo de casilla de verificación.

Se mostrará un formulario para introducir el nombre del campo este valor será el nombre del key asociado a la variable

3.2) Añadir campo Casilla de verificación

34AcroForm(.pdf)

http://help.adobe.com/es_ES/acrobat/pro/using/WSC9CAD508-1941-43db-B599-2DCBF7BFC055.w.html

en el formulario de la plantilla con $ delante. En nuestro ejemplo será $verificacion.

Ya tenemos el campo añadido al formulario. Ahora podemos personalizarlo si lo deseamos.


También se puede modificar las propiedades de los campos (Botón derecho / propiedades), por ejemplo el tamaño defuente en la pestaña Aspecto.

Importante: Es necesario configurar el estilo de la casilla de verificación, para ello dentro de las propiedades del campoaccedemos a la pestaña Opciones y en el campo Estilo de la casilla de verificación seleccionamos Cruz.

Otro punto importante que puede modificarse es el valor que debe tener el campo para que la casilla de verificaciónaparezca como activa. Este dato se puede modificar en el campo Valor de exportación de la pestaña opciones.

Puede ver más información sombre las propiedades de los campos en la página de ayuda de Acrobat.

35AcroForm(.pdf)


En tareas pulsamos en Agregar nuevo campo y dentro del listado seleccionamos Casilla de verificación.

Al colocar el ratón encima del pdf veremos que el icono del ratón se ha modificado por el votón, de forma quedeberemos colocarla en el lugar indicado pulsando con el botón izquierdo del ratón.

Por ejemplo lo colocaremos debajo de Botón de Radio.

3.3) Añadir campo de tipo botón de radio

36AcroForm(.pdf)

Se mostrará un formulario para introducir el nombre del grupo este valor será el nombre del key asociado a la variableen el formulario de la plantilla con $ delante. En nuestro ejemplo será $radio. En el mismo formulario se debe rellenar elcampo Opción del botón de radio, este será el valor que debe tomar la variable para que este campo esté activo.

Ya tenemos el botón de radio añadido al formulario. Ahora podemos personalizarlo si lo deseamos.


También se puede modificar las propiedades de los campos (Botón derecho / propiedades), por ejemplo el tamaño defuente en la pestaña Aspecto.

Importante: Es necesario configurar el estilo del botón, para ello dentro de las propiedades del campo accedemos a lapestaña Opciones y en el campo Estilo del botón seleccionamos Cruz.

37AcroForm(.pdf)

En esta misma pestaña puede modificarse el valor de Opción del botón de radio que vimos anteriormente.

Puede ver más información sombre las propiedades de los campos en la página de ayuda de Acrobat.

Un elemento de tipo radio debe tener más de un elemento. Así que añadiremos el número de elementos que sedeseen. En nuestro ejemplo además del ya añadido añadiremos otro con el valor No.

Una vez que se han creado todos los campos del formulario se debe pulsar en Cerrar edición del formulario.

4) Cerrar el formulario

38AcroForm(.pdf)


Ya tenemos preparado nuestro pdf, tan solo tenemos que guardarlo en nuestro equipo, para ello pulsamos el botón de

guardar .

Puede descargar la plantilla de ejemplo generada y el formulario asociado a la misma aquí.

5) Guardar el pdf

Ejemplos

39AcroForm(.pdf)

Estos son los pasos para convertir una plantilla docx en un formulario rellenable pdf, utilizando LibreOffice.

Partiendo de una plantilla docx similar a la siguiente:

1. Abrimos el panel de control de formularios en el menú View → Toolbars → Form Controls

Convertir plantilla .docx a PDF rellenable mediante LibreOffice

40AcroForm(.pdf)

2. En la segunda columna, tercera fila del panel vemos la herramienta para crear cajas de texto, y crearemos una porcada campo:

41AcroForm(.pdf)

3. Para asociar la caja de texto a un campo de formulario, pulsaremos el botón derecho del ratón para abrir el menú deedición, y seleccionaremos la opción Control :

42AcroForm(.pdf)

Veremos este panel de opciones para configurar la caja de texto:

43AcroForm(.pdf)

4. Debemos editar obligatoriamente la opción Name que deberá ser la key del campo:

44AcroForm(.pdf)

5. Además, podremos configurar algunos aspectos de la caja de texto, como la posición exacta en el formulario,anchura, altura, color de fondo, borde, etc.

6. Para configurar el tipo de fuente, entraremos en las opciones correspondientes donde podremos editarla:

![Editar fuente]../resources/libreoffice_9_editar_fuente.png)

45AcroForm(.pdf)

Así como modificar el color de la fuente:

7. Una vez creados todos los campos, tendremos que exportar el documento a formato PDF. Para ello, buscamos laopción en el menú File → Export as PDF…

46AcroForm(.pdf)

Veremos este panel de opciones para exportar el documento:

47AcroForm(.pdf)

Debemos asegurarnos de marcar 'Create PDF form' en formato FDF, y permitiendo nombres de campos duplicados.

8. Seleccionamos la ruta donde queremos crear el documento PDF y ya estará disponible para subirlo como plantillaPDF en la aplicación documents.

48AcroForm(.pdf)

El sistema permite crear formularios para ser usados como entrada de datos desde el backend, una aplicación deterceros o el propio dispositivo móvil.

El formulario se define en formato JSON, y en esencia, contendrá tantas variables de datos como se hayan definido ensu plantilla asociada.

Podremos contar con dos clases de formularios:

1. Formulario Base2. Formulario Avanzado

Se explican en los siguientes capítulos.

Además existe una herramienta visual para la creación o modificación de formularios. Ver punto Diseñador deformularios.

Uso de formularios

49Usodeformularios

Para construir un Formulario Base asociado a una plantilla seguiremos los siguientes pasos:

1. Partimos de una plantilla registrada en el sistema.2. Generamos desde el backend el formulario asociado a la plantilla.

Con esto, ya tendremos un FORMULARIO BASE en formato JSON asociado a nuestra plantilla, lista para ser usada.

Un formulario base mostrará cada variable como tipo de elemento texto, sin ningún tipo de validaciones o diseños.

Formulario Base

50Formulariobase

Para dotar al formulario de validaciones, formato enriquecido con distintos elementos html y obtener un FormularioAvanzado, tendremos dos opciones:

usar el diseñador de formularioseditar manualmente del JSON

Ambas opciones se explican en los siguientes capítulos.

51Formulariobase

Un formulario avanzado podrá contener formato de datos, validación de datos, listas relacionadas, etc. Todas estaspropiedades se describen a continuación.

Tipo de DatosValidación de DatosCallback

Caja de texto que valida si el texto introducido es un email con formato correcto.

{

"key":"email",

"type":"text",

"label":"Email",

"placeHolder":"insertemail",

"size":"33",

"validation":"email"

}

Formulario Avanzado

Tipo de Datos

Email

52Formularioavanzado

Como se muestra en la imagen, el teclado muestra la @ para facilitar la introducción del correo.

Caja de texto que habilita el teclado númerico para facilitar al usuario la introducción de un número de telefóno.

{

"key":"number",

"type":"tel",

"label":"Teléfono",

"placeHolder":"insertphone",

"size":"33"

}

Teléfono


Como se muestra en la imagen, se habilita el teclado de teléfono.

Muestra elemento calendario.

{

"key":"date",

"type":"date",

"label":"Date",

"placeHolder":"date",

"size":"33"

}

Fecha


Muestra elemento del tipo fecha/hora.

{

"key":"datetime",

"type":"datetime",

"label":"Datetime",

"placeHolder":"datetime",

"size":"33"

}

Fecha/Hora


Muestra elemento del tipo hora.

{

"key":"time",

"type":"time",

"label":"Time",

"placeHolder":"time",

"size":"33"

}

Hora


Muestra la fecha actual del dispositivo, y no permite su edición.

{

"key":"today",

"type":"todayText",

"format":"%w-%d%n%y",

"monthNames":["January","February","March","April","May","June","July","August","September","October"

"dayNames":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]

}

Formato por defecto: "%d/%m/%y"

Posibles Valores:

d: Day

Fecha Actual


m: Month numbern: Month namew: Day namey: Full yearH: HoursM: MinutesS: Secondsi: ISO date

Este elemento además permite los atributos update e increment.

{

"key":"today",

"type":"todayText",

"increment":"30",

"update":"expire_date"

}

Según el ejemplo anterior, el formulario se cargaría con la fecha actual + "30 días", y además actualizaría el valor delcampo "expire_date", con la fecha de expiración del contrato, contando 30 días a partir de su formalización.

Habilita el teclado númerico y sólo permite valores númericos.

{

"key":"number",

"type":"number",

"label":"Number",

"placeHolder":"insertnumber",

"size":"33"

}

Número


Carga la caja de texto con un número aletario de 17 dígitos.

{

"key":"randomnumber",

"type":"text",

"label":"RandomNumber",

"random":"true"

}

Habilita caja de texto para un mayor contenido que las cajas de texto del tipo input text.

La longitud permitida se define con el atributo height, y éste se mide en píxeles. Su valor por defecto será de 100, elcual no hay que confundir con el atributo size, al igual que para otros elementos, se usa para definir el tamaño del

Número aleatorio

Textarea


elemento en relación al formulario, y se mide en %. Por ejemplo, si se define un valor de "50%", el elemento ocupará lamitad de la pantalla disponible.

{

"key":"textarea",

"type":"textarea",

"label":"Textarea",

"size":"100",

"height":"120",

"placeHolder":"Thisisatextarea"

}

Muestra el conjunto de valores contenidos en la lista informada dentro del JSON.

{

"key":"select1",

"type":"select",

"label":"SelectSample",

"list":"combos"

}

Lista precargada para el Select

La lista que alimentará al select del ejemplo 1 deberá definirse al principio del JSON tal y como se muestra en elsiguiente ejemplo:

"lists":{

"combos":["Value1","Value2","Value3"]

}


{

"key":"checkbox1",

"type":"checkbox",

"label":"Checkboxes",

"list":"checkboxes"

}

Devolvemos string de lista de los valores seleccionados separados por el separador "|"

Lista precargada para el Checbox

Select (lista)

Checkbox


La lista que alimentará al checkbox anterior deberá definirse al principio del JSON tal y como se muestra en el siguienteejemplo:

"lists":{

"checkboxes":["Value1","Value2","Value3"]

}


{

"key":"radios1",

"type":"radio",

"label":"Radios",

"list":"radios"

}

Lista precargada para el Radio

La lista que alimentará la lista de valores del radio del ejemplo anterior deberá definirse al principio del JSON tal y comose muestra en el siguiente ejemplo:

"lists":{

"radios":["Value1","Value2","Value3"]

}

¿Cómo definir varias listas precargadas?

Para alimentar varias listas que serán usadas en distintos elementos del formularios, y siguiendo los ejemplosanteriores, se podrán informar de la siguiente forma:

"lists":{

"combos":["Value1","Value2","Value3"],

"checkboxes":["Value1","Value2","Value3"],

"radios":["Value1","Value2","Value3"]

}

Los selects pueden estar vinculados de forma que los valores mostrados en cada uno dependan de los seleccionadosen un select anterior, como la típica selección de provincia y con ella se recarga el select de municipios que pertenecena esa provincia.

Radio

Listas Vinculadas


Para su uso nos ayudaremos del siguiente ejemplo:

En 1er lugar definimos la lista padre:

"lists":{

"listaPaises":["España","Colombia"]

}

En segundo lugar definimos la listas hijas, y para ello usaremos el elemento nestedLists.

"nestedLists":{

"listaComunidades":{

"España":["Andalucía","Galicia","Aragón"],

"Colombia":["Atlántico","Antioquia","Cundinamarca"]

}

}

Y por último definimos las listas:

"items":[

{

"key":"comboPaises",

"type":"select",

"label":"Países",

"update":"comunidades",

"list":"listaPaises"

},

{

"key":"comboComunidades",

"type":"select",

"label":"Comunidades",

"nestedList":"listaComunidades"

}]

Observar que en el segundo combo no es necesario el atributo update porque este combo no actualiza a ningún otrocombo hijo. Observar también que este segundo combo se usa el atributo nestedList en lugar de list, como sí se usa ensu combo padre.

Este tipo de elemento se podrá usar para incluir enlaces html para llevar al usuario a contenidos externos de la app.

{

"key":"help",

"type":"link",

"text":"help",

"href":"http://www.viafirma.com"

}

Tipo Link


Todos los elementos permiten el atributo "disabled" para que el valor introducido sólo sea de lectura y no permita suedición.

{

"key":"name",

"type":"text",

"label":"Name",

"placeHolder":"insertname",

"size":"33",

"disabled":true

}

Para los items del tipo "text" se permiten el atributo "match" para indicar en la validación del formulario que el valor aquíindicado debe ser igual que el introducido en el item referenciados, usado por ejemplo en los casos "Repita sucontraseña", y "Repita su email".

{

"key":"email",

"type":"text",

"label":"Email",

"placeHolder":"insertemail",

"required":true,

}

{

"key":"emailRepeat",

"type":"text",

"label":"RepeatEmail",

"placeHolder":"repeatemail",

"required":true,

"match":email

}

Todos los elementos descritos arriba, pueden incorporar la mayoría de atributos de validación descritos a continuación:

{

"key":"name",

"type":"text",

"required":true

Elemento de solo lectura (disabled)

Elemento de repetición (match)

Validación de Datos

Campo Requerido


}

Aunque se cuenta con un elemento del tipo email, sería posible usar una validación de email para cualquier elementode texto, por ejemplo, definir un elemento tipo text, y sobre éste aplicarle una validación de email.

{

"key":"email",

"type":"text",

"validation":"email"

}

Aunque está permitido este caso de uso, se recomienda usar el tipo de elemento pensado para este propósito, es decir,type:email.

Para cualquier otro tipo de dato que se desee validar se podrá usar, de forma explícita, una expresión regular a la horade definir el componente.

Para incluir una expresión regular como validación en cualquier componente que queramos montar en nuestroformulario lo podremos hacer tal y como se muestra en el siguiente ejemplo haciendo uso del atributo validationRegex:

{

"key":"age",

"type":"text",

"validationRegex":"[0-9]+"

}

En el código anterior montamos un tipo texto para solicitar la Edad del Usuario, y en la validación usamos unaexpresión regular para que sólo admita valores del 0 al 9.

Se podrá validar la longitud máxima y mínima elementos del tipo text. Para ello, se usaremos maxlength y minlength encada caso.

{

"key":"usercode",

"type":"text",

"maxlength":"10",

"minlength":"5"

}

Validación: email

Validación con Expresión Regular

Validación Longitud de Campos


De forma común, y con algunas excepciones descritas a continuación, todos los elementos descritos anteriormentepodrán hacer uso de los siguientes atributos.

Atributo Uso

size define el % de espacio que ocupará en una fila del formulario. Por ejemplo, si maquetamoscuatro cajas de texto en una misma fila, el size para cada uno sería 25.

label nombre de la etiqueta para el elemento.

placeholder texto de ayuda que se mostrará como valor predefinido en el elemento.

Viafirma documents puede ser configurado para poder informar a un sistema externo cuando se complete una petición.Así como el envío de un correo electrónico con los datos de la petición finalizada.

Mediante la propiedad callbackURL definida dentro del mensaje se informa la url de callback a la cual viafirmadocuments informará de la finalización de una petición.

Este callback consistirá en una llamada POST a la url de callback pasando en el parámetro message el json de lapetición.

Mediante la propiedad callbackMails definida dentro del mensaje se informa las direcciones de correo electrónico a lasque se remitirá la información de la petición. La información que se incluirá en el mensaje dependerá de laconfiguración del sistema en el apartado callback.

En caso de querer notificar a varios correos electrónicos se deben indicar separados por comas.

Otros Atributos

Callback

Callback a un tercero

Callback a un correo electrónico


Para hacer uso de todas las posibilidades descritas para los formularios avanzados, se recomienda el uso de laherramienta JForm Designer, de viafirma.

En el siguiente link se podrá hacer uso de la herramienta.

http://jform-designer.viafirma.com/pro/

Se podrá partir de cero, con la opción New Form, o bien partir de un formulario ya existente, con la opción ImportJSON.

Se ofrecen tres elemento del tipo contenedor que nos ayudarán a maquetar nuestro formulario:

ContenedoresFilas

El primero equivale a un contenedor html "Fieldset", y el segundo a una fila. Con ellos podremos agrupar todos loselementos de nuestro formulario con la apariencia deseada, teniendo en cuenta que el target principal de nuestrosformularios podrá ser un dispositivo móvil, hecho por el cual el diseño realizado con JForm Designer es líquido, y podráadaptarse de manera distinta a la maquetada según el dispositivo móvil en el que se esté visualizando.

Lo usaremos para agrupar de manera lógica un conjunto de elementos. El contenedor permite incluir título, y podrátener tantas filas como se desee.

Diseñador de Formularios

Maquetación del Formulario

Contenedor

66Diseñadordeformularios

http://jform-designer.viafirma.com/pro/

Estarán dentro de un contenedor, y en ellas insertaremos los elementos de formulario que deseemos.

Habrá que tener en cuenta el tamaño de los mismos, haciendo uso del atributo size. Por ejemplo, si deseeo incluir doselementos en la fila, podré asignarle un tamaño de 50-50, 90-10, 10-90 o cualquier combinación que sume el 100% delancho de la fila.

Las filas podrán ser desplazadas hacia arriba o hacia abajo hasta ajustarla en el lugar deseado, siempre dentro de uncontenedor. Para ello seleccionamos la fila y usaremos los botones "Up" y "Down" habilitados en la parte superior delcontainer.

Una vez tengamos definida la estructura contenedora, ya podremos insertar tantos elementos de formularios comodeseemos. Para ello seleccionaremos la fila en la que deseemos insertar el elemento, y usamos el botón Add item oRemove.

Una vez añadido a la fila, podremos desplazarlo a derecha o izquierda, con los botones Right y Left, y editar suspropiedades, con el botón Edit.

Fila

Elementos de Formulario


Para los elementos del tipo listas tenemos una gestión específica. Para ello, usaremos los accesos directos Edit lists yE dit nested lists.

Listas y Listas Anidadas




En esta pantalla se muestra el listado de dispositivos del usuario.

Existe la posibilidad de filtrar el listado de dispositivos introduciendo el texto a filtrar en el cuadro de búsqueda ypulsando Buscar. Para mostrar el listado completo pulsamos Mostrar todas.

Dispositivos

71Dispositivos

Guías de Uso

72GuíasdeUso

Viafirma documents es compatible con dispositivos iOS, Android y Windows, tanto en tablets como en smartphones.

El uso de dispositivos externos para la captura de evidencias (firma o huella) dependerá del soporte a cada plataforma,fabricante y modelo disponible.

Hasta la fecha, los dispositivos externos para la captura de firmas biométricas y huellas dactilares soportados son lossiguientes:

En el caso de iOS existen varios fabricantes y modelos de stylus bluetooth que ya están soportados en viafirmadocuments, como los enumerados a continuación.

Adonit: se soportan los siguientes modelos:

Jot TouchPixel PointPixel Pressure Sensitive

Dispositivos Externos

Captura de Firma Biométrica:

Para iOS

73Dispositivosexternos

http://www.adonit.net

Wacom:

Bamboo Fineline 2 y 3.Intuos Creative Stylus 2.

Apple: apple pencil soportado en el iPad Pro y iPad desde la 6ª generación (2018).

Logitech Crayon


http://www.wacom.com/es-es/products/stylus

http://www.apple.com/

https://www.logitech.com/en-us/product/crayon

De momento no hay fabricantes que incluyan el soporte a Android en sus modelos de stylus Bluetooth, por lo que sedeben utilizar dispositivos hardware que tengan su propio puntero biométrico. Por ejemplo:

Familia Note de Samsung: phablets, Samsung Galaxy Note 10.1 2014 Edition (no han sacado un nuevo modelo de estatableta).

Samsung Galaxy Note

Para Android


Samsung Galaxy Tab A with S Pen

Modelo SM-P580

Samsung Galaxy Tab S3 with S Pen


Modelo T820

Huawei Mediapad M2 10.0- la versión Premium (con 3GB de RAM y 64GB de almacenamiento) dispone de un lápizbiométrico de gran calidad, con capacidad de capturar 2048 niveles de presión, que ha sido ya certificado con nuestrassoluciones.

Huawei Mediapad M5 Pro- la versión Pro de la tablet Mediapad M5 de Huawei (2018) vuelve a disponer de M-Pen, unlápiz biométrico de gran calidad,.


Microsoft Surface

Compatible con Microsoft Surface Pro 3 y superior, que incluye Lápiz de Microsoft Surface.

Para Windows


También compatible con otros dispositivos Windows que disponen de tecnología Wacom EMR, habiendo muchosmodelos distintos disponibles en el mercado de distintos fabricantes: HP, Asus, etc.

Wacom

Viafirma documents también puede usarse con los pads de firma del fabricante Wacom, como los modelos STU-300,STU-430 o STU-500 hasta 530.


Para la captura de huellas, viafirma documents ya cuenta con el soporte de lectores pensados para dispositivosmóviles, aptos para iOS y para Android, como los modelos Tactivo de Precise Biometrics con captura de templates enformato ISO/IEC 19794-2:2005 ANSI 378.

Captura de Huella


http://precisebiometrics.com/smart-card-reader/#tactivo-products


A partir de un documento firmado podremos comprobar la validez del mismo haciendo uso de cualquier herramienta devisualización de documentos PDF´s, como por ejemplo Adobe Reader.

Dependiendo de las políticas de firma incluidas en cada proceso los detalles podrán variar. A continuación se muestraun caso típico de documento firmado y sellado con una TSA (Autoridad de Tiempo).

En el panel de firma ofrecido por Adobe Reader se pueden comprobar, entre otros datos:

datos del firmanteemisor del certificadovalidez del formato de firmaintegridad del documento firmado (no ha sido alterado desde el momento de la firma)

Verificar un documento firmado

Revisión de la firma

Adjunto: ISO de la firma biométrica

82Verificardocumentofirmado

En aquellos casos en los que los documentos han sido firmados de forma conjunta con firma biométrica, podremosrevisar en el panel de adjuntos el XML asociado a la ISO de firma biométrica.

Para obtener el XML, sólo tendremos que abrir el panel de adjuntos, seleccionar el XML y guardarlo, tal y como semuestra en la siguiente captura.

Si la política de firma incluye además la inclusión de una firma de tiempo, ofrecida por una Autoridad de Tiempo (TSA),también podremos revisar esta información en las propiedades de la firma, tal y como se muestra en la siguienteimagen.

Revisión del Sello de Tiempo

