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 3^rd 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