Implement Drawing and Signature in Salesforce Lightning Web Components

While exploring HTML5 components and jQuery into Lightning Web Components I have plan in mind to have develop use case on drawing and specially to capture users signature functionality on any objects. As jQuery is still very popular Java Script library to support any web browser even in Mobile Apps, I have decide to do to support Salesforce desktop and mobile App Salesforce1 for Android and Apple.

1. Business requirement is to capture a Customer Digital Signature before Deal Opportunity.

2. Requirements is Customer to Scratch specific drawing according to Business needs.

Basics -

Before get start in depth coding lets have learn some basics -

I have used Signature Pad which is a jQuery plugin that takes advantage of HTML5 canvaselement and javascript to create a flexible and smooth Signature / Drawing Pad on your web page & app and we will building on Lightening Web Component.

<canvas class="pad" width={cWidth} height={cHeight}></canvas>

The HTML<canvas> tag is used to HTML5 draw graphics, on the fly, via scripting (usually JavaScript). However, the <canvas> element has no drawing abilities of its own (it is only a container for graphics) - you must use a script to actually draw the graphics.

The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.

var $drawnCanvas = this.template.querySelector('canvas');

The renderedCallback() is unique to Lightning Web Components. Use it to perform logic after a component has finished the rendering phase. This hook flows from child to parent. When a component renders, the expressions used in the template are reevaluated.

Salesforce Lightning Web Component

Lightning web components are custom HTML elements built using HTML and modern JavaScript. Lightning web components and Aura components can coexist and interoperate on a page. To admins and end users, they both appear as Lightning components.

If you are good in web development but new in LWC please try in trailhead to Create a Hello World Lightning Web Component .

Now Let workout to the steps how we can develop smooth drawing or signature pad and save that drawing to specific record of an Object , here I have used Opportunity for my use cases.

Step: 1 - Create Lightning Web Component project as I named it 'drawingPadLWC' .

Step: 2 - Under project directory you will have drawingPadLWC.html  there will have some HTML code define UI elements in drawingPadLWC.html and drawingPadLWC.css defined drawing pad's cursor !

Step: 3 - Now upload Jquery1_5_1.js and JQuerySignaturePad.js (files are attached) to static resources and Include  those in drawingPadLWC.js
Step: 4 - Have a look into renderedCallback()from drawingPadLWC.js 
where we have populated drawing canvas to ready for draw when run specific page.  signaturePad is calling to function that will be found  in JQuerySignaturePad.js  

Below example code will explain how possible rendering canvas to drawing mode.

    Step: 5 - How to Save Your Drawing to related record of your object?
Apex Class DrawingPadHandler.cs is responsible to save drawing class where saveDiagram(..) method will be actioned from LWC javascript drawingPadLWC.js . This action defined in onclick button event which is defined in LWC html to drawingPadLWC.html 
<lightning-button variant="destructive" label="Save" title="Save" onclick={saveDrawing} class="slds-m-left_x-small"></lightning-button>
where onclick={saveDrawing} actually calling to javascript function in drawingPadLWC.js
saveDrawing (event) {...}
and that saveDrawing event function call to Apex class to handle save diagram in your Salesforce org as content attachment with specific record.

Please post comment to get complete AppExchange package Link.

Thank You to read this.

Here are sources inline -

Attached minified js files for static resource:
jquery.signaturepad.min.js and
jquery.min.js

Ref:

https://developer.salesforce.com/docs/component-library/documentation/en/lwc
https://www.jqueryscript.net/other/Smooth-Signature-Pad-Plugin-with-jQuery-Html5-Canvas.html
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_lifecycle_hooks_rendered

Implement Salesforce Custom Notification Actions using Apex code Rest API Included Test Class

‪Code Way You to start with creating a Salesforce custom notification, enable Lightning Experience & Mobile App notifications!!‬

Custom Notification is very important to send alerts on desktop and/or mobile & keep your users in the know when important. Sometimes it is necessary to use custom Apex code instead using Process Builder or Flow. 

Here I tried to write code with schedular to run autonomously as cron job by Apex Schedular Class.

This Example will show how to trigger Alert to an Opportunity owner in day to Opportunity  Closing date , or this class can be reused for any objects with custom message with minimum required re coding. I have in Included Test Class too .

Before you send a custom notification, you must first create a notification type: 

How to create a Notification Type :

To send custom notifications via a process in Process Builder, a Flow in Flow Builder, or invocable action API you must Create notification types.

1. Enter Notification Builder in the Quick Find box in Setup, then select Custom Notifications.
2. Click New and add your Custom Notification Name and API Name, and supported channels.
3. Save your notification type.
4. If you enable the mobile channel, you must enable the supported apps for your notification type.
   1. From Setup, enter Notification Builder in the Quick Find box, then select Notification Delivery Settings.
   2. Choose your custom notification type, and select Edit from the dropdown menu.
   3. Select the supported applications for your notification type and save.

Supported REST HTTP Methods

* This object is available in API version 46.0 and later.

URI

/vXX.X/actions/standard/customNotificationAction

Formats

JSON, XML

HTTP Methods

GET, HEAD, POST

Authentication

Authorization: Bearer token

Inputs

Input	Details
customNotifTypeId	The ID of the Custom Notification Type being used for the notification.
recipientIds	The ID of the recipient or recipient type of the notification. UserId — The notification will be sent to this user, if this user is active. Values can be combined in a list up to the maximum of 500 values.
senderId	The User ID of the sender of the notification.
title	The title of the notification, as it will be seen by recipients. Maximum characters: 250.
body	body of the notification, as it will be seen by recipients. Maximum characters: 750.
targetId	The Record ID for the target record of the notification.

Sample Output:

 

Class CustNotify will get Notification Type Id, Generate JSON and call REST API to Trigger Bulk/single Notification for Object Owner !!

String NotifTypeID = [SELECT Id FROM CustomNotificationType WHERE DeveloperName = :NotifiDeveloperName].Id;

above SOQL will get Notification Type Id by passing Notification Developer Name.

Here is the Code Example :

  and this Schedule Class is to Execute CustNotify ! 

And my use case was to execute Every Midnight    to schedule to Notify Opportunity Owners .

System.schedule('Scheduled CustNotify', '0 0 0 * * ?', new CustNotifyScheduledCron ());

 

Here is the Test Class

 

Ref: 

https://developer.salesforce.com/docs/atlas.en-us.api_action.meta/api_action/actions_obj_custom_notification.htm

https://help.salesforce.com/articleView?id=notif_builder_custom_type.htm&type=5