How to use signature pad in service portal page?

[Felix20]

Hallo everybody,

I'm working on a PoC and one requierement is to sign a table entry (request).

So user will have to fill a form and finally sign it using a signature pad. I saw there is a plugin: com.snc.signaturepad which activates a UI Page which contains a signature pad.

But how to use that UI Page as part of a widget in Service Portal?

Because our page will be face to customer, we dont want to our customer to be in backend so sign the filled form.

I searched long time and haven found a solution yet.

e-Signature is not a possibility, because we need it manually signed and username + password is not an option.

Best regards,

[rcard11]

Hi Sachin!  Our usecase is that we have implemented Workplace Service Delivery and Visitor Management as part of that.  As part of the visitor management record producer, we'd like to capture a signature of the visitor when they are filling in their information as part of the record producer.  I've been able to add the signature pad via a variable to the record producer, but have run into issues trying to take that signature and attach it to the record prior to it being submitted.  

Basically the process flow would be...

(1)  Visitor enters in basic information on record producer form, views an NDA (already on the record producer) and then is able to sign on the record producer.  At that point they would click submit and a case would be created and the signature would be added either as an attachment to the case or mapped to a field.  Either would work.  

I just can't seem to get the last piece of that to work and actually attach or appear as part of the case.  Thank you in advance for your help!!

[Sachin Dahiya]

Hello,

We have implemented the signature pad. Where user signs on the record

producer and click Confirm signature button. And when record producer is submitted we are attaching the signature on the case record as an attachment and then doing further process of generating a pdf document out of that. Below are the steps that could be useful to you:

1. Add signature pad to RP via a variable with type ‘Macro’ or ‘Macro with Label’. We got the widget from communities and made some changes. Pasting the code of widget in below table.

Widget HTML	Widget CSS	Widget Client Controller Script
<div class="signature-main-div">   <scratch-pad accept="c.accept" clear="c.clear" height="150" width="350"></scratch-pad>   <button class="btn btn-primary" ng-click="c.done()">Confirm signature</button>   <button class="btn btn-danger" ng-click="c.clearVal()">Clear signature</button>   <div id="validation-msg" ng-show="c.showval" class="mt24 txt-m">Signature confirmed<div> </div>	.signature-main-div {   margin: 10px;   margin-top: 15px;   border-radius: 6px;   .signature {     margin-left:-10px;     margin-right: auto;     margin-bottom: 10px;   }   .signature canvas {     border: 1px solid #ddd;     border-radius: 6px;     margin: 0 auto;     cursor: pointer;   } } .btn-danger {     color: #2D7CAF;     background-color: #fff;     border-color: #D0D3D7; }	function ScratchPadController($scope) {     var c = this;     c.showval = false;     c.done = function() {         var signature = c.accept();         c.showval = true;         if (signature.isEmpty) {             // console.log('scratch pad empty');         } else {             // console.log(signature.dataUrl);             var str = signature.dataUrl;             var newInput = {                 value: signature.dataUrl             }             var finalstr = str.replace(/^data&colon;image\/(png|jpg);base64,/, "");             $scope.page.g_form.setValue('base64value', finalstr);             //c.server.get(newInput);         }     }     c.clearVal = function() {         $scope.page.g_form.setValue('base64value', '');         c.showval = false;         var signature = c.clear();     } }

1. On click of confirm signature button below signature pad, store the signature in another variable by converting the signature to base64 format. Refer to client script of widget to see how we are setting this.
2. On RP ‘Post insert script’ part, add below script to attach the sign as an attachment to Case

var content =producer.base64value;  //base64value is my Multi line text variable name

var fileName = 'submitter-sign.png';  //name given to attachment at target record

var contentType = 'image/png';

var tableName = 'sn_customerservice_case';

var tableSysId = current.sys_id;

var eccGr = new GlideRecord('ecc_queue');

eccGr.initialize();

eccGr.setValue('agent', 'AttachmentCreator');

eccGr.setValue('topic', 'AttachmentCreator');

eccGr.setValue('name', fileName+':'+contentType);

eccGr.setValue('source', tableName+':'+tableSysId);

eccGr.setValue('payload', content);

var sys_id = eccGr.insert();

Let me know if you need more information. Have a great weekend.

[rcard11]

Thank you so much!  I've created the widget, but the actual signature pad is not appearing.  Just the two buttons.  Is there any additional HTML needed on the widget?

[Sachin Dahiya]

Hi,

Looks like you have not added Angular provider and widget dependencies. I would recommend you to load the update set provided on this link:
https://github.com/platform-experience/serviceportal-widget-library/blob/master/pe-emp-exp-signature...

Once you have committed the update set then you can make the required changes as per my response above to accept the sign and store as base64 and then attach on target record.

[Shreya]

Hi Sachin,

can you please briefly explain about changes