Omnis Technical Note TNJC0015Nov 2021

Adding Signature Capture to Omnis using a JSON Component

for Omnis Studio 10.x or above
By Omnis Engineering

As well as having all the tools you need to build Web and Mobile apps straight ‘out of the box’, another major strength of Omnis Studio is its ability to integrate many other technologies, tools and third-party components to extend the power and flexibility of your applications. For example, you can add third-party JavaScript controls to your web and mobile apps by wrapping those JS controls in a JSON component which can then be added to a Remote form in Omnis. This Tech note describes how you can take a Signature Capture JS control and add it to a remote form – the original third-party JS component was ‘signature pad’ by Szymon Nowak available from: https://github.com/szimek/signature_pad

In addition to capturing a signature, the same component could be used to capture any hand drawn image, such as a sketch – the base JavaScript code used in the Omnis JS Signature control uses variable width Bézier curve interpolation giving an authentic hand drawn style.

Adding Signature Capture to Omnis using a JSON Component

This Tech note shows how you can use a ready-made JSON component, that we already created in Omnis, but you make your own using the JSON Component Editor – to do this you can refer to another Tech note: 'Adding Ready-made JavaScript components to Omnis': TNJC0009

Source Files

You can download the necessary files in the following archive, including a demo Omnis library: omnis-signature.zip, then follow the steps below to setup the JS Signature control.

Alternatively, you can download the files from our GitHub repo: https://github.com/OmnisStudio/Omnis-Signature where you may find other components that interest you. (If you are using GitHub, use the ‘Dowload ZIP’ option on the green 'Code' button and follow the instructions on that page, including the steps to import the Omnis library from the JSON source.)

Set up the Signature Component

To setup the Signature component, ensure Omnis Studio is closed.

Place the folder net.omnis.signature into the \html\controls (not \htmlcontrols) of your Omnis Studio tree, first creating the folder if it does not already exist.

Copy ctrl_net_omnis_signature.js and signature_pad.js into \html\scripts of your Omnis Studio tree.

Add the following lines to your \html\jsctempl.htm file under the Omnis Studio JavaScript client scripts comment (this ensures the JavaScript code is referenced when Omnis creates the test HTML page):

 <script type="text/javascript" src="scripts/signature_pad.js"></script>
 <script type="text/javascript" src="scripts/ctl_net_omnis_signature.js"></script>

Place the jssignature.lbs library in your Omnis tree, start Omnis Studio and open the library.

Locate the jsSignature remote form, open it in design mode and examine the components on the form, including the Signature control (yellow rectangle); note that the Signature component has been added to the Component Store under the JSON Components tab (if it is not there, check the steps above).

Adding Signature Capture to Omnis using a JSON Component

Click on the Signature control in the Remote form and examine its properties under the Signature tab in the Property Manager. Look at the code behind the Download and Clear buttons (double-click to open the method editor), including the downloadImage class method, which takes the data from the Signature control and saves the image into a file, ready to download using the jsFile control (which is located in the lower left corner of the form).

Do iJSFileRow.$define(iJSFileName, iJSMediaType, iJSVariableName)
# iDataURL is the $dataname of the signature control
Calculate lDataURL as mid(iDataURL, pos(',' ,iDataURL)+1)
Do OXML.$base64decode(lDataURL, lErrorText) Returns tJSFileBinData  ## decodes the BASE64 encoded binary data
Do iJSFileRow.$assigncols(lFileName, 'application/octet-stream', 'tJSFileBinData')
Do $cinst.$objs.JSFormFile.$action.$assign( kJSFileActionDownload) Returns #F  ## download the image file

You can test the form using the Ctrl/Cmnd-T option, or use the live demo (see below). The remote form will open in your default web browser, and you can write your signature into the signature field. The Download button will download the image as a JPG to your desktop/Download folder, which could be adapted to add the image to a database, such as a customer record.

Live Demo

You can try out the Signature component in a live demo hosted on an Omnis service at: https://services.omnis.net/jsgallery/jssignature.htm

Try signing your name and download your signature in jpg format.

  

Search Omnis Developer Resources

 

Hit enter to search

X