I love when I find cool projects on the internet. This one fulfills those criteria, a simple and elegant way to capture signatures in Business Central. Check out the video:
In this video, Erik showcases a cool community project he discovered on GitHub: handwritten signatures in Business Central. Created by Willem, the project uses JavaScript and a control add-in to let users draw signatures directly on a page — ideal for tablet scenarios where someone needs to sign on screen. Erik walks through forking the repo, cloning it into VS Code, getting it running, and then does a thorough code review of how the solution works.
Discovering Cool Community Projects
Erik explains that he regularly stumbles across interesting projects on the internet, and when he finds something particularly cool, he likes to feature it on his channel. This project by Willem caught his attention: it adds a handwritten signature capability to any page in Business Central using JavaScript. The concept is especially useful on tablets where users can physically sign on the screen and have that signature saved to the record.
Getting the Code from GitHub
Erik demonstrates the workflow for getting someone else’s GitHub project into your local development environment:
- Fork the repository — Erik had already forked Willem’s repo into his own GitHub account. This gives you your own copy that you can modify, improve, or experiment with while keeping everything in source control.
- Clone to VS Code — Grab the repository URL from GitHub, open VS Code, use the Git: Clone command from the command palette, paste the URL, and select a local folder for the repo.
- Set up the AL project — The cloned repo didn’t contain a
launch.json, so VS Code flagged missing symbols. The easiest way to generate alaunch.jsonis to trigger the AL: Download Symbols command. It will fail the first time but will prompt you to configure your server connection, just like when creating a new project. After entering the server details and downloading symbols, everything resolved cleanly.
After downloading symbols, the project compiled without errors or warnings. Erik hit F5 to publish and deploy, and the signature functionality appeared on the Sales Order page — a new section at the bottom where you can draw a signature and click “Sign” to save it.
How the Solution Works
Table Extension: The Blob Field
The foundation of the solution is a table extension on the Sales Header that adds a Blob field. This blob stores the signature image data. The signature is captured as a base64-encoded PNG string from the JavaScript canvas, and that data gets written into the blob.
Page Extension: The User Control
On the page extension, there’s a new group containing a user control (the signature pad) and a field for displaying the stored signature. The user control references:
- A standard JavaScript package called signature_pad — this is the library that handles the actual drawing interaction
- A custom JavaScript file (
sign.js) that initializes the signature pad and handles the communication back to Business Central - A CSS file for minimal styling
The JavaScript
The JavaScript creates a canvas element (the sign box), a button for submitting the signature, and initializes the signature pad library on that canvas. An event listener on the button checks whether the signature pad is empty — if not, it converts the signature to a base64 string and sends it to Business Central via a custom event called “sign.”
Erik notes an interesting design choice: the JavaScript only uses Scripts (not StartupScript and RequestedScript separately). He mentions that he would personally put the initialization code in the startup script and keep the function calls separate, but acknowledges there are many valid approaches.
The Sign Function on the Table
When the “sign” event fires from JavaScript, the page extension calls a Sign function on the table extension. This function:
- Receives the base64 string from JavaScript
- Strips the data URI prefix (
data:image/png;base64,) — because when you use an image in HTML with inline data, you prefix it with that string, but for storage you just want the raw base64 - Converts the base64 text to a binary stream using a TempBlob codeunit
- Uses a RecordRef to write the data back to the blob field on the record
Erik observes that he might implement this part differently — for example, directly using Rec.Signature.CreateOutStream and writing to it, then calling Modify. However, he’s careful to note that Willem’s approach works perfectly well, and there are always multiple ways to achieve the same result in AL.
The CSS
The styling is minimal — just a border on the sign box. That’s it. Erik appreciates the elegance of such a lightweight solution.
Practical Use Case
The most likely scenario for this solution is a specialized page running on a tablet where someone needs to sign a document — think delivery confirmations, approval workflows, or any process that requires a handwritten signature. The signature is captured, stored as a blob on the record, and can be displayed back on the page.
Getting Open Source Projects Running Locally
Beyond the signature functionality itself, Erik highlights how easy it is to take an open-source AL project from GitHub and get it running in your own environment:
- Fork the repo on GitHub
- Clone it into VS Code
- Use AL: Download Symbols to generate a
launch.jsonand connect to your server - Build and deploy with F5
The barrier to trying out community projects is very low — it’s not complicated at all.
Summary
This is an elegant, lightweight solution for adding handwritten signatures to Business Central pages using a JavaScript control add-in and the signature_pad library. The key components are a blob field for storage, a user control for the drawing canvas, and a small amount of JavaScript to bridge the interaction. Erik encourages the community to share their cool projects for potential features on the channel, and reminds viewers that getting open-source AL projects from GitHub into your development environment is quick and straightforward.
