Integración del visor de formularios

Para poder integrar la visualización de formularios generados desde el diseñador de formularios de viafirma Documents dentro de aplicaciones externas se puede usar este kit de integración Javascript.

Los requisitos para usarlo son, únicamente, la librería Javascript jQuery.

Aquí se puede encontrar un ejemplo básico de integración en el que se lee un fichero de formulario generado con el diseñador y se muestra en pantalla.

Paso a paso

Lo primero es generar un formulario usando el diseñador de formularios de viafirma Documents y exportarlo para guardarlo como un fichero .json.

Ese fichero JSON será leído posteriormente por el SDK del visor de formularios para pintarlo.

Esto se puede conseguir inyectando las dependencias del visor en cualquier página HTML.

Estas dependencias son, en cuanto a Javascript:

<script src="jquery.js"></script>
<script src="jfb.js"></script>

Y en cuanto a CSS:

<link rel="stylesheet" href="styles.css">

Una vez hecho esto, debemos definir un elemento HTML en el que se inyectará el formulario una vez procesado. Este elemento debe tener un class concreto:

<div class="jfb-form"></div>

Una vez completados estos requisitos, podemos inicializar el visor de formularios pasándole el contenido del fichero JSON del formulario que se necesite mostrar. La carga de este fichero queda completamente en manos del desarrollador, pudiendola realizar de la manera que más le convenga. Aquí un ejemplo cargando el JSON mediante AJAX:

$(function() {
    $.getJSON("form/test.json", function( data ) {
        jfb.init(data);
    });
});

La llamada a jfb.init() es la que inicia la visualización del formulario. Recibe el objeto JSON con la definición del formulario. Buscará el elemento HTML con class="jfb-form" y pintará dentro del formulario.

Obtener los valores introducidos en el formulario

El visor de formularios expone un método Javascript para obtener el contenido del formulario (y realizar las validaciones pertinentes).

var json_formulario_con_valores = JSON.parse(jfb.getStringifiedData());

Si la validación del formulario encuentra algún problema, el método jfb.getStringifiedData() devolverá la cadena "error", y actualizará el formulario para mostrar los errores pertinentes.