How to use graphical-signature component?

There is component “graphical-signature” available in JForms.

{
    "text": "Signature",
    "params": ["documentId"],
    "elements": [
        { "text": "Sign the following document", "type": "h4"},
        { "id": "signature", "type": "graphical-signature", "onOK": {
            "method": "signatureMethod.add",
            "params": {
                    "signature": "signature",
                    "documentId": "documentId"
                },
                "onOK": "*back"
            }
        }
    ],
    "actions": [
        "*back"
    ]
}

Example of graphical signature panel

To include graphical signature component just add element into JForm with type “graphical-signature”. This component returns encrypted signature which is built based on the graphical representation of signature on the screen.

NOTE: In the example the documentId is passed as parameter to the form. The signature is saved together with document id.

Next step is to write method which will save signature into file. In the example the method name is signatureMethod.add The signature is converted to string which we can’t predict the length. How to store the graphical signature in file? In this case the best idea is to use CLOB field in file to store this information. To create file, we use DDL (SQL) and CLOB field which has maximum length 16000 characters.

CREATE TABLE MYLIB.SIGNATURES (        
 SID        CHAR(32) NOT NULL,            
 SIGN       CLOB(16000) NOT NULL
 )                                         

Then You need to use SQL variables in RPG program.

D lData           S                   SQLTYPE(CLOB:16000)    

The definition above actually creates structure which contains two elements:

  • lData_data <– this element contains data
  • lData_len <– this element contains length of data

Then in the RPG program you can use lData_data and lData_len to operate on CLOB fields

gId = reqGetBlobValue('params':'documentId':gLen); 
gPtr = reqGetBlobValue('params':'signature':gLen); 

lData = '';                                
memcpy(%ADDR(lData_data) :gPtr :gLen);   
lData_len = gLen;

Then lData can be used in SQL to add/update record in file

EXEC SQL                                                     
  INSERT INTO MYLIB.SIGNATURES                                     
    (SID, SIGN)     
    VALUES                                                   
    (:gId, :lData);                                         

There are example programs in QSAMPLES source file:

  • EXAMPLE014 SQLRPGLE appGraphicalSignature.add
  • EXAMPLE015 SQLRPGLE appGraphicalSignature.delete
  • EXAMPLE016 SQLRPGLE appGraphicalSignatures.get