Manual para la generación de Formularios – WebForms

Introducción #

Mediante la integración del complemento WebForm podrás cumplimentar formularios web antes de firmarlos.

WebForm es una librería que permite a los usuarios transformar datos en formato JSON en documentos HTML interactivos, es decir en formularios web, para posteriormente, convertir esos archivos HTML en documentos PDF listos para su distribución. Esta librería viene integrada en los siguientes productos de edatalia:

  • SIGNply Corporate
  • WebSign
  • firmar.online (tanto para la firma presencial, como para la firma remota)

Características #

  1. Conversión de JSON a HTML: Importa datos en formato JSON y transforma automáticamente estos datos en páginas HTML interactivas, (formularios web).
  2. Personalización del archivo JSON: La aplicación permite al usuario añadir estilos, imágenes, separadores, así como todo tipo de inputs y bloques de tipo texto.
  3. Generación de PDF de alta calidad: Con un clic, los usuarios pueden convertir sus documentos HTML en archivos PDF listos para firmar.
  4. Firma Digital Segura: La característica de firma digital permite a los usuarios firmar ese documento PDF generado.

Guía de uso #

Paso1: Inicio de la aplicación #

  1. Abre la aplicación desde el navegador.
  2. En la pantalla principal, verás la opción de cargar un archivo JSON y seleccionar otro archivo. Si no seleccionas ningún archivo la aplicación tomará el archivo JSON por defecto, pero si por el contrario deseas cargar un archivo personalizado por ti, puedes seleccionarlo.

Paso2: Generación de HTML #

  1. Una vez que se haya cargado el archivo JSON, la aplicación generará automáticamente un documento HTML basado en los datos del JSON.
  2. Rellena todos los campos necesarios del formulario, una vez rellenado para finalizar debes hacer clic en aceptar y firmar.

Paso3: Generación de PDF #

  1. Al hacer clic en aceptar y firmar, la aplicación transformará el documento formulario HTML en un archivo PDF de alta calidad.
  2. El PDF generado contendrá todos los datos y personalizaciones que hayas realizado en el paso anterior.

Paso4: Firma digital del PDF #

  1. Una vez que se haya generado el PDF, podrás firmarlo digitalmente.
  2. En el JSON de entrada, puedes configurar diferentes tipos de widget de firma: manual, flotante o fija, que hará que la firma se posicione en unas coordenadas X e Y del documento.
  3. Una vez firmado devolverá:
    • el documento PDF ya firmado, que se descargará automáticamente.
    • Los datos introducidos en el formulario en un fichero en formato clave-valor, para que de ese modo puedan ser recuperados por la aplicación del cliente.

Configuración del formulario web #

