January 5, 2016 Less than a 1 minute read

Signature Capture Control in SAPUI5 using HTML5 Canvas

Recently I had been asked, if it is possible to capture user’s signature on mobile device and store it on the server. It is of course possible to do so using some open source tools such as “szimek/signature_pad · GitHub“. What would be interesting to know is how do we integrate it seamlessly with SAPUI5?

Here is a SAPUI5 custom control wrapper around the Signature Pad, which can make it easy for you to use this in your respective SAPUI5 / Fiori applications.

The demo can be seen here https://jsfiddle.net/rahulchoudhary/a3pz4go5/

If you dont want to use open source tools, you can still create your very own implementation using SAPUI5 custom control by attaching mouse / touch listeners to the canvas elements.

This dirty demo was written in hurry to help a colleague, hence there are lack of code comments. Feedback is always welcome to improve the implementation.

10 Comments

You must be Logged on to comment or reply to a post.

Somu Arumugam

January 5, 2016 at 5:30 am

Thanks for the article Rahul. This is indeed an unexplored area in SAPUI5 custom controls.

Nicholas Nicoloudis

January 5, 2016 at 12:02 pm

Great work Rahul, keep up the innovation and developmen!

Former Member

January 10, 2016 at 7:28 am

good job rahul.. thanks for the jsfiddle code.

Christian Hoffmann

January 12, 2016 at 3:49 pm

I like!

Aruna A R

April 5, 2016 at 9:11 am

Good one ! like it

SaiNithesh Gajula

January 10, 2017 at 4:19 am

If it is view controller, it is working fine. But not working in the fragment.
I want to use signature pad in the fragment.
I am facing rendering issue, as the controller is loaded first before the fragment is called.

Please help me out on this issue.

Daniel Nguyen

April 7, 2017 at 8:54 am

This was posted quite a while ago but thought I might as well response for future readers.

Assuming you’re using custom control, be sure to declare a namespace for it it inside your fragment. Like so:

<core:FragmentDefinition 
	xmlns="sap.m" 
	xmlns:core="sap.ui.core" 
	xmlns:control="path.to.your.control">
...
</core:FragmentDefinition>

Then when the controller calls the fragment, the custom control will be loaded along with it.

Former Member

May 17, 2017 at 6:14 pm

Thank you Rahul, this is excellent.

But how to save this signature on my server to use it later?

Shakti Pandey

June 26, 2017 at 9:30 pm

Hi Rahul,

Thanks. Great Job.
Its working fine in my SAPUI5 Application, but when I deployed my app to FIORI Launchpad the I am draw signature on signature pad (CANVAS). Do you have any idea why it is happening. There is no error in console at all.
Thanks

Devisha Bhavik

May 14, 2018 at 8:24 pm

Hi Shakti,

Did you get it to work from the Fiori launchpad?

@Rahul Choudhary: Do you know why it is not working from Fiori launchpad and just working outside? What do we need to do to make it work from Fiori launchpad?

Thanks,

Bhavik

Signature Capture Control in SAPUI5 using HTML5 Canvas

Assigned Tags