Cuando renderizamos el formulario no se incluye por defecto ningún botón, a fin de que los integradores puedan añadir los botones que deseen.

De esta manera podríamos renderizar un formulario y pintarle botones según las necesidades del integrador. Algunos ejemplos de botones podrían ser:

  • Guardar
  • Firmar y guardar
  • Cancelar
  • Volver

Desde  Webforms se proveen ya diferentes tipos de botones que se pueden añadir directamente al objeto visualizer. Estos botones tienen como fin simplificar la inclusión de estos. Sin embargo, en el caso de que ninguno de ellos satisfaga nuestras necesidades o necesitamos acciones más complejas, también tenemos la opción de añadir botones personalizados.  

A continuación se muestran varios ejemplos:


Añadir botón de envío: addSendButton

Añade un botón “Guardar” que ejecuta la función proveída que recibirá por parámetro el jsonData cargado en ese momento en el formulario.

Ejemplo: 

visualizer.addSendButton(function (jsonData) {
	console.info(JSON.stringify(jsonData));
});
JS

En el caso de querer modificar el mensaje del botón, se puede configurar de la siguiente manera:

visualizer.addSendButton(function (jsonData) {
	console.info(JSON.stringify(jsonData));
}, "Enviar");
JS

Añadir botón Volver: addBackButton

Añade un botón “Volver” que, por defecto, al pulsarse, te dirige a la página anterior en el navegador. Adicionalmente, este método puede recibir como parámetro opcional una URL y, en este caso, al pulsarse te dirigirá a dicha URL.

Ejemplo: 

// Volverá a la página anterior
visualizer.addBackButton();
// Volverá a la página pasada como parámetro
visualizer.addBackButton('http://www.arte-consultores.com/');
JS


Añadir botón Cancelar: addCancelButton

Añade un botón “Cancelar”, que al pulsarse, navega a la página anterior en el navegador. Adicionalmente, este método puede recibir como parámetro opcional una URL y, en este caso, al pulsarse navegará a dicha URL. Funcionalmente hace lo mismo que el botón anterior de Volver. La única diferencia es la etiqueta, donde uno se llama Volver, y el otro Cancelar. Existen ambos botones porque el botón “Volver” suele ser más apropiado cuando se está visualizando un formulario en sólo lectura mientras que el botón “Cancelar” lo es cuando el formulario se muestra en modo edición.  

Ejemplo: 

// Volverá a la página anterior
visualizer.addCancelButton();
// Volverá a la página pasada como parámetro
visualizer.addCancelButton('http://www.arte-consultores.com/');
JS


Añadir botón de descargar PDF: addDownloadReadonlyPdfButton

Añade un botón “Descargar en PDF”, que al pulsarse, descarga el formulario en formato PDF , incluyendo los datos cargados en el mismo.

Importante: Si el formulario contiene errores, se mostrará una ventana modal de confirmación indicando que el formulario contiene errores a fin de que el usuario pueda elegir entre cancelar la operación y volver a corregirlos o seguir adelante y descargar el PDF. Ejemplo:


Ejemplo: 

// Añade un botón con el texto "Descargar en PDF"
visualizer.addDownloadReadonlyPdfButton();
// Añade un botón con el texto "Descargar PDF cumplimentado"
visualizer.addDownloadReadonlyPdfButton("Descargar PDF cumplimentado");
JS


Añadir botón de descargar PDF en blanco: addDownloadBlankPdfButton

Añade un botón “Descargar PDF vacío”, que al pulsarse, descarga el formulario en formato PDF , haciendo visibles todos los campos y con los parámetros que se hayan cargado previamente.

Ejemplo: 

// Añade un botón con el texto "Descargar PDF vacío"
visualizer.addDownloadBlankPdfButton();
// Añade un botón con el texto "Descargar PDF sin cumplimentar"
visualizer.addDownloadBlankPdfButton("Descargar PDF sin cumplimentar");
JS


Añadir botón de descargar XML del jsonData: addDownloadXmlButton

Añade un botón “Descargar en XML”, que al pulsarse, descarga el formulario en formato XML.

Ejemplo: 

// Añade un botón con el texto "Descargar en XML"
visualizer.addDownloadXmlButton();
// Añade un botón con el texto "Descargar archivo XML"
visualizer.addDownloadXmlButton("Descargar archivo XML");
JS


Añadir botón de guardar borrador: addDraftButton

Añade un botón que al pulsarse, ejecuta la función definida por el usuario. Está función recibirá como parámetro el jsonData sin validar del formulario, así como un parámetro erros que contiene un hash con los elementos con errores y qué tipos de errores contiene.

El integrador, además de la acción que realiza, podrá personalizar el nombre del botón que, por defecto, será “Guardar borrador”.

Ejemplo: 

visualizer.addDraftButton(function (jsonData, errores) {
      console.info("JsonData sin validar:\n" + JSON.stringify(jsonData));
      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);
      })
}, "Borrador");
JS

Añadir cualquier botón: addButton

Este método permite al integrador añadir cualquier otro botón diferente a los mencionados anteriormente.

El integrador podrá personalizar:

  • Primer parámetro. Nombre del botón (texto que se muestra).
  • Segundo parámetro. Estilos del botón (clases CSS).
  • Tercer parámetro. Comportamiento que se desea ejecutar. La función especificada recibirá como parámetro el jsonData sin validar del formulario, así como un parámetro erros que contiene un hash con los elementos con errores y qué tipos de errores contiene..

Ejemplo: 

visualizer.addButton('Ejemplo de botón', 'btn-info', function (jsonData, errores) {
	console.info("JsonData sin validar:\n" + JSON.stringify(jsonData));
    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);
    })
	alert("Este botón está definido por el integrador");
});
JS