Dynamics 365 Business Central: How to add a Signature Pad to the Sales Order page (Capture and Save Customer Signatures)

Hi, Readers.
Last week, I shared a quick post on how to build a custom calculator using control add-in objects, and it sparked quite a bit of discussion in the community. Here are the details: Dynamics 365 Business Central: Add a calculator to the sales order page.

Today, I’d like to share a real-world example from my past projects: how to integrate a signature pad into Business Central, allowing customers to sign digitally and save the signature directly within BC.

Unlike the calculator we looked at before, we can find this directly in public JS libraries, such as in CDN or cdnjs

https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js

https://cdnjs.cloudflare.com/ajax/libs/signature_pad/5.1.3/signature_pad.umd.min.js

For example, signature_pad

We can call it directly within the Scripts property.
(property) Scripts: Specifies the list of scripts to include in the control add-in. The scripts could be local files in the package or references to external files using the http or the https protocol.

More details: Build control add-in objects in Dynamics 365 Business Central

Here is the customization I implemented this time. First, I created a new Customer Delivery Signature group on the Sales Order for the customer to use for signing.

Users can write by hand directly. If there is a mistake, they can click the Clear button within the group or use the Clear Signature action in the header to clear the current handwritten content and sign again.

I have also created a new Factbox called Customer Signature Preview to store the user’s signature. Clicking Save Signature will save it.

Done.

The Customer Signature Preview page also features a delete function, allowing you to clear the saved user signature.

That’s everything. Let’s take a look at a short testing video.

Great, give it a try!!!😁

Source code: Github (Please note that the source code is for reference only, you can improve it according to your own needs)

PS:
1. You can also add this feature to other pages, such as Warehouse Shipment or Sales Invoice.

2. This is not limited to the Web Client; it can also be used on the Tablet and Phone clients.

3. If you only need the end user to sign, you can create a new page or Profile to make the page that allows signing look a bit simpler.

END

Hope this will help.

Thanks for reading.

ZHU