Aprende a firmar documentos digitalmente en segundos des de Business Central

Hola a todos, una semana más!

Hoy quiero compartir con vosotros un descubrimiento que hice recientemente y que estoy seguro de que os resultará muy útil.

¿Alguna vez habéis necesitado firmar un documento y no sabíais cómo hacerlo de manera fácil y rápida? ¡Pues no os preocupéis más! En este post os mostraré una forma sencilla de crear una ventana donde cualquier persona puede firmar digitalmente, y luego podréis guardar esa firma en el formato Base64 y agregarla donde queráis.

Bueno, dejémonos de explicaciones y vamos ¡manos a la obra! 💪

Lo primero que debemos hacer es crear nuestro proyecto. En este caso, utilizaremos un ControlAddin que contendrá archivos de CSS, HTML y JavaScript. También añadiremos una página al proyecto para mostrar el lienzo donde se podrá firmar.

Archivo HTML

Comenzaremos por el archivo HTML. Aquí encontraremos un lienzo y un botón. El botón nos permitirá guardar la firma, mientras que el lienzo será el lugar donde firmaremos.

<canvas id="signatureCanvas" width="400" height="200"></canvas>
<br />
<button onclick="guardarFirma()">Guardar firma</button>

Archivo CSS

A continuación, pasemos al archivo CSS. Este archivo define el estilo del lienzo y asegura que no se vea afectado por gestos táctiles no deseados.

#signatureCanvas {
    border: 1px solid #000;
    touch-action: none;
}

Archivo Scripts.js

Ahora llegamos al archivo más importante. Aquí se encuentra toda la funcionalidad necesaria para agregar el HTML al ControlAddin y hacer que todo funcione correctamente.

En este archivo, inicializamos algunas variables y creamos una función de inicialización que se encargará de agregar el HTML y configurar el lienzo donde se realizará la firma.

var signPad;
var controlAddIn;
var Html;

function Init() {
    var getHtml = $.get(
        Microsoft.Dynamics.NAV.GetImageResource("src/controlAddIn/Sign/html/HtmlSign.html"),
        function (htmlExterno) {
            Html = htmlExterno;
            console.log(Html);
        }
    );

    getHtml.done(function () {
        controlAddIn = $("#controlAddIn");
        controlAddIn.empty();
        controlAddIn.html(Html);

        initSignaturePad();
    });
}

function initSignaturePad() {
    var canvas = document.getElementById("signatureCanvas");
    signPad = new SignaturePad(canvas, {
        backgroundColor: "rgb(255, 255, 255)", // Establecer el color de fondo del canvas
    });
}

Además, en este archivo, creamos una función para guardar la firma, que estará vinculada al botón en el HTML. Esta función verifica si se ha realizado alguna firma en el lienzo y, de ser así, la guarda en formato Base64. Luego, se reinicia el lienzo para poder realizar más firmas en el futuro.

function guardarFirma() {
    if (signPad.isEmpty()) {
        alert("Por favor, firma antes de guardar.");
    } else {
        var imageData = signPad.toDataURL("image/jpeg"); // Convertir a formato JPEG
        var signatureBase64 = imageData.replace(/^data:image\/jpeg;base64,/, ""); // Remover el encabezado de datos

        console.log("Signatura en Base 64", signatureBase64);

        Microsoft.Dynamics.NAV.InvokeExtensibilityMethod("SaveSign", [signatureBase64], true);

        initSignaturePad();
    }
}

Archivo ControlAddin

Pasemos ahora al archivo ControlAddin. Aquí configuraremos los archivos necesarios para el ControlAddin, incluyendo las librerías adicionales requeridas para su correcto funcionamiento.

También definiremos los eventos y las funciones necesarias para la interacción entre Business Central y el ControlAddin.

controladdin "Sign"
{
    Scripts =
        'https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.js',
        'https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js',
        'src/controlAddIn/Sign/js/Scripts.js';

    StyleSheets =
          'src/controlAddIn/Sign/css/Style.css';

    StartupScript =
        'src/controlAddIn/Sign/js/Startup.js';

    Images = 'src/controlAddIn/Sign/html/HtmlSign.html';

    RequestedHeight = 350;
    MinimumHeight = 1;
    MinimumWidth = 250;
    HorizontalShrink = true;
    HorizontalStretch = true;

    procedure Init();
    event ControlAddInReady();
    event SaveSign(Base64Sign: Text);
}

Page para firmar

Por último, crearemos la página para firmar. Esta será una página de tipo “card” donde añadiremos y ejecutaremos nuestro ControlAddin. También configuraremos los eventos de inicialización y guardado.

page 60003 "Card Sign"
{
    PageType = Card;
    UsageCategory = Administration;
    ApplicationArea = All;
    Caption = 'Card To Sign', Comment = 'ESP="Ficha para firmar"';

    layout
    {
        area(Content)
        {
            usercontrol(Sign; "Sign")
            {
                ApplicationArea = All;

                trigger ControlAddInReady()
                begin
                    CurrPage.Sign.Init();
                end;

                trigger SaveSign(Base64Sign: Text)
                begin
                    Message(Base64Sign);
                end;
            }
        }
    }
}

Como podéis ver, hemos creado un cuadrado con un botón dentro del mismo, donde se puede realizar una firma digital! Después de presionar el botón, la firma se guarda y se puede utilizar como deseen. En el ejemplo, la muestro a través de un mensaje.

Como siempre, podréis ver el ejemplo entero en el Link

¡Espero que os resulte útil y emocionante! No dudéis en enviar vuestros comentarios y preguntas. ¡Hasta la próxima!