Skip to Content
Author's profile photo Saranya Sampath

Custom Control for Digital Signature

Agenda

Create custom control for digital signature.

Target Audience

Code developers with UI5 and browser related application development skills.

Step 1: Create new component Signature.js in new folder named custom Control.

We are extending core library Control keeping it as base control and on top of it doing our

customization .

Step 2: Define a basic template on Signature.js and add custom properties and events.

Here we have defined 5 properties:

  •    height – height of the signature pad
  •    width – width of the signature pad
  •    bgcolor – background color of the signature pad
  •    thickness – thickness of the sign
  •    signColor – color of the sign

We defined renderer,

In which we are rendering signature pad by using canvas.

And also defined an event,

  • Clear – To clear existing sign in pad
  • Export – export sign as an image (Binary string)
  • Activate – Initialize library Signature Pad

Step3:  Load your control in your UI5 view of your app or in html file

Step 4: Use the control in the view

Step 5: Add required library files. We can either add

<script src=”https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.js”>

</script> tag in index.html or download library file from the same link and store it in project folder. We will make use of signature_pad.js library. This handles all touch event, clear, export sign as an Image. Create new folder called util and add signature_pad.js under that

Step 6: Define required libraries in controller

Step 7: Activate control in controller

                      By using custom control object, activating SignaturePad(Initializing SignaturePad Library) in onAfterRendering. onClear function will clear sign in pad. By using onExport function we can get sign as binary string.

Run the application. We will get screenshot as below.

Screenshot

Conclusion:

This is a very simple use case of capturing signature. The same can be extended to any Fiori application that deals with 3rd team managing (MM for example receiving inventory) or any process in material delivery against the SO.

I tried running this application in goggle chrome browser, and it worked. Dear techies, suggesting you to try this on other popular browsers and kindly share your feedback.

This is the part of overall Fiori enrichment article written by Arun Santhanam. You can click here  to know more details about that

Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Devisha Bhavik
      Devisha Bhavik

      Hi,

       

      Thanks for this awesome blog. I followed it and it worked like a charm from the SAPUI5 application running from index.html

      I developed it on WebDIE utilizing SAPUI5 template.

       

      Now, I faced one road block with this. When i try to run the same application as "App in Fiori launchpad" through WebIDE, I can see the canvas. I can see the js files are loaded on the browser from developer tools. But, when I try to draw the signature, nothing is happening.

       

      Not sure what is wrong. Have you tried it from the Fiori launchpad?

      Let me know if you can make it work from Fiori lauchpad. I have opened forum question as well for the same : https://answers.sap.com/questions/511353/signature-capture-does-not-work-from-fiori-launchp.html?childToView=511355&answerPublished=true#answer-511355

       

      -Bhavik