Have you ever needed to collect an e-signature on the go? Maybe you need to verify a payment, ensure successful transactions are processed, or even update records after a service has been completed. An e-signature comes in handy as a verification step in many ways. Enabling field workers to capture signatures on the go is one of the most common mobile use cases we hear from our customers.
So, I’m excited to share that we have created a sample Lightning Web Component that allows you to capture signatures and attach them to a Salesforce record. While we built this for mobile use cases, there is nothing stopping you from using this on touch-screen desktops as well.
Working with the Signature Capture LWC
Let’s walk through an example in action. Dreamhouse is a fictional real estate sample app that can be used for web and mobile. Real estate agents, when they’re in the process of closing a deal, need to be able to capture the buyer’s name and signature to associate with the property that was sold. To do this, Dreamhouse developers can utilize a new sample LWC component that we’ve created. Let’s dive into it!
Configuring the LWC setup
For our Dreamhouse requirement above, we need to be able to collect the name and signature information from the LWC. This can be done through three steps.
- Configure your HTML LWC layout
- Configure your LWC styles
- Connect your Interface with the LWC JavaScript APIs
Let’s dive into more details on the steps!
1. Configure your LWC HTML layout
To start, navigate to the NameAndSignatureCapture section of the LWC sample directory in GitHub. Then, copy the signaturePad component into your project’s lwc folder. After copying the sample component code, you can reference the component by writing <c-signature-pad> and set its attributes to configure it.
2. Configure your LWC styles
Next, the styles of the interface can also be adjusted to suit your needs. For our Dreamhouse demo, let’s import a new font family. To do this, simply set the styles for your LWC component as seen below.
You can also customize the layout of the LWC to your liking by referencing the proper class and HTML attributes.
3. Connect your Interface with the LWC APIs
Lastly, we need to ensure that the signature is properly captured by the LWC. For the purposes of our Dreamhouse example, we want to be able to save the signature provided by the end user.
The SignaturePad LWC that we provide can be set up to capture data and customize the interface through JavaScript APIs and their corresponding HTML attributes. To do this, simply invoke the API methods and connect them to their corresponding HTML attributes on the <c-signature-pad>. Reference the listing below for the HTML attribute and JavaScript API mappings
| Functionality | Description | HTML Attribute = “type” | JavaScript API (Type) |
| Enable Name Signing | Allows end users to type out their name, and it returns an auto-generated text-to-signature as users type their name. | enable-name-signing=”boolean” | enableNameSigning(boolean) |
| Enable Signature Drawing | Allows you to prompt end users to draw their own custom signature on the provided signature pad. | enable-signature-drawing = “boolean” | enableSignatureDrawing(boolean) |
| Signature Stroke Thickness | Customize the thickness of the pen stroke on the e-signature captures. | stroke-thickness=”integer” | strokeThickness(integer) |
| Signature Pen Color | Customize the ink color of the pen that is provided to the end user. | pen-color=”String” | penColor(String) |
| Signature Pad Color | Customize the color of the signature pad that the end user sees. | pad-color=”String” | padColor(String) |
| Signature Font Color | Customize the signature font. | font-color=”String” | font.color=String |
| Setting an Input Field Label | Set a label for the Input field name. | name-input-label=”String” | nameInputLabel=”String” |
| Setting a Pad Label | Set a name for the label above the signature pad. | name-input-label=”String” | nameInputLabel=”String” |
| Save Signature | Allows save an auto-generated and/or custom signature. | onclick={saveSignature} | pad.getSignature() |
| Clear Signature | Allows removal of previous signature if re-do is necessary. | onclick={clearSignature} | pad.clearSignature() |
Note that we also added a clearSignature and saveSignature method to allow for clearing and saving signatures respectively. You can do this by setting your own JavaScript methods that connect to the pad.setSignature() and pad.clearSignature(). These can be connected to <lightning-button> components. Let’s see an example of this below.
Now that we have the JavaScript methods identified, let’s see some of them in action. This can be done using the following JavaScript.
Note that we added a clearSignature method that is invoked when the Clear button is clicked as well as a saveSignature method that is invoked when the Save button is clicked.
Something to highlight about the component is that it is completely responsive to resizing and orientation changes. Also note that the signature capture component has been designed to work on the web, touchpad, or stylus for mobile or tablet devices.
Additionally, the Signature Capture LWC is compatible with web and mobile devices and is the most common request used in the Salesforce mobile app as well as our Mobile Test Harness app. Take a look at the demo below to see it running in action.
Conclusion
We hope that you’ve enjoyed this blog post and that you are looking forward to using the Signature Capture capabilities on your LWC for mobile. To get started:
- Dive in! Check out our LWC Mobile Samples GitHub Repository to see and test the LWC samples of the Signature Capture capabilities in action. Then, once you are familiar with the flows …
- Personalize it! Take the Signature Capture LWC samples and expand upon them to customize them for your business needs.
- Reach out! If you have any questions, comments, or ideas, you can connect with us in our Salesforce Mobile Trailblazer Community.
To learn more about our mobile offerings, check out the following links:
- Quick Start: Salesforce DX (Trailhead)
- Salesforce mobile app setup (Developer Guide)
About the author
Ashwin Nair is a Product Manager at Salesforce who focuses on Salesforce Mobile. He is currently working on Mobile Platform Experiences and has been in the web and mobile development space for over seven years. Follow him on LinkedIn.