Add hand written signature to any page in Business Central using Javascript

Maybe signing documents virtually is not the most legal signature but its cool anyway.

This example here uses signature pad and implements in Business Central so you can save hand written signatures to documents inside Business Central.

This example uses standard Sales Order page.

Not 100% sure if its useful or not but maybe it is. For example collecting customer signatures on the field for service orders or maybe letting the customer pay the invoice by drawing a cat picture.

Al Code:

tableextension 55000 "SGN Ext. Sales Header" extends "Sales Header"
{
    fields
    {
        field(55000; "SGN Signature"; Blob)
        {
            Caption = 'Customer Signature';
            DataClassification = CustomerContent;
            SubType = Bitmap;
        }
    }

    procedure SignDocument(var Base64Text: Text)
    var
        Base64Cu: Codeunit "Base64 Convert";
        RecordRef: RecordRef;
        OutStream: OutStream;
        TempBlob: Codeunit "Temp Blob";
        ImageBase64String: Text;
    begin
        Base64Text := Base64Text.Replace('data:image/png;base64,', '');
        TempBlob.CreateOutStream(OutStream);
        Base64Cu.FromBase64(Base64Text, OutStream);
        RecordRef.GetTable(Rec);
        TempBlob.ToRecordRef(RecordRef, Rec.FieldNo("SGN Signature"));
        RecordRef.Modify();
    end;
}

Javascript part:

Microsoft.Dynamics.NAV.InvokeExtensibilityMethod("Ready", "");

function InitializeSignaturePad() {
  let canvas = document.createElement("canvas");
  canvas.id = "signbox";
  canvas.width = 700;
  canvas.height = 300;

  let submitButton = document.createElement("button");
  submitButton.id = "signDocument";
  submitButton.innerHTML = "Sign document";

  let signatureLocation = document.getElementById("controlAddIn");

  signatureLocation.appendChild(canvas);
  signatureLocation.appendChild(submitButton);

  var signaturePad = new SignaturePad(canvas, {
    backgroundColor: "rgb(255, 255, 255)",
  });

  submitButton.addEventListener("click", function (event) {
    if (signaturePad.isEmpty()) {
      alert("Please enter signature...");
    } else {
      var base64String = signaturePad.toDataURL();
      Microsoft.Dynamics.NAV.InvokeExtensibilityMethod("Sign",[base64String])
      signaturePad.clear();
    }
  });
}

Full code example can be found here:

https://github.com/nocubicles/bc-handwritten-signatures