SAPUI5 Development

how to create custom SAPUI5 signature pad control?

            Sometimes we may have to capture customer's signature in mobile devices and we may also have to save it in server for future references.SAPUI5 does not provide a signature pad control.But dont worry SAPUI5 provide a way to build our own custom controls.
           In this tutorial we will build a custom signature pad control based on canvas and
szimek/signature_pad  .Thanks to him for providing a wonderful api.We will extend standard control and with the help of this szimek's api we will create our signature pad.

Steps
  1. First step is to load SAPUI5,SignaturePad.js,mySignPad.js in index.html file.
  2. Copy and paste the code into file SignaturePad.js from
    szimek/signature_pad.
  3.  mySignPad.js contain our custom control code.In this First we will add third party module using jQuery.sap.registerModulePath() method and then we will use in our control code.copy paste below code inside mySignPad.js.We will look into details of how to create a custom control in upcoming tutorial.


  4. We have successfully created our SAPUI5 SignaturePad.Now we will use in our application.For that instantiate signature pad and two buttons.One for clearing the signature and one for saving the signature as an image.Iam using js view so that i will place the below code inside createContent method of my view.


  5. Place below code in our controller.These are our function codes for clearing and saving the customer signature.We can code this in view itself but we are following mvc pattern so it will be easy to maintain the code.We seperate function logic and view controls in seperate files.copy these methods after onInit method.Dont forget to put comma after the onInit method.


  6. Instantiate the view and place the view at content of index.html. 


  7. Output of our signature pad look like this.Try signing ......Provide feedback if you liked this.

Signature Pad demo
If you enjoyed this post, I’d be grateful if you’d help it spread by sharing.Thank you! See you soon

6 comments :

  1. Hi! THis doesn't work in Fiori Launchpad, it doesn't recognize the user-taps :-(

    ReplyDelete
    Replies
    1. oops!!!! I didnt check it in fiori launchpad..It should have worked..

      Delete
    2. Hi

      Yes I have the same issue it doesn't work in Fiori Launchpad. Can you please help us out.

      Delete
  2. Hi Shakti and Christian,
    The reason it is not working in the fiori launchpad may be the two files I am loading in index.html will not be loaded in fiori. When we add our app to fiori the index.html will not be loaded. It only loads component.js fiori launchpad has a separate standalone html page. Try loading those two files elsewhere may be in the component.js or in any of the view or controller.
    Regards

    ReplyDelete
  3. Hi Rajesh,

    You are right, but I have called up two files in my controller and I can see it in my on browser debug.The same app is working fine when I run it directly as ui5 app I mean without fiori launchpad.

    Warm Regards,
    Shakti

    ReplyDelete
    Replies
    1. Hi Shakti,
      There will be something called fiori launchpad . html try adding the files in that file. If it works then the files are not loaded in the correct order now

      Delete

Powered by Blogger.