on 05-05-2015 5:15 PM
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.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
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.
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.
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
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
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.
This message was moderated.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
This message was moderated.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
I thought that we have a discussion on this sometime ago and this is what we have
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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)
| User | Count |
|---|---|
| 3 | |
| 3 | |
| 2 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.