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,

[Sachin Dahiya]

Hi Shreya,

First I loaded PE Signature Pad loaded from https://github.com/platform-experience/serviceportal-widget-library/blob/master/pe-emp-exp-signature...

1. After committing the update set, we made the below changes:
   1. Stored the signature value in a hidden variable by converting that into base64. For this, we made changes to the Widget Client script. The updated client script is:

      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: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();

          }

      }

   2. Another changes was to attach the converted signature to the target record. For that, we added ‘Post insert script’ on record producer, see below script to attach the sign as an attachment to Case(target record)

      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();

[Shreya]

Hi Sachin,

Thankyou so much, but still only 2 buttons are visible.. signature pad is not visible

[Sachin Dahiya]

Hi,

Can you please confirm if you committed the update set named "PE Emp Exp Signature Modal Header " from the link above. This update set contains all the required angular providers and scripts required for sign pad to appear. I tried in my PDI and this is what the update set looks like after committing.

And, after that, I created a test RP with a variable type 'Custom' and added the widget. This is what I can see.

If you are unable to see the scratchpad after following above steps then , can you post all the steps you followed to make this work and I cna review.

Thanks,

Sachin

[Shreya]

Hi Sachin,

I am able to sign it now and attachment is also attaching to target record but that attachment is not supporting when downloaded.

[kiran79]

I’ve successfully implemented the feature to attach the signature to the case and store it in an image-type field in the table. However, I’m encountering an issue when trying to add this image field to the document—the signature isn’t appearing in the generated document. Could you please share how you managed to get it added to the document?

Edit:

got the solution and I am able to use the generated image as signature for document now.