Hello #Trailblazer,

In this blog post, we will learn how to capture the signature using Salesforce LWC Component.

Capturing the signature is very important these days as most of the time business is dealing with the Direct customers like you and me.

For example, you are working for a company that is installing the solar system to the customers. So after installing the solar system they would require the customer signature and for that purpose we will develop our lightning web component.

The Solution

To capture the signature, we will use HTML5 Canvas which will be used to draw the signature

Link to Canvas API

Step1 – Create Apex Class

The first step is to create the apex class which will create the ContentVersion and Content Document Link

The Apex Class will be responsible for inserting the content version and content document link

Step2 – Create Lightning Web Component

Now, time is to create the Lightning Web Component which will contain the html canvas element. like below

<canvas name="canvasItem" style="border:2px solid rgb(136, 135, 135); background: transparent;"></canvas>

In the above code you can see that we are using a canvas and in our javascript we will be using this canvas to get the context and generate/draw a signature in 2D surface.

Here is the complete code for Lightning Web Component

Note:- Read the code comments

Places where solution can be used

1. Record Page
2. Flow
3. Community

Test the Solution

To test the solution, use this component inside the record page for any object and then try to capture signature.

Thanks for reading 🙂