Como comentábamos al comienzo del documento, Webforms no sólo permite visualizar formularios HTML sino que nos provee de una serie de métodos para llevar a cabo diferentes acciones.

En concreto, dichas acciones son:

Renderizado de un HTML editable: renderEditableWebform

Esta es la integración más frecuente de cualquier formulario. Lo que nos permite es renderizar el formulario en HTML para cumplimentar sus datos.

Los parámetros que debe recibir de manera obligatoria son:

  • webformCode. Se corresponde con el código semántico del formulario que se desea renderizar. Esta información debe ser conocida por el integrador.

Además, de manera opcional podrá recibir cualquiera de los siguientes parámetros:

  • jsonData. Un formulario podrá renderizarse en blanco o con una serie de datos precargados. La forma de precargar los datos en el formulario es mediante un objeto json al que denominamos jsonData. Se trata de un fichero muy sencillo que provee los datos en formato de clave-valor. En el caso de que no se provea un objeto jsonData el formulario se mostrará en blanco y únicamente tendrá cumplimentados los valores por defecto. A la hora de construir este json, hay algunos parámetros especiales que tienen un comportamiento concreto. Hay más información en Anexo II. Parámetros especiales dentro del jsonData.
  • token. Parámetro que se le puede pasar al formulario si se desea que desde dentro del mismo se pueda acceder a servicios web que requieran de un token de autenticación. En caso de que no se le pase nada, dicha variable no tendrá valor cuando se acceda a la misma desde el formulario
  • checkIntegrity. Parámetro booleano que, cuando está a true, comprueba que el parámetro webformCode especificado en el jsonData se corresponde con el del formulario invocado y que el parámetro webformVersion del jsonData se corresponde con la última versión existente del formulario. Si dicha validación falla, el visualizador lanzará un error por consola y no realizará el renderizado. Si no se le pasa el parámetro a true no se realizará la validación, sin embargo, si el jsonData provisto hace referencia a una versión antigua del formulario, se mostrará un cuadro de diálogo informando de que se trata de una versión antigua y se tratará de hacer corresponder los datos cargados con los campos de la última versión.

 

Ejemplo:

// Obligatorio
var webformCode = "ejemplo-integracion";

// Opcionales
var jsonData = ""; // Ejemplo: '{"webformCode___KEY":"ejemplo-integracion","webformVersion___KEY":"2.0","text-input":"Este valor está prerelleno","select2-desplegable":null,"radio-radio":null,"checkbox-checkbox":false,"table-table":[],"select2-desplegable___LABEL":"","radio-radio___LABEL":"Etiqueta de b"}';
var token = "";
var checkIntegrity; // Ejemplo: false;
visualizer.renderEditableWebform(jsonData, webformCode, token, checkIntegrity)
.then(function () {
      console.info('Editable webform rendered');
      });
JS


Renderizado de un HTML no editable: renderReadonlyWebform

Este método permite renderizar en formato HTML un formulario sobre el que no se va a permitir editar sus datos. Por tanto, a diferencia del método anterior, el parámetro jsonData será obligatorio.

Los parámetros que debe recibir de manera obligatoria son:

  • jsonData. Conjunto de datos en formato clave valor, que se precargan en el formulario. Estos valores se precargan, independientemente de las opciones del formulario. Es decir, si un desplegable o radio tiene unas claves y etiquetas concretas en el jsonData que el formulario ya no usa, da igual, se cargarán igualmente. Esto es para garantizar que lo que vemos en el formulario es lo mismo que está en el

A diferencia de en el método anterior, en este caso el jsonData será obligatorio que contenga dos claves llamadas webformCode___KEY y webformVersion___KEY que se corresponderán con el código y versión del formulario. Sin embargo, esto no es algo que debamos añadir a mano sino que automáticamente se añadirá al jsonData cuando se guarda un formulario. Hay más información en Anexo II. Parámetros especiales dentro del jsonData.

Además, de manera opcional podrá recibir cualquiera de los siguientes parámetros:

  • Código semántico del formulario que vamos a renderizar. En el caso del método renderReadonlyWebform se le pasa para comprobar, junto con el checkIntegrity que el formulario que vamos a renderizar coincide con el presente dentro del jsonData. Si no se le pasa ningún webformCode, la validación no tendrá lugar.
  • Versión del formulario que vamos a renderizar. En el caso del método renderReadonlyWebform se le pasa para comprobar, junto con el checkIntegrity que la versión que vamos a renderizar coincide con el presente dentro del jsonData. Si no se recibe ninguna versión, pero la propiedad webformCode sí está rellena, se cargará la última publicada.
  • checkIntegrity. Parámetro booleano que, cuando está a true, comprueba que el webformCode y webformVersion que vienen dentro del jsonData son iguales al webformCode y webformVersion que se le pasa como parámetro. Si dicha validación falla, el visualizador lanzará un error por consola y no realizará el renderizado. Si no se le pasa el parámetro a true no se realizará la validación.

Ejemplo: 

// Obligatorio
var jsonData = '{"webformCode___KEY":"ejemplo-integracion","webformVersion___KEY":"2.0","text-input":"Valor del input","select2-desplegable":"op-2 (modificado)","radio-radio":"b (modificado)","checkbox-checkbox":true,"table-table":[{"text-input-1":"Primera fila","select2-desplegable-1":"op-n-t (modificado)","select2-desplegable-1___LABEL":"Opción-N en tabla (modificado)","radio-radio-1":"c (modificado)","radio-radio-1___LABEL":"Etiqueta de c (modificado)","checkbox-checkbox-1":false},{"text-input-1":"Segunda fila","select2-desplegable-1":"op-n-t","select2-desplegable-1___LABEL":"Opción-N en tabla","radio-radio-1":"c","radio-radio-1___LABEL":"Etiqueta de c","checkbox-checkbox-1":false}],"select2-desplegable___LABEL":"Opción-2 (modificado)","radio-radio___LABEL":"Etiqueta de b (modificado)"}';

