This document shows how to integrate a signature pad device with WebDynpro ABAP HTML Islands (731 SP5).
Signature Pad vendor website : https://www.topazsystems.com/
Prerequisites:
Install the browser plugin for the signature pad device as per instructions on the web site. I got it for my device here.
It comes with a DemoOCX application which can help you get a sample ‘.SIG’ file to test your Web Dynpro App.
Read on HTML Islands at this blog post.
The solution:
We will build a page with a rectangular window where the signature would appear as the user signs on the Signature Pad tablet using the tablet pen.
This rectangular area is where the Device’s browser plugin will be loaded.
Hitting the ‘Sign’ button will trigger Javascript code which will ready the device to accept the signature.
The ‘Done’ button will again trigger Javascript code which will read the signature into a bitmap hexadecimal string and pass it on to the back end server via the HTMLEVENT call back functionality. At the back end, the hex image data would be saved as a BDS document (SE78). It will also make the signature available for download on the frontend PC.
The ‘Import’ button was added for testing purposes and would typically not form part of the production solution. It imports a sample signature file into the signature window.
Development:
Step 1
Set up the view in the WDA component as shown
Associate an HTMLSCRIPT element with the Javascript mySign.js we will shortly build and load to the MIME repository as follows
The HTMLEVENT node will be called by Javascript with the bitmap data in hexadecimal string format.
Following is the setup of buttons:
| Button ID | Action |
|---|---|
| BUT_SIGN | SIGN |
| BUT_IMP | IMPORT |
| BUT_DONE | DONE |
Step 2
Add code in WDDOMODIFYVIEW to add custom HTML code for the rectangular box and to load the browser plugin.
Here we will programatically update the staticHtml property of the HTMLISLAND node to add the rectangular box.
The html code was obtained from the vendor website : demo link.
The
Note the call to Javascript function ‘setCallback()’. This merely passes an object to Javascript which can be used later to call the HTMLEVENT ‘Done’.
| WDDOMODIFYVIEW | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| METHOD wddomodifyview . DATA lv_html TYPE string. IF first_time = abap_true. * *
Step 3 Build a Javascript to control the device as follows Documentation on various properties and methods from the browser plugin can be found here.
Step 4 The penultimate step is to make calls to Javascript when the buttons are clicked.
Step 5 Now when the Done button is clicked, the Javascript code callbackhndl .fireEvent(‘Done’, bmpString); will trigger the HTMLEVENT node with name ‘Done’. This will in turn trigger the ONACTIONDONECB method at the back end. The parameter bmpString is caught in the DATA parameter of method ONACTIONDONECB. The final step is to add code to ONACTIONDONECB to convert this hexadecimal string to a bmp image on the BDS server.
Here is the code for FM ZSAVE_BMP which converts the hexadecimal into SE78 image.
|
