axSignaturePad

Description

axSignaturePad allows a signature pad extension to be inserted into the 5250 screen.

Usability

Context	Supported
Input screen fields	No
Output screen fields	No
Input subfile fields	No
Output subfile fields	No
New screen elements	Yes

Properties

onButtonClear

Event that fires when the clear button is clicked.Yes

Name	Description and Comments	JavaScript	Shipped default
imagePath	Path to locate the signature base64 or binary png image file. the imagePath is a sub folder relative to /ts/screens/<project name>/ or longreach shared folder if save mode is Save To Others and using LongReach API	No	*DEFAULT
imageName	Name of the signature base64 image file or binary png file if save mode is Save To Others	No	signature_img
onButtonSave	Event that fires when the save button is clicked.	Yes
onLoadData	JavaScript code that is to be executed for loading signature pad image.	Yes	this._loadFromOthers();
onScreenReady	JavaScript code that is to be executed every time layout render of all extension is completed.	Yes	None
saveMode	Mode of saving signature image.	Yes	Save To IFS
text	Text applied to signature pad	No	Sign Above

Notes, Comments and Warnings

The properties – imagePath and imageName is only used when saveMode is “Save To IFS” and “Save To Others” options property is selected.
imagePath is a subfolder relative to the project folder. example: IFS/<aXes_Instace>/ts/screens/<project_name>/. or /<axes instance>/longreachdata/shared/ if save mode is “Save To Others” and using LongReach API.
onLoadData events executes only when save mode is “Save To Others”, this event can be use as a custom loading of signature pad image from other sources.
Using longreach api is available only on latest available patch 780070 or aXes420.001.

Examples (1) Save To IFS

(1). change the text property to "Sign Here…"

(2). edit onButtonClear property and add the code below

window.alert("The clear button was clicked");

then clicking on the clear button should produce an alert window.
When you clicked ok button on the alert window, it will clear the signature canvas image.

(3). edit onButtonSave property and add the code below
this._signaturePad.toDataURL() method give you access to the base64 image data.

window.alert( this._signaturePad.toDataURL() );

then clicking the save button will show the base64 image data on alert window..

Examples (2) Save To Others (LongReach API)

(1). Pre-requisite LongReach Configuration

 Notes: when LongReach (use SaveToOthers in save mode property of Signature pad extension)

a.) define the LongReach shared folder and make sure longreachdata folder is under the document root /<path of axes instance>/longreachdata.
  example for aXesW3:
   <parameter name=“service.folder.shared” value=“/axes420/longreachdata/shared”/>
  example for aXesJSM:
   <parameter name=“service.folder.shared” value=“/axes420jsm/jsm/instance/www/instance/htdocs_dev/longreachdata/shared”/>
  make sure <parameter name=“service.origin” value=“*”/> is present or add after <parameter name=“service.default.host” value=“LOCAL”/>
b.) when imagePath is *DEFAULT, an image subfolder will be created under the shared folder.
c.) make sure the shared folder and subfolder directory data authority of *PUBLIC user and should be *RW access rights.

(2). Edit USERENV and add the code below and save.Take note change jsm_port and ws_path according to the kind of axes server.

/* Long Reach initialization */
initLongReach : function()
{
/* Get Protocol */
this.protocol = document.location.protocol.toLowerCase();
/* Get IP Address */
this.ip = document.location.host.split(":")[0];
// supply jsm_port use same aXesJSM port when using aXesJSM
this.jsm_port = "5527"; // -- make sure to change this based on jsm port.
// supply webspooler url path "/axes" for aXesW3 , "/ws" for aXesJSM
var ws_path = "/axes"; // <-- make sure to change this based on your web spooler url path
// load required script
if ( typeof LUIENCRYPT === "undefined" )
{
$.getScript( this.protocol + "//" + this.ip + ":" + this.jsm_port + ws_path + "/lui-encrypt-min.js" );
}

if ( typeof LUICONNECTOR === "undefined" )
{
$.getScript( this.protocol + "//" + this.ip + ":" + this.jsm_port + ws_path + "/lui-connector-min.js" );
}
},

(3). Add the Code below to Application OnSignOn event

USERENV.initLongReach();

(4). Add Signature Pad extension to the screen

(5). Set Signature Pad extension saveMode property to “Save To Others”

(6).Add the code below to OnButtonSave Event and provide the user profile and password by changing the m_host parameter profile and password

// on button save
var self = this;
var imgPath = this.getPropertyValue("imagePath");
if ( imgPath == "*DEFAULT" )
imgPath = "{SHARED}/image"
else
imgPath = "{SHARED}/" + imgPath;

// the host JSON variable is used to define the server to which the request is going to. make sure to add the initLongReach code to USERENV.
// Also fill in the IBMi Username allowed to access the server.
var m_host = { endpoint: USERENV.protocol + "//" + USERENV.ip + ":" + USERENV.jsm_port + "/service/longreach.jsp", profile:"user", password:"xxxxx" } ;

//this is the call back function after the JSm call has returned.
function callback ( response )
{
alert ( JSON.stringify ( response ) ) ;
}
// call longreach putfile api
try
{
LUICONNECTOR.putFile ( m_host, { path: imgPath, name: ENV.filename+".png" }, callback, ENV.dataBinary ) ;
}
catch ( e )
{
alert ( "putFile exception " + e ) ;
}

(5).Click Save button to save all the changes and Sign out then reload the projects.

Note: the axSignaturePad extension is based on a Signature Pad a JavaScript library for drawing smooth signatures from Szymon Nowak(szimek ). See https://github.com/szimek/signature_pad