Create custom control for digital signature.
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
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> 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.
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.