La estructura para crear un formulario PDF a través de un JSON sería:

     "pages": [
      {
        "items": [
          {"type": "image",
            "id": "logo",
            "src": "data:image/png;base64,iVBORw0KGgoAAAANSU",
            "css": { "maxWidth": "50%" }},
          {"type": "headerText",
            "label": "Ejemplo contrato de arrendamiento ",
            "css": { "color": "#0b66a3"},
            "id": "titulo_documento"},
          { "type": "headerText",
            "label": "Propietario",
            "css": { "color": "#0b66a3", "marginTop": "3rem" },
            "id": "id_propietario"},
          {"type": "textField",
            "label": "Nombre completo: ",
            "id": "nombre_propietario",
            "css": { "minWidth": "100px" },
            "editable": false,
            "value": "Fermín Martín"},
          { "type": "textField",
            "label": " DNI/NIE: ",
            "id": "dni_propietario",
            "css": { "minWidth": "100px" },
            "editable": false,
            "value": "29837123E" },
          { "type": "lineBreak" },
          {  "type": "textField",
            "label": " Dirección: ",
            "id": "direccion_propietario",
            "css": { "minWidth": "100px", "marginTop": "1rem" },
            "editable": false,
            "value": "Calle las flores 24 7D 18124"},
          { "type": "textField",
            "label": " Ciudad: ",
            "id": "ciudad_propietario",
            "css": { "minWidth": "100px", "marginTop": "1rem" },
            "editable": false,
            "value": "Almería"},
          { "type": "lineBreak" },
          { "type": "textField",
            "label": " Teléfono: ",
            "id": "telefono_propietario",
            "css": { "minWidth": "100px", "marginTop": "1rem" },
            "editable": false,
            "value": "698456812"},
          { "type": "emailField",
            "label": " Correo: ",
            "id": "correo_propietario",
            "css": { "minWidth": "100px", "marginTop": "1rem" },
            "editable": false,
            "value": "ejemplo@gmail.com" },
          { "type": "headerText",
            "label": "Inquilino",
            "css": { "color": "#0b66a3","marginTop":"3rem" },
            "id": "id_inquilino"},
          { "type": "textField",
            "label": "Nombre completo: ",
            "id": "nombre_inquilino",
            "css": { "minWidth": "100px" },
            "required": true },
          { "type": "textField",
            "label": " DNI/NIE: ",
            "id": "dni_inquilino",
            "css": { "minWidth": "100px" }},
          { "type": "lineBreak" },
          { "type": "textField",
            "label": " Dirección: ",
            "id": "direccion_inquilino",
            "css": { "minWidth": "100px", "marginTop": "1rem" }},
          { "type": "textField",
            "label": " Ciudad: ",
            "id": "ciudad_inquilino",
            "css": { "minWidth": "100px", "marginTop": "1rem" }},
          { "type": "lineBreak" },
          {"type": "textField",
            "label": " Teléfono: ",
            "id": "telefono_inquilino",
            "css": { "minWidth": "100px", "marginTop": "1rem" }},
          { "type": "emailField",
            "label": " Correo: ",
            "id": "correo_inquilino",
            "css": { "minWidth": "100px", "marginTop": "1rem" }},
          { "type": "lineBreak" },
          { "type": "headerText",
            "label": "Fecha inicio alquiler",
            "css": { "color": "#0b66a3", "marginTop": "3rem" },
            "id": "id_fecha_inicio" },
          { "type": "dateField",
            "id": "incio_fecha",
            "css": { "minWidth": "100px" },
            "today": true,
            "editable": false},
          { "type": "headerText",
            "label": "Fecha fin alquiler",
            "css": { "color": "#0b66a3", "marginTop": "3rem" },
            "id": "id_fecha_fin" },
          { "type": "dateField",
            "id": "final_fecha",
            "css": { "minWidth": "100px" },
            "required": true },
          { "type": "headerText",
            "label": "Renta mensual",
            "css": { "color": "#0b66a3", "marginTop": "3rem" },
            "id": "id_renta_mensual" },
          { "type": "textField",
            "id": "renta_mensual",
            "css": { "minWidth": "100px" },
            "editable": false,
            "value": "500€" },
          { "type": "pageBreak"},
          { "type": "headerText",
            "label": "Datos de interés",
            "css": { "color": "#0b66a3", "marginTop": "3rem" },
            "id": "id_terminos_condiciones"},
          { "type": "radioButton",
            "label": "¿Tiene mascotas?",
            "css": { "marginTop": "1rem", "marginBottom": "1rem" },
            "options": [{ "value": "Si","text": "SI"}, { "value": "No","text": "NO" }],
            "id": "mascotas",
            "actions": [
              { "relatedid": "tamaño_mascota", "value": "Si", "visible": true },
              { "relatedid": "tamaño_mascota", "value": "No", "visible": false }
            ],
            "required": true },
          { "type": "radioButton",
            "label": "Tamaño mascota:",
            "css": { "marginTop": "1rem", "marginBottom": "1rem" },
            "options": [
             { "value": "Peq","text": "Pequeño"},
             { "value": "MeGr","text": "Mediano/grande"}
            ],
            "id": "tamaño_mascota",
            "visible": false,
            "required": true},
          { "type": "radioButton",
            "label": "¿Es fumador?",
            "css": { "marginTop": "1rem", "marginBottom": "1rem" },
            "options": [{ "value": "Si","text": "SI" }, { "value": "No","text": "NO"}],
            "id": "fumador",
            "required": true}
        ]
      }

Explicación de cada campo #

“pages”: Define el cuerpo del formulario, separándolo por paginas.

«generalStyles»: Son los estilos por defecto que tendrá toda la página. Si queremos modificar algún elemento en concreto para ello tendremos que darle propiedades a ese elemento, con la propiedad css.
Por motivos de seguridad en la generación de formularios web, las propiedades CSS permitidas serán las siguientes:

  • height
  • maxWidth
  • minWidth
  • align
  • float
  • marginTop
  • marginBottom
  • border
  • fontFamily
  • fontSize
  • color
  • backgroundColor
  • textAlign
  • padding
  • fontWeight
  • textDecoration

“Items”: Cada elemento que contiene el formulario, en cada uno se define el tipo (“type”) y sus propiedades. 

“type”: Define el tipo de elemento que se añade al formulario:

  • Imagen, generar un elemento de tipo imagen («image»).
    {“type”:”image”}

  • Texto, genera un elemento de tipo texto, puede ser cualquiera de los tipos existentes en HTML («text»).
    {“type”:”headerText”}: Estos son tipos de cabecera.
    {“type”:”paragraphText”} : Párrafo normal.
    {“type”:”continuousText”} : Texto continuo.

  • Entrada de datos, genera elementos que recogen datos («input»).

    {“type”:”radioButton”} : Seleccionar entre varias opciones, definidas en la propiedad «options».

{“type”:”textFiel”} : Campo para entrada de texto.

{“type”:”numberField”} : Campo de entrada para numero entero.

{“type”:”dateField”} : Campo de entrada para una fecha.

  • Elemento para crear saltos de línea.

    {“type”:”lineBreak”} : Genera un salto de línea invisible.
    {“type”:”barBreak”} : Genera un salto de línea, marcado por una línea horizontal visible.
    {“type”:”pageBreak”} : Divide páginas del pdf.

  • Elemento para crear tablas, va acompañado de la propiedad «cells» donde se le indican las filas y columnas. («table»).

    {“type”:”table”}

Propiedades que pueden tener los distintos tipos de elementos #

“label”: El texto que recibe ese elemento. Ejemplo  en {“type”: “radioButton”} anterior:

"label": "Selecciona una de las opciones:"

“id”: El identificador que recibe ese elemento.

“value”: el valor que quiera tener por defecto el elemento “input”.

“editable”: Booleano para elegir si un elemento “input” es editable o no. (true o false), por defecto su valor es true.

“required”: Booleano para elegir si un elemento “input” es obligatorio o no para poder crear el pdf. (true o false), por defecto su valor es false.  

“visible”: Booleano para elegir si un elemento “input” es visible o no. (true o false), por defecto su valor es true. 

“src”: Indica ubicación de un documento externo, en este caso se debe añadir a una imagen en formato b64 = 

“data:image/png;base64,codigoIMGpasadaenb64”

“css”: Propiedad que da estilo a los elementos. Por motivos de seguridad, las propiedades CSS permitidas serán las siguientes:

  • height
  • maxWidth
  • minWidth
  • align
  • float
  • marginTop
  • marginBottom
  • border
  • fontFamily
  • fontSize
  • color
  • backgroundColor
  • textAlign
  • padding
  • fontWeight
  • textDecoration
"css":{ "fontFamily":"Arial", "fontSize": "16px"}

“options”: Si el elemento es de tipo “type” : “radioButton”, dentro de esta propiedad se añadirán las opciones que queremos que salgan como radio button y su respectivo texto (“value”).

"options":[{"value":"Opción1","checked":"checked"},{"value":"Opción2"},{"value":"Opción3"}]

La propiedad de “checked” sirve para seleccionar una de las opciones por defecto. 

“verticalOptions”: Esta propiedad es un booleano (true o false) que se usa para poner las opciones de radioButton en vertical, por defecto su valor es false.

“actions”: Esta propiedad se utiliza para desbloquear nuevos campos de texto que en un principio estaban ocultos. Por ejemplo si queremos que un texto aparezca solo si seleccionamos una de las opciones de un radio button previamente.

 { "type":  "radioButton",
            "label": "¿Tiene mascotas?",
            "css": { "marginTop": "1rem", "marginBottom": "1rem" },
            "options": [{ "value": "Si","text": "SI" }, { "value": "No","text": "NO" }],
            "id": "mascotas",
            "actions": [
              { "relatedid": "tamaño_mascota", "value": "Si", "visible": true },
              { "relatedid": "tamaño_mascota", "value": "No", "visible": false }
            ],
            "required": true },
          { "type": "radioButton",
            "label": "Tamaño mascota:",
            "css": { "marginTop": "1rem", "marginBottom": "1rem" },
            "options": [
              { "value": "Peq","text": "Pequeño"},
              {  "value": "MeGr","text": "Mediano/grande"}
            ],
            "id": "tamaño_mascota",
            "visible": false,
            "required": true},

Esta propiedad se le añade al input que debemos hacer clic para que se desglose el input oculto, asociándolo con el id de ese respectivo input y con el valor que debemos de clicar para que se realice la acción. 

En este ejemplo, tenemos un radio button asociado a otro radio button con el id : “tamaño_mascota” y el valor “SI”. En caso de que en el primer radio seleccionemos la opción “SI”, el radio button con el id “tamaño_mascota” se pondrá en visible. Además se le añadirán las opciones que pongamos, por ejemplo, required: true y visible: true hará que el elemento a mostrar venga con esos atributos.

Por defecto, el elemento asociado deberá tener la propiedad “visible”: false.

“today”: Booleano para elegir si un elemento “input” de tipo “date” tiene seleccionada por defecto la fecha de hoy, (true o false), su valor predeterminado es false. 

“pattern”: Patrón para validar el formato de un input, como un dni, cp…

No valida el contenido, en el dni/nie no se valida la letra, solo que el formato sea correcto.

Puedes encontrarlos ya creados buscando en internet o crearlos tú mismo. 

Ejemplo patrón de DNI/NIE:

"pattern": "[a-zA-Z0-9]+"
"pattern": "^(?:[0-9]{8}[a-zA-Z]|[XYZ][0-9]{7}[a-zA-Z])$"

Ejemplo patrón de CP:

"pattern": "[0-9]{3}-[0-9]{2}-[0-9]{3}”

«rules»: Este atributo sirve para hacer validaciones más complejas a un elemento de tipo input. En él se indica que validación se le quiere hacer indicando el nombre específico de esa validación y automáticamente la adquiere.

{  "type": "textField",   "label": " DNI/NIE: ",  "id": "dni_inquilino",   "css": { "minWidth": "100px" },  "rules": "NIFNIE" } --> Valida un NIF/NIE de manera que sea correcto.

“getValuesOf”: Este atributo se utiliza para coger el valor de otro elemento input asociados por su ID de forma dinámica, si el valor de elemento input cambia, también lo hace este.

Ejemplo de uso: Supongamos que contamos con un campo de entrada (input) identificado como «edad» y deseamos que esta información se refleje en varios elementos distintos. Para lograr esto, simplemente agregamos el atributo getValuesOf:»edad» a dichos elementos, estableciendo así una conexión entre el identificador «edad» y cada uno de estos elementos.

{ "type": "headerText", "getValuesOf": "edad" } --> Este headerText coge el valor del input con id "edad".

“cells”: Propiedad obligatoria si usamos el elemento “table”, con ella indicamos las filas y columnas que tendrá nuestra tabla.

th: Son los titulares o encabezados de las columnas, irán resaltados en negrita.

tr: Son las filas de la tabla dentro tiene los td que son las celdas que quieras que tenga cada fila. 

Tabla de ejemplo:

Encabezado 1Encabezado 2Encabezado 3
Dato 1Dato 2Dato 3
Dato 4Dato 5Dato 6

Código HTML de la tabla anterior:

		  {
			  "type":"table",
			  "cells": { "th" : [ "Encabezado 1", "Encabezado 2", "Encabezado 3"], 
						 "tr" : [ { "td" :[ "Dato 1", "Dato 2", "Dato 3"]},
						 { "td" :[ "Dato 4", "Dato 5", "Dato 6"]}
						 ]
			  },
			  "css":{"border" : "black 3px solid"}
		  }

Funciona con BetterDocs

Estamos deseando escucharte y poder ayudarte



    En edatalia.com cumplimos con el RGPD de la UE por lo que tus datos están seguros. Además, debes aceptar nuestra política de privacidad al enviar un formulario:

    • Responsable: edatalia.com
    • Finalidad: poder gestionar tu petición.
    • Legitimación: tu consentimiento expreso.
    • Destinatario: tus datos se guardarán en nuestro proveedor de hosting -, que también cumple con el RGPD.
    • Derechos: podrás ejercer tus derechos de acceso, rectificación, limitación y supresión de datos en edatalia@edatalia.com