// Opcionales
var webformCode; // Ejemplo: "ejemplo-integracion"
var webformVersion; // Ejemplo: "2.0"
var checkIntegrity; // Ejemplo: true
visualizer.renderReadonlyWebform(jsonData, webformCode, webformVersion, checkIntegrity)
.then(function () {
         console.info('Readonly webform rendered');
});
JS


Descarga de un PDF en blanco para un formulario: downloadBlankPdf

Este método tiene como objetivo descargar en formato PDF un formulario vacío, con todos los campos visibles, a fin de que puedan ser rellenados en papel.

Los parámetros que debe recibir de manera obligatoria son:

  • paramsData. Conjunto de parámetros en formato clave valor, que se precargan en el formulario. Al tratarse de un pdf en blanco, los únicos tipos de valores permitidos son los parámetros de Webforms, es decir, aquellos con el sufijo ___PARAM.
  • webformCode. Código semántico del formulario que vamos a renderizar.

Además, de manera opcional podrá recibir cualquiera de los siguientes parámetros:

  • webformVersion. Versión del formulario que vamos a renderizar. Si no recibe ninguna versión, se obtendrá el PDF de la última versión publicada.


Ejemplo:

// Obligatorio
var webformCode; // Ejemplo: "ejemplo-integracion"
// Opcionales
var webformVersion; // Ejemplo: "2.0"
visualizer.downloadBlankPdf(paramsData, webformCode, webformVersion)
.then(function () {
         console.info('Downloaded blank pdf');
});
JS


Descarga de un PDF con datos precargados: downloadReadonlyPdf

Este método tiene como objetivo permitir la descarga en formato PDF de un formulario, con los valores exactos guardados en el JsonData. Los parámetros y su uso, son los mismos que en el método renderReadonlyWebform.


Ejemplo:

// Obligatorio
var jsonData = '{"webformCode___KEY":"ejemplo-integracion","webformVersion___KEY":"2.0","text-input":"Valor del input","select2-desplegable":"op-2 (modificado)","radio-radio":"b (modificado)","checkbox-checkbox":true,"table-table":[{"text-input-1":"Primera fila","select2-desplegable-1":"op-n-t (modificado)","select2-desplegable-1___LABEL":"Opción-N en tabla (modificado)","radio-radio-1":"c (modificado)","radio-radio-1___LABEL":"Etiqueta de c (modificado)","checkbox-checkbox-1":false},{"text-input-1":"Segunda fila","select2-desplegable-1":"op-n-t","select2-desplegable-1___LABEL":"Opción-N en tabla","radio-radio-1":"c","radio-radio-1___LABEL":"Etiqueta de c","checkbox-checkbox-1":false}],"select2-desplegable___LABEL":"Opción-2 (modificado)","radio-radio___LABEL":"Etiqueta de b (modificado)"}';

// Opcionales
var webformCode; // Ejemplo: "ejemplo-integracion"
var webformVersion; // Ejemplo: "2.0"
var checkIntegrity; // Ejemplo: true
var injectXfa; // Ejemplo: true. Si no se pasa o define, el valor por defecto es false
visualizer.downloadReadonlyPdf(jsonData, webformCode, webformVersion, checkIntegrity, injectXfa)
.then(function () {
         console.info('Download readonly pdf');
});
JS

Ver más información sobre el XFA.

Descarga del XML correspondiente a un JSON de datos: downloadXml

Este método tiene como objetivo obtener la transformación a fichero XML de cualquier objeto jsonData.

Los parámetros que debe recibir de manera obligatoria son:

  • jsonData. El objeto jsonData que ha de ser convertido a XML.
  • filename. Nombre que tendrá el fichero descargado.


Ejemplo:

// Obligatorio
var jsonData = '{"webformCode___KEY":"ejemplo-integracion","webformVersion___KEY":"2.0","text-input":"Valor del input","select2-desplegable":"op-2 (modificado)","radio-radio":"b (modificado)","checkbox-checkbox":true,"table-table":[{"text-input-1":"Primera fila","select2-desplegable-1":"op-n-t (modificado)","select2-desplegable-1___LABEL":"Opción-N en tabla (modificado)","radio-radio-1":"c (modificado)","radio-radio-1___LABEL":"Etiqueta de c (modificado)","checkbox-checkbox-1":false},{"text-input-1":"Segunda fila","select2-desplegable-1":"op-n-t","select2-desplegable-1___LABEL":"Opción-N en tabla","radio-radio-1":"c","radio-radio-1___LABEL":"Etiqueta de c","checkbox-checkbox-1":false}],"select2-desplegable___LABEL":"Opción-2 (modificado)","radio-radio___LABEL":"Etiqueta de b (modificado)"}';
var filename = 'nombre-fichero';

visualizer.downloadXml(jsonData, filename)
.then(function () {
         console.info('Download xml');
});
JS


 Validación de los datos introducidos en el formulario: validate

Este método tiene como objetivo validar los datos introducidos en el formulario, obteniendo, si los hubiera, los errores asociados. Nótese que este método sólo tiene sentido que sea invocado después de haber realizado un Renderizado de un HTML editable: renderEditableWebform.


Ejemplo:

var errores = visualizer.validate();
Object.keys(errores).forEach(function (key) {
	console.log("Etiqueta:", errores[key].label);
	console.log("Mensaje:", errores[key].message);
	console.log("Elemento HTML:", errores[key].element);
})
JS