Graphical signature

The graphical-signature component is an element to may be used to sign graphically (by drawing on the screen) user data. A signature may be drown with a mouse, pen or finger directly on the device’s screen.

Features

• draw signature on the screen within the component’s canvas area
• clean the canvas
• attach an action to on-sign event to process the image further
• the signature image is stored as base64 encoded string

The component has the following propeties:

• “type” - must be: “graphical-signature”
• “onOK” - the action to run when “Sign” button is pressed

When Sign is pressed, the action can read the signature data from the following property:

• “signature” - the base64 encoded representation of the signature image

Here is an example of a complete form that uses graphical-signature component:

{
    "text": "Graphical signature",
    "params": ["documentId"],
    "elements": [
        { "type": "h4", "text": "Sign the following document" },
        { "type": "br" },
        
        { "id": "documentId", "text": "Document id", "length": "10", "type": "text", "readonly": true },

        { "id": "signature", "type": "graphical-signature", 
            "onOK": {
                "method": "appGraphicalSignature.add",
                "params": {
                        "signature": "signature",
                        "documentId": "documentId"
                },
                "onOK": {
                    "form": "signatureOK"                
                }
            }
        }
    ],
    "actions": [
        "*back",
        "*close"
    ]
}

And the form in the app …

In the example the field documentId is passed as a parameter to the form. The signature is saved on the server together with documentId by signature.save method.

Saving the signature

Next step is to write the method which will save signature into file. In the example the method name is appGraphicalSignature.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