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
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