Skip to content

Version

Since 2022/12/21

AppGini Helper Signature Javascript Library is a separate product and not part of AppGini Helper Javascript Library

AppGini Helper Signature Javascript Library

Converts simple Text fields into Signature fields and allows users to handwrite signatures with mouse, pen or fingers, depending of their devices' capabilities.

Example

See it in action

Installation

  1. After purchasing a license, ...
  2. Extract AppGiniHelper.dv.signature.min.js into hooks directory
  3. In hooks/header-extras.php include the script
    1
    <script src="hooks/AppGiniHelper.dv.signature.min.js"></script>

Integration

Step 1/2: Model

  1. Create Field
    In your model select the table you need to signature field for, create a new field.
    Name it as you like, here: item_received_signature:
  2. Configure Field
  3. Set Data type to Text (important!) and ensure...
  4. [x] Text area and
  5. [x] Hide in table view are checked:

  6. |

  7. Save your model and generate the code.
    After reloading your browser, check in your Detail View that the field has been created correctly as Textarea-input field!

Note

At this point this is just a normal Textarea field.
We did not convert it into a signature pad, yet.

Tip

Check for errors in console tab of your browser's developer tools and fix them first.
If you still cannot see the field or get an error message here, update fields in Admin Area.

Step 2/2: UI

  1. In hooks/TABLENAME-dv.js place the following line of Javascript code for binding the new field to a signature pad. 
    1
    new AppGiniHelperDVSignature.Pad("FIELDNAME");

    Create the file, if not exists
    Replace TABLENAME and FIELDNAME accordingly

Save the file and reload the Detail view in your browser (without cache!)

That's it. You can see the result in the screenshot below:

See also