Signature Pad on Service Portal

[vineetk]

Hi All,

I am planning to activate and use Signature Pad plugin and make use of it on records for digital signatures.

OOB only a table to store image + UI page is provided which can be triggered from an UI action.

What are the possibilities / ways to use accept_signature UI page from Service Portal for users.

Any help / suggestions are appreciated.

Thank you

[Inactive_Us1180]

yes, I am able to save it to an image field on a table. 

<signature-pad accept="accept" clear="clear" height="220" width="500" dataurl="dataurl"></signature-pad>

<div class="buttons">
<button ng-click="clear(); data.src = NULL">Clear Signature</button>

<button ng-click="signature = accept(); data.src = signature.dataUrl">Save Signature</button>

<span ng-if="data.src" >
Signature Saved <span class="glyphicon glyphicon-ok icon-success"></span>
</span>
</div>

I then store that data to "data.src" and save that to a field to a table. I then use a transform map to convert that field to an image. I use the same script as is used to convert a profile picture from AD to your sys_user profile. 

The widget does require a dependency ui script that I took from github. Sounds like you already have a signature code setup, you just need help storing and converting to an image. 

Here is the onAfter Transform map script I use to convert the the String value to a image field. 

attachPhoto();
function attachPhoto(){
//gs.log('User Photo Script: Attach Photo');
var sysDecodedAttachment = new GlideSysAttachment();
var DecodedBytes = GlideStringUtil.base64DecodeAsBytes(source.signature);
var attID = sysDecodedAttachment.write(target, 'signature', 'image/jpeg', DecodedBytes);
var newAttachment = new GlideRecord("sys_attachment");
newAttachment.addQuery("sys_id", attID);
newAttachment.query();
if (newAttachment.next()) {
newAttachment.table_name = "ZZ_YYsys_user";
newAttachment.table_sys_id = target.sys_id;
newAttachment.content_type = 'image/jpeg';
newAttachment.update();
}
}

Remember the string value needs to be really large. the field size I have on the string value of the signature is 20,000. 

ends up looking something like this. 

Let me know if you want to setup a quick chat and I can help you through the details and get this setup for you. 

[cnharris1]

Thanks for responding Igomez! I was using the signature widget that was created from on github:

https://github.com/platform-experience/serviceportal-widget-library/tree/master/pe-emp-exp-signature...

It works and is writing to the console, I was just having a hard time capturing it and saving it to a table.

Here's the HTML Template code:

<div class="signature-main-div">
   <scratch-pad accept="c.accept" clear="clear" height="150" width="350"></scratch-pad>
   <button class="btn btn-danger" ng-click="clear()">Clear signature</button>
   <button class="btn btn-primary" ng-click="c.done()">Accept signature</button>
 </div>

Client Script:

function ScratchPadController() {
  var c = this;
  c.done = done;

  function done() {
    var signature = c.accept();
    if (signature.isEmpty) {
      console.log('scratch pad empty');
    } else {
      console.log(signature.dataUrl);
            c.server.update();
    }
  }
}

And this part is writing to the console. I tried using the c.server.update() to try and transfer the signature over to the server side and save it but nothing I tried worked. I'll look into the onAfter Transform map and see what I can come up with. I tried using this on my server script but it didn't work:

(function() {

  /* populate the 'data' object */

  /* e.g., data.table = $sp.getValue('table'); */
    var signature = c.accept();
 var oldLog = console.log(signature.dataUrl);
    var gr = new GlideRecord('u_signature');
    gr.initialize();
    gr.u_name = gs.getUserDisplayName();
  //data.accept = gr.u_signature.toString();
    gr.u_signature = oldLog;
    gr.insert();
})();

I really appreciate you responding back to my question!

[Inactive_Us1180]

change your html button to something like this...

<button class="btn btn-primary" ng-click="c.done()" data.src = signature.dataUrl>Accept signature</button>

keep the c.server.update()

Then on the server side use 'input.src' to get the string value of the signature.

[cnharris1]

I tried the input.src on the server side but I couldn't get it to work

[Inactive_Us1180]

cnharris, do you want to setup a webex so I can help you get this working?