cancel
Showing results for 
Search instead for 
Did you mean: 

Signature Pad

former_member187227
Participant
0 Kudos

Hi,

          How to use Signature pad in the UI5 project. Have to put and store the signature. let me give some idea using sap.m controls.

Accepted Solutions (1)

Accepted Solutions (1)

DK007
Active Participant
0 Kudos

Here's the Signature Pad custom extension which is created using HTML5 canvas component.

Attached controller, view and custom extension. Please change file extension to .js and copy them into test folder in SAPUI5 project.

My project has a test folder and view, controller and below custom extension are placed in test folder. I'm sure there is a better way to handle data binding to model. For now I did manually.

Let me know if you have any issues.

Thanks,

Dheeram

former_member357192
Participant
0 Kudos

Where i can put SignaturePad file??

m getting the output button but button is not working

DK007
Active Participant
0 Kudos

Check instructions in my above reply. I said put them in the same folder as view and controller. If you open the controller code you can see from whether SignaturePad is refereed from.

Thanks,

Dheeram

Former Member
0 Kudos

Hi Dheeram Kallem,

I have used you application it is working perfectly alright, can you please help me in uploading this

signature image through oData to backend. 

I mean how should i pass the signature image to oData.

appreciate you help

regards,

Ishtiyaq

DK007
Active Participant
0 Kudos

Hi,

The simple solution would be add a new attribute on your OData entity which is of type string and map it to the signature in UI5. The value of this would in base64 format. Once you reterive this value in Odata, you either convert to an image or just store it as a string and use ABAP side if you want to show this signature, then you can use CL_GUI_CUSTOM_CONTAINER to display it.

Thanks,

Dheeram

Former Member
0 Kudos

Dear Dheeram,

Thanks for you guidance, as adviced I have created odata service with the new attribute for the image type string.  Now I was trying to bind the Image Url from the Signature Pad to the this odata,I am struggling with this binding of  Image Url to odata service.

Can you please share sample code how to achieve this.

thanks and best regards,

Ishtiyaq Ahmed.

DK007
Active Participant
0 Kudos

If you have instance of SignaturePad object, then you can get the signature by calling <instance_name>.getSignature() method. This will be a base54 value.

<instance_name>.isEmpty(), will return a boolean value, if the user has drawn something on the canvas or not.

Former Member
0 Kudos

Hi Dheeram,

As advised I am using the getSignature() method to get the signature and I am getting it base64 as

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAACWCAYAAACb3McZAAAMo0lEQ


Actually the issue is in passing this signature to my odata service. Below is my code please review


var fileTarget = oSignaturePad.getSignature();

OData.request(

  {

   requestUri : "/sap/opu/odata/sap/ZI_USER_PHOTO_SRV/userSet('username')/Signature",

   method : "POST",

   headers : {

   "X-Requested-With" : "XMLHttpRequest",

   "Content-Type": "application/atom+xml",

   "Content-Type" : "image/jpeg",

   "slug" : "image.png",

   "DataServiceVersion" : "2.0",

   "Accept" : "application/atom+xml,application/atomsvc+xml,application/xml",

    },

     data : fileTarget

  },

  function(data, response) {

   document.location.reload(true);

   $( "<div>Returned data " + window.JSON.stringify(data)+ "</div>").appendTo($("#MessageDiv"));

  },

  function( err) {

  $("<div>Returned error " + window.JSON.stringify(err.response + "</div>").appendTo($("#MessageDiv"));

  }

thanks for the support.

regards,

Ishtiyaq Ahmed.

DK007
Active Participant
0 Kudos

Hi,

I'm not sure how this is going to work with File Upload OData service. There should be multiple ways to do it, but what I had done is passed the signature value(string) to an attribute of an entity. Then on the OData side you can access or store this as a file.

Thanks,

Dheeram

Former Member
0 Kudos

thanks for you reply, I could able to post the image to the back end,  but stuck with another issue,

I am unable to retrieve the image.  Where could be the issue, is it  base64  content  (which I am getting through getSignature ).  How to check the whether I am sending the correct base64 format.

Regards,

Ishtiyaq

Former Member
0 Kudos

Hi  Dheeram,

The issue is resolved thank you very much for you support. In create stream method I required to

convert the xstring which I was getting form the application  to Base64 and then decode it.

Below is chunk of code.


// Below code is part of Create Stream method.


         DATA lv_filedata TYPE xstring.

         DATA lv_string TYPE string.

         lv_filedata = is_media_resource-value.

         DATA: lo_conv_x2c TYPE REF TO cl_abap_conv_in_ce.

         lo_conv_x2c = cl_abap_conv_in_ce=>create( ).

  // Convert from Xstring to String

       lo_conv_x2c->convert( EXPORTING input = lv_filedata

                               IMPORTING data  = lv_string ).

// Decode the Base64

         CALL FUNCTION 'SSFC_BASE64_DECODE'

           EXPORTING

             b64data = lv_string

*           B64LENG =

*           B_CHECK =

           IMPORTING

             bindata = ls_photo-content

*        EXCEPTIONS

*           SSF_KRN_ERROR                  = 1

*           SSF_KRN_NOOP                   = 2

*           SSF_KRN_NOMEMORY               = 3

*           SSF_KRN_OPINV                  = 4

*           SSF_KRN_INPUT_DATA_ERROR       = 5

*           SSF_KRN_INVALID_PAR            = 6

*           SSF_KRN_INVALID_PARLEN         = 7

*           OTHERS  = 8

           .

         IF sy-subrc <> 0.

* Implement suitable error handling here

         ENDIF.

thanks.

Ishtiyaq Ahmed

DK007
Active Participant
0 Kudos

Good to know that you are able to resolve the issue and glad to know that signature control was helpful to you.

Close other thread you open in this issue.

Former Member
0 Kudos

Thanks Dheeram for your support. Yeah I close the other thread.

When I moved the application on the mobile Device, getting some issue in the signature pad.

The signature is not displaying in the Canvas Area, part of it is hidden.  I mean when I am starting  the signature the signature line is appearing at the cursor position, but i can see some lines been drawn on other part of  the Canvas Area and some part of the Signature is hidden.

Can you put some light on this issue.

thanks

Ishtiyaq Ahmed.

Answers (4)

Answers (4)

Former Member
0 Kudos

This message was moderated.

Former Member
0 Kudos

This message was moderated.

former_member182862
Active Contributor
0 Kudos

I thought that we have a discussion on this sometime ago and this is what we have

JS Bin - Collaborative JavaScript Debugging

DK007
Active Participant
0 Kudos

Hi Vinoth,

Recently I developed a custom control for Signature Pad and integrated with UI5 application.

I embedded canvas and used in a custom control.

former_member187227
Participant
0 Kudos

Hi Dheeram,

Can u please send code.

DK007
Active Participant
0 Kudos

Please share your email id. I'll share my test project.

former_member187227
Participant
0 Kudos

[Moderator Message] Email sharing is not allowed as per RoE

Message was edited by: Chandrashekhar Mahajan

DK007
Active Participant
0 Kudos

Sent

former_member187227
Participant
0 Kudos

Thank you Dheeram its very usefull.

ChandraMahajan
Active Contributor
0 Kudos

Dheeram Kallem & Vinothkumar T


you need to share the solution with the community instead of sharing it in private. Share your solution for the benefit of the community.

And accordingly close the discussion marking helpful/correct answer to replies wherever it is appropriate/applicable.

-Chandra (Moderator)

former_member357192
Participant
0 Kudos

Hello

I need the code for Signature Pad

Former Member
0 Kudos

This message was moderated.