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. jQuery.sap.registerModulePath('SignaturePad', 'SignaturePad');
    
    sap.ui.define(["sap/ui/core/Control", "SignaturePad"], function(oControl) {
        "use strict";
        return oControl.extend("mySignPad", {
    
            metadata: {
                properties: {
                    "width": {
                        type: "sap.ui.core.CSSSize",
                        defaultValue: "300px"
                    },
                    "height": {
                        type: "sap.ui.core.CSSSize",
                        defaultValue: "100px"
                    },
                    "thickness": {
                        type: "int",
                        defaultValue: 2
                    },
                    "bgcolor": {
                        type: "sap.ui.core.CSSColor",
                        defaultValue: "white"
                    },
                    "signcolor": {
                        type: "sap.ui.core.CSSColor",
                        defaultValue: "black"
                    }
                }
            },
    
            renderer: function(oRm, oControl) {
                var thickness = parseInt(oControl.getProperty('thickness'), 10);
                oRm.write("<div");
                oRm.writeControlData(oControl);
                oRm.addStyle("width", oControl.getProperty('width'));
                oRm.addStyle("height", oControl.getProperty('height'));
                oRm.addStyle("background-color", oControl.getProperty('bgcolor'));
                oRm.writeStyles();
    
                oRm.writeClasses();
                oRm.write(">");
    
                oRm.write("<canvas width='" + oControl.getProperty('width') + "' " +
                    "height='" + oControl.getProperty('height') + "'");
                oRm.writeControlData(oControl);
                oRm.addStyle("width", oControl.getProperty('width'));
                oRm.addStyle("height", oControl.getProperty('height'));
                oRm.writeStyles();
                oRm.write("></canvas>");
                oRm.write("</div>");
            },
    
            onAfterRendering: function() {
                var canvas = document.querySelector("canvas");
                try {
                    this.signaturePad = new SignaturePad(canvas);
                } catch (e) {
                    console.error(e);
                }
            },
            clear: function() {
    
                this.signaturePad.clear();
    
            },
            save: function() {
                return this.signaturePad.toDataURL();
            }
        });
    });
    
  5. 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.
  6. createContent: function(oController) {
    
        var App = new sap.m.App();
        var Page = new sap.m.Page({
            content: [
                new mySignPad("sPad", {}),
                new sap.m.Button({
                    text: "clear",
                    press: [oController.onClear, oController]
                }),
                new sap.m.Button({
                    text: "save",
                    press: [oController.onSave, oController]
                }),
                new sap.m.Image("sImg", {})
            ]
        });
        App.addPage(Page);
        return App;
    }
    
  7. 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.
  8. onClear: function() {
    
            sap.ui.getCore().getControl("sPad").clear();
            sap.ui.getCore().getControl("sImg").setSrc();
        },
    onSave: function() {
    
            var sImg = sap.ui.getCore().getControl("sPad").save();
            sap.ui.getCore().getControl("sImg").setSrc(sImg);
    
        }
    
    
  9. Instantiate the view and place the view at content of index.html. 
  10.   // instantiate the View
      var myView = sap.ui.view({
          type: sap.ui.core.mvc.ViewType.JS,
          viewName: "my.own.view"
      });
    
      // put the View onto the screen
      myView.placeAt('content');
    
  11. Output of our signature pad look like this.Try signing ......Provide feedback if you liked this.

Signature Pad demo
If you enjoyed this post, Please Share!!

10 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
  4. Hi,

    I am also having the same issue about Fiori Launchpad. Both the files are being loaded correctly while running from Fiori launchpad. It just do not recognize the tap or the drawing which we try to draw on the canvas.

    ReplyDelete
    Replies
    1. try loading the files before loading the sapui5 bootstrap.

      Delete
  5. May I know how would I do that in the Worklist template from SAP WebIDE? I am using Worklist template for Fiori application from SAP WEBIDE.

    FYI... When I check in the developer tools, I see custom control JS as well as signature_pad.js (which contains all the code for signature is loaded on the browser.

    Thanks.

    ReplyDelete
    Replies
    1. You can use it like a normal control of sapui5. See the plunkr demo in the tutorial. If js files are loaded.It should work.

      Delete

Powered by Blogger.