64
Views
11
Comments
Solved
[Signature] js signature in Outsystems traditional not working in touch device
signature
Web icon
Forge asset by Signature Team
Application Type
Traditional Web

Good morning,
This has been used for capturing the signature, It is working fine in the desktop, mobile and tablet, but It is not working in the Desktop touch device, is anyone have any solution?


https://www.outsystems.com/forge/component-overview/501/signature

2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Naveen,

As per my observation, with the latest jSignature JS library, the signature capturing works fine on all devices. I tested it on a touchscreen laptop & mobile, and it works as expected.

Demo Screen: jSignatureDemo

ListRecordsDemo

MultipleSignaturesDemo

Git repo Url: https://github.com/brinley/jSignature

I made a few code changes in the referenced asset. 

  • Included the latest jSignature JS code to the jSignature block
  • Changed the initialization code in the script expression
  • Referenced the clear link runtime Id value, instead of referencing the clear link style class

Refer to the attached oml.

I hope this helps you!


Kind regards,

Benjith Sam

TWA_Lab_jSignature.oml
2024-07-05 14-16-55
Daniël Kuhlmann
 
MVP

Hi,

Here is the. Reactive web version, it also works on mobile for iOS, Android and PWA 

https://www.outsystems.com/forge/component-overview/1400/signature-pad 

Regards,

Daniel

2022-09-05 08-23-51
Naveen N

@Daniël Kuhlmann  Sorry, I just cheked in my mobile device it is working fine. I am facing issue in the dektop touch screen, I am using Traditional web app, please give me suggestions related to traditional.

2024-07-05 14-16-55
Daniël Kuhlmann
 
MVP

Ah right, I read "mobile device" but you wrote touch device.

Can you see if there are errors in the console when you open the browser DevTools?



2022-09-05 08-23-51
Naveen N

@Daniël Kuhlmann There is no issue in the console, the touch is not working only for the desktop version. is there any function or something to trigger it? . I am not sure how that is working for the mobile and tablet.


2024-07-05 14-16-55
Daniël Kuhlmann
 
MVP

Does touch work at all on the display of your desktop? The way the component works is that it attaches JavaScript handlers to handle the touch events. If it doesn't work, the browser console should have those errors listed.

Can you share a screen print of the app, with the devtools in the browser open and the console visible after you touch the area where you can write the signature?


2022-09-05 08-23-51
Naveen N

If i touch a dot is coming, but if i try to sign it is not working, No error in the console also.

2021-12-22 12-30-13
Rojo

I have the same exact issue. I found that the jSignature component that was used had the same issue. But, I believe it was fixed already. Please see link for reference. 

https://github.com/willowsystems/jSignature/issues/95

2022-09-05 08-23-51
Naveen N


@Rojo I checked the link you attached , it seems that is also not working for me in desktop touch,

https://willowsystems.github.io/jSignature/#/demo/

2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Naveen,

As per my observation, with the latest jSignature JS library, the signature capturing works fine on all devices. I tested it on a touchscreen laptop & mobile, and it works as expected.

Demo Screen: jSignatureDemo

ListRecordsDemo

MultipleSignaturesDemo

Git repo Url: https://github.com/brinley/jSignature

I made a few code changes in the referenced asset. 

  • Included the latest jSignature JS code to the jSignature block
  • Changed the initialization code in the script expression
  • Referenced the clear link runtime Id value, instead of referencing the clear link style class

Refer to the attached oml.

I hope this helps you!


Kind regards,

Benjith Sam

TWA_Lab_jSignature.oml
2021-12-22 12-30-13
Rojo

Hi Benjith,

Thank you so much for you help. It solved our problem. However may I know how to put back the signature line?


Regards,

Rojo

2022-09-05 08-23-51
Naveen N

@Rojo For adding signature line, please check the oml i updated.
If you want you can customize the color over the css attached in the web-block. just added few css changes to this working JS_signature.

jSignature_with_line.oml
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.