Integrating Topaz Signature pad with WebDynpro ABA...

Former Member · ‎10-13-2013

This document shows how to integrate a signature pad device with WebDynpro ABAP HTML Islands (731 SP5).

Signature Pad vendor website : http://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 <object> tag loads the browser plugin . Sigplus1 will become the object name with which we will control the device in our Javascript code. We will see this in the next step.

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.

*    <div ID='myHTMLIsland'>
*    <table border='1' cellpadding='0' width='390'>
*    <tr>
*    <td height='145' width='385'>
*    <object classid="clsid:69A40DA3-4D42-11D0-86B0-0000C025864A" height="140" width="380" id="SigPlus1" name="SigPlus1">
*    <param name="_Version" value="131095"></param>
*    <param name="_ExtentX" value="4842"></param>
*    <param name="_ExtentY" value="1323"></param>
*    <param name="_StockProps" value="0"></param>
*    </object><td></tr><table></div>

     DATA html_writer TYPE REF TO if_wd_html_writer.
     html_writer = cl_wd_html_writer=>new_writer( ).
     html_writer->start_element( 'div' ).
     html_writer->add_attribute( name = 'id' VALUE = 'myHTMLIsland').
     html_writer->start_element( 'table' ).
     html_writer->add_attribute( name = 'border' VALUE = '1').
     html_writer->add_attribute( name = 'cellpadding' VALUE = '0').
     html_writer->add_attribute( name = 'width' VALUE = '390').
     html_writer->start_element( 'tr' ).
     html_writer->start_element( 'td' ).
     html_writer->add_attribute( name = 'height' VALUE = '145').
     html_writer->add_attribute( name = 'width' VALUE = '385').

*   Load the browser plugin.
     html_writer->start_element( 'object' ).
     html_writer->add_attribute( name = 'classid' VALUE = 'clsid:69A40DA3-4D42-11D0-86B0-0000C025864A').
     html_writer->add_attribute( name = 'height' VALUE = '140').
     html_writer->add_attribute( name = 'width' VALUE = '380').
     html_writer->add_attribute( name = 'id' VALUE = 'SigPlus1').
     html_writer->add_attribute( name = 'name' VALUE = 'SigPlus1').

     html_writer->start_element( 'param' ).
     html_writer->add_attribute( name = 'name' VALUE = '_Version').
     html_writer->add_attribute( name = 'value' VALUE = '131095').
     html_writer->end_element( 'param' ).

     html_writer->start_element( 'param' ).
     html_writer->add_attribute( name = 'name' VALUE = '_ExtentX').
     html_writer->add_attribute( name = 'value' VALUE = '4842').
     html_writer->end_element( 'param' ).

     html_writer->start_element( 'param' ).
     html_writer->add_attribute( name = 'name' VALUE = '_ExtentY').
     html_writer->add_attribute( name = 'value' VALUE = '1323').
     html_writer->end_element( 'param' ).

     html_writer->start_element( 'param' ).
     html_writer->add_attribute( name = 'name' VALUE = '_StockProps').
     html_writer->add_attribute( name = 'value' VALUE = '0').
     html_writer->end_element( 'param' ).

     html_writer->end_element( 'object' ).
     html_writer->end_element( 'td' ).
     html_writer->end_element( 'tr' ).
     html_writer->end_element( 'table' ).

     html_writer->end_element( 'div' ).

     lv_html = html_writer->get_html( ).
     wd_this->m_html_island ?= view->get_element( 'HTML_ISLAND' ).
     wd_this->m_html_island->set_static_html( VALUE = lv_html ).

*   Set the callback variable to enable Javascript to call DONECB.
     DATA l_call TYPE REF TO if_wd_html_script_call.
     l_call = cl_wd_html_script_call=>new_call( ). " Create a new script call
     l_call->function( 'setCallback' ).
     l_call->add_callback_api( ).
     wd_this->m_html_island->add_script_call( l_call ).
     ENDIF.
     ENDMETHOD.

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.

mySign.js

var callbackhndl;

function setCallback(callback) {

callbackhndl = callback;

}

function onSign() {

SigPlus1.ClearTablet();

SigPlus1.TabletState = 1;

}

function onImport() {

var Filename = 'C:\\sign\\Sign.sig';

SigPlus1.ImportSigFile(Filename);

}

function onDone(){

if (SigPlus1.NumberOfTabletPoints === 0) {

alert("Please sign to continue");

} else {

SigPlus1.TabletState = 0;

SigPlus1.EncryptionMode = 0;

SigPlus1.SigCompressionMode = 0;

var sigString = SigPlus1.SigString;

SigPlus1.ImageFileFormat = 0;

SigPlus1.ImageXSize = 380;

SigPlus1.ImageYSize = 140;

SigPlus1.ImagePenWidth = 12;

SigPlus1.JustifyMode = 5;

SigPlus1.BitMapBufferWrite();

var bmpByte = SigPlus1.BitMapBufferByte(0);

var bmpTemp;

var bmpString = bmpByte.toString(16);

var hexzero = '0';

Size = SigPlus1.BitMapBufferSize();

for (var i = 1; i < Size; i++) {

bmpByte = SigPlus1.BitMapBufferByte(i);

bmpTemp = bmpByte.toString(16);

if ( bmpTemp.length === 1) {

bmpTemp = hexzero.concat( bmpTemp);

}

bmpString = bmpString.concat(bmpTemp.toUpperCase());

}

SigPlus1.BitMapBufferClose();

SigPlus1.TabletState = 0;

callbackhndl .fireEvent('Done', bmpString);

}

Step 4

The penultimate step is to make calls to Javascript when the buttons are clicked.

ONACTIONSIGN
METHOD ONACTIONSIGN . * Call Javascript function onSign() DATA l_call TYPE REF TO if_wd_html_script_call. l_call = cl_wd_html_script_call=>new_call( ). " Create a new script call l_call->function( 'onSign' ). wd_this->m_html_island->add_script_call( l_call ). ENDMETHOD.

ONACTIONIMPORT
method ONACTIONIMPORT . * Call Javascript function onImport() DATA l_call TYPE REF TO if_wd_html_script_call. l_call = cl_wd_html_script_call=>new_call( ). " Create a new script call l_call->function( 'onImport' ). wd_this->m_html_island->add_script_call( l_call ). endmethod.

ONACTIONDONE
method ONACTIONDONE . * Call Javascript function onDone() * onDone() will then callback WDA HTML_EVENT ONDONECB DATA l_call TYPE REF TO if_wd_html_script_call. l_call = cl_wd_html_script_call=>new_call( ). " Create a new script call l_call->function( 'onDone' ). wd_this->m_html_island->add_script_call( l_call ). endmethod.

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.

ONACTIONDONECB

METHOD onactiondonecb .
*--------------------------------------------------------------------*
*   Method Interface
*   WDEVENT CL_WD_CUSTOM_EVENT
*   CONTEXT_ELEMENT IF_WD_CONTEXT_ELEMENT
*   DATA STRING
*   ID STRING
*--------------------------------------------------------------------*
     DATA lo_el_context TYPE REF TO if_wd_context_element.
     DATA ls_context TYPE wd_this->element_context.
     DATA lv_mybmp TYPE xstring.
     DATA : lv_name TYPE thead-tdname,
           lv_docid TYPE stxbitmaps-docid,
           lv_res TYPE stxbitmaps-resolution.

   IF DATA IS NOT INITIAL.

* get element via lead selection
     lo_el_context = wd_context->get_element( ).

    lv_mybmp = DATA.

* set single attribute
     lo_el_context->set_attribute(
     name = 'MYBMP'
     VALUE = lv_mybmp ).

     CONCATENATE 'ZHEX-MACRO-SIGN' sy-uzeit INTO lv_name.
     CALL FUNCTION 'ZSAVE_BMP'
     EXPORTING
       iv_string         = lv_mybmp
       p_name            = lv_name
     CHANGING
       p_docid           = lv_docid
       p_resolution      = lv_res
     EXCEPTIONS
       error_occurred    = 1
       conversion_failed = 2
       OTHERS            = 3.
     IF sy-subrc <> 0.

* report message
       CALL METHOD wd_this->go_msg_mngr->report_t100_message
       EXPORTING
         msgid = sy-msgid
         msgno = sy-msgno
         msgty = sy-msgty
         p1    = sy-msgv1
         p2    = sy-msgv2
         p3    = sy-msgv3
         p4    = sy-msgv4.

     ELSE.

*     report message
       CALL METHOD wd_this->go_msg_mngr->report_success
         EXPORTING
           message_text    = 'Signature captured'
           .

     ENDIF.

     DATA filename1 TYPE string VALUE 'sign.bmp'.

*   This code will ask user to download signature as bmp. See WDR_TEST_EVENTS for button.
     cl_wd_runtime_services=>attach_file_to_response(
     i_filename = filename1
     i_content   = lv_mybmp
     i_mime_type = 'image/bmp'
     i_in_new_window = abap_false
     i_inplace       = abap_false ).

   ENDIF.

ENDMETHOD.

Here is the code for FM ZSAVE_BMP which converts the hexadecimal into SE78 image.

Header 1

FUNCTION zsave_bmp.
*"----------------------------------------------------------------------
*"*"Local Interface:
*" IMPORTING
*"     REFERENCE(IV_STRING) TYPE XSTRING OPTIONAL
*"     REFERENCE(P_FILENAME) TYPE RLGRAP-FILENAME OPTIONAL
*"     REFERENCE(P_NAME) TYPE STXBITMAPS-TDNAME OPTIONAL
*"     REFERENCE(P_OBJECT) TYPE STXBITMAPS-TDOBJECT DEFAULT 'GRAPHICS'
*"     REFERENCE(P_ID) TYPE STXBITMAPS-TDID DEFAULT 'BMAP'
*"     REFERENCE(P_BTYPE) TYPE STXBITMAPS-TDBTYPE DEFAULT 'BCOL'
*"     REFERENCE(P_FORMAT) TYPE C DEFAULT 'BMP'
*"     REFERENCE(P_TITLE) TYPE BAPISIGNAT-PROP_VALUE DEFAULT
*"       'SIGNATURE'
*"     REFERENCE(P_RESIDENT) TYPE STXBITMAPS-RESIDENT OPTIONAL
*"     REFERENCE(P_AUTOHEIGHT) TYPE STXBITMAPS-AUTOHEIGHT DEFAULT 'X'
*"     REFERENCE(P_BMCOMP) TYPE STXBITMAPS-BMCOMP DEFAULT 'X'
*" CHANGING
*"     REFERENCE(P_DOCID) TYPE STXBITMAPS-DOCID
*"     REFERENCE(P_RESOLUTION) TYPE STXBITMAPS-RESOLUTION
*" EXCEPTIONS
*"      ERROR_OCCURRED
*"      CONVERSION_FAILED
*"----------------------------------------------------------------------

   DATA: l_object_key TYPE sbdst_object_key.
   DATA: l_tab        TYPE ddobjname.
   DATA: BEGIN OF l_bitmap OCCURS 0,
     l(64) TYPE X,
   END OF l_bitmap.
   DATA: l_filename        TYPE string,
         l_bytecount       TYPE I,
         l_bds_bytecount   TYPE I,
         lv_siz            TYPE I,
         lv_string         TYPE xstring.
   DATA: l_color(1)        TYPE C,
         l_width_tw        TYPE stxbitmaps-widthtw,
         l_height_tw       TYPE stxbitmaps-heighttw,
         l_width_pix       TYPE stxbitmaps-widthpix,
         l_height_pix      TYPE stxbitmaps-heightpix.
   DATA: l_bds_object      TYPE REF TO cl_bds_document_set,
         l_bds_content     TYPE sbdst_content,
         l_bds_components TYPE sbdst_components,
         wa_bds_components TYPE LINE OF sbdst_components,
         l_bds_signature   TYPE sbdst_signature,
         wa_bds_signature TYPE LINE OF sbdst_signature,
         l_bds_properties TYPE sbdst_properties,
         wa_bds_properties TYPE LINE OF sbdst_properties.
   DATA wa_stxbitmaps TYPE stxbitmaps.

* Enqueue
   PERFORM enqueue_graphic(SAPLSTXBITMAPS)
   USING p_object
         p_name
         p_id
         p_btype.

   lv_string = iv_string.
   lv_siz = XSTRLEN( lv_string ).
   WHILE lv_siz > 0.
     IF lv_siz > 64.
       l_bitmap-l = lv_string(64).
     ELSE.
       l_bitmap-l = lv_string.
     ENDIF.
     APPEND l_bitmap.
     CLEAR l_bitmap.
     SHIFT lv_string BY 64 PLACES LEFT IN BYTE MODE.
     lv_siz = XSTRLEN( lv_string ).
   ENDWHILE.

   IF p_btype = c_bmon.
     l_color = abap_false.
   ELSE.
     l_color = abap_true.
   ENDIF.

* Bitmap conversion
   CALL FUNCTION 'SAPSCRIPT_CONVERT_BITMAP_BDS'
   EXPORTING
     COLOR                    = l_color
     FORMAT                   = p_format
     resident                 = p_resident
     bitmap_bytecount         = l_bytecount
     compress_bitmap          = p_bmcomp
   IMPORTING
     width_tw                 = l_width_tw
     height_tw                = l_height_tw
     width_pix                = l_width_pix
     height_pix               = l_height_pix
     dpi                      = p_resolution
     bds_bytecount            = l_bds_bytecount
   TABLES
     bitmap_file              = l_bitmap
     bitmap_file_bds          = l_bds_content
   EXCEPTIONS
     format_not_supported     = 1
     no_bmp_file              = 2
     bmperr_invalid_format    = 3
     bmperr_no_colortable     = 4
     bmperr_unsup_compression = 5
     bmperr_corrupt_rle_data = 6
     OTHERS                   = 7.
   IF sy-subrc <> 0.
     PERFORM dequeue_graphic(SAPLSTXBITMAPS) USING p_object
           p_name
           p_id
           p_btype.
     MESSAGE ID sy-msgid TYPE sy-msgty NUMBER sy-msgno
     WITH sy-msgv1 sy-msgv2 sy-msgv3 sy-msgv4
     RAISING conversion_failed.
   ENDIF.

* Save bitmap in BDS
   CREATE object l_bds_object.

   wa_bds_components-doc_count = '1'.
   wa_bds_components-comp_count = '1'.
   wa_bds_components-mimetype   = c_bds_mimetype.
   wa_bds_components-comp_size = l_bds_bytecount.
   APPEND wa_bds_components TO l_bds_components.

   IF p_docid IS INITIAL.          " graphic is new

     wa_bds_signature-doc_count = '1'.
     APPEND wa_bds_signature TO l_bds_signature.

     CALL METHOD l_bds_object->create_with_table
     EXPORTING
       classname = c_bds_classname
       classtype = c_bds_classtype
       components = l_bds_components
       content    = l_bds_content
     CHANGING
       signature = l_bds_signature
       object_key = l_object_key
     EXCEPTIONS
       OTHERS     = 1.
     IF sy-subrc <> 0.
       PERFORM dequeue_graphic(SAPLSTXBITMAPS) USING p_object
             p_name
             p_id
             p_btype.
       MESSAGE e285 WITH p_name 'BDS'.
     ENDIF.
     READ TABLE l_bds_signature INDEX 1 INTO wa_bds_signature
     TRANSPORTING doc_id.
     IF sy-subrc = 0.
       p_docid = wa_bds_signature-doc_id.
     ELSE.
       PERFORM dequeue_graphic(SAPLSTXBITMAPS) USING p_object
             p_name
             p_id
             p_btype.
       MESSAGE e285 WITH p_name 'BDS'.
     ENDIF.

   ELSE.                " graphic already exists
********* read object_key for faster access *****
     CLEAR l_object_key.
     SELECT SINGLE * FROM stxbitmaps INTO wa_stxbitmaps
     WHERE tdobject = p_object
     AND tdid     = p_id
     AND tdname   = p_name
     AND tdbtype = p_btype.
     SELECT SINGLE tabname FROM bds_locl INTO l_tab
     WHERE classname = c_bds_classname
     AND classtype = c_bds_classtype.
     IF sy-subrc = 0.
       SELECT SINGLE object_key FROM (l_tab) INTO l_object_key
       WHERE loio_id = wa_stxbitmaps-docid+10(32)
       AND classname = c_bds_classname
       AND classtype = c_bds_classtype.
     ENDIF.
******** read object_key end ********************

     CALL METHOD l_bds_object->update_with_table
     EXPORTING
       classname = c_bds_classname
       classtype = c_bds_classtype
       object_key = l_object_key
       doc_id     = p_docid
       doc_ver_no = '1'
       doc_var_id = '1'
     CHANGING
       components = l_bds_components
       content    = l_bds_content
     EXCEPTIONS
       nothing_found = 1
       OTHERS        = 2.
     IF sy-subrc = 1.   " inconsistency STXBITMAPS - BDS; repeat check in
       wa_bds_signature-doc_count = '1'.
       APPEND wa_bds_signature TO l_bds_signature.

       CALL METHOD l_bds_object->create_with_table
       EXPORTING
         classname = c_bds_classname
         classtype = c_bds_classtype
         components = l_bds_components
         content    = l_bds_content
       CHANGING
         signature = l_bds_signature
         object_key = l_object_key
       EXCEPTIONS
         OTHERS     = 1.
       IF sy-subrc <> 0.
         PERFORM dequeue_graphic(SAPLSTXBITMAPS) USING p_object
               p_name
               p_id
               p_btype.
         MESSAGE e285 WITH p_name 'BDS'.
       ENDIF.
       READ TABLE l_bds_signature INDEX 1 INTO wa_bds_signature
       TRANSPORTING doc_id.
       IF sy-subrc = 0.
         p_docid = wa_bds_signature-doc_id.
       ELSE.
         PERFORM dequeue_graphic(SAPLSTXBITMAPS) USING p_object
               p_name
               p_id
               p_btype.
         MESSAGE e285 WITH p_name 'BDS'.
       ENDIF.

   ELSEIF sy-subrc = 2.
       PERFORM dequeue_graphic(SAPLSTXBITMAPS) USING p_object
             p_name
             p_id
             p_btype.
       MESSAGE e285 WITH p_name 'BDS'.
     ENDIF.

   ENDIF.

* Save bitmap header in STXBITPMAPS
   wa_stxbitmaps-tdname     = p_name.
   wa_stxbitmaps-tdobject   = p_object.
   wa_stxbitmaps-tdid       = p_id.
   wa_stxbitmaps-tdbtype    = p_btype.
   wa_stxbitmaps-docid      = p_docid.
   wa_stxbitmaps-widthpix   = l_width_pix.
   wa_stxbitmaps-heightpix = l_height_pix.
   wa_stxbitmaps-widthtw    = l_width_tw.
   wa_stxbitmaps-heighttw   = l_height_tw.
   wa_stxbitmaps-resolution = p_resolution.
   wa_stxbitmaps-resident   = p_resident.
   wa_stxbitmaps-autoheight = p_autoheight.
   wa_stxbitmaps-bmcomp     = p_bmcomp.
   INSERT INTO stxbitmaps values wa_stxbitmaps.
   IF sy-subrc <> 0.
     UPDATE stxbitmaps FROM wa_stxbitmaps.
     IF sy-subrc <> 0.
       MESSAGE e285 WITH p_name 'STXBITMAPS'.
     ENDIF.
   ENDIF.

* Set description in BDS attributes
   wa_bds_properties-prop_name = 'DESCRIPTION'.
   wa_bds_properties-prop_value = p_title.
   APPEND wa_bds_properties TO l_bds_properties.

   CALL METHOD l_bds_object->change_properties
   EXPORTING
     classname = c_bds_classname
     classtype = c_bds_classtype
     object_key = l_object_key
     doc_id     = p_docid
     doc_ver_no = '1'
     doc_var_id = '1'
   CHANGING
     properties = l_bds_properties
   EXCEPTIONS
     OTHERS         = 1.

   PERFORM dequeue_graphic(SAPLSTXBITMAPS) USING p_object
         p_name
         p_id
         p_btype.

ENDFUNCTION.

Integrating Topaz Signature pad with WebDynpro ABAP with HTML Islands

SAP PI for Beginners

ABAP 7.40 Quick Reference

Fiori: technical installation and configuration of one app from A - Z