Want to see a demo? Need help setting up a module or XMod Pro custom control?
Contact Us

Ideas, tips and information on what we're developing for XMod Pro!

Moore Creative's XMod Pro Blog »

Let us build custom DNN solutions for you! l

See all of the modules on store.DotNetNuke.com, several are free DNN modules!

XMod Pro Digital Signature (Signature Pad) Control

XMP SignaturePad provides an HTML5 canvas object to be rendered that allows users to draw a signature that is saved as a point-based vector array. This is stored in the database record and then can be retrieved and displayed either in a form for editing or XMP Template for display.

Installation

Install the provided zip file through the DotNetNuke extension manager just like a standard module. Once the installation is complete the control can be used with XMod Pro Forms.

SignaturePad FORM Control Usage

Add the following to the top of the XMod Pro FORM you wish to add the control to:

<register tagprefix="mc" namespace="moorecreative.controls.signaturepad" assembly="moorecreative.controls.signaturepad" />

You can now add the SignaturePad control to the form using the following syntax:

 <mc:SignaturePad    
    Id="signature" 
    DataField="signature"       
    DataType="string" 
    Class="classname"
    Width="300"
    Height="100"
    LineTop="60"
  />

SignaturePad Control Properties

Aside from the standard properties for XMod controls (runat, Id, DataField, DataType), the following properties can be used to modify the default functionality:

Width and Height This sets one part of the width and height of the signature canvas area. This optional value can set the canvas area. The default value if not specified is 195x55.

When using the Width and Height in the control, the style and presentation works best if you also include the following CSS for the page:
ddddddddd

.drawItDesc {
     border:0px!important; /* Hide optional horizontal bar at top of sig instruction area */ 
}
  
.SigPadForm .sigPad {
     margin: 0;
     padding: 0;
     width: 302px!important; /* Change the width to match control settings PLUS 2 px */    
}
 
.SigPadForm .sigWrapper {
     clear: both;
     height: 100px!important; /* Change the height to match control settings */
     border: 1px solid #ccc;
}

LineTop controls the position of the helper or signature "guide line" that appears within the signature canvas area. This gray line can be moved down from the top of the canvax by X pixels and can be placed "off" the canvas as well.

SignaturePad TEMPLATE Usage

Add the following to the top of the XMod Pro TEMPLATE where you wish to add a display control for the signature:

<xmod:Register TagPrefix="mc" Namespace="moorecreative.controls.signaturepad" Assembly="moorecreative.controls.signaturepad" />

You can now add the SignaturePad display control to the Template using the following syntax:

 

<div class="sigPadDisplay" data-signature='[[signature]]' style="margin: 20px; padding: 0;">
  <div class="sig sigWrapper" style="width:140px!important; margin-bottom:10px;">
    <canvas class="pad" width="140" height="55"></canvas>
  </div>
  <mc:DownloadSignaturePadImage runat='server' Text='Download Signature Image' Filename='[[Filename]]' ImageJson='[[signature]]' Width="300" Height="100" CssClass="save-link"  />
</div>

Properties

Aside from the standard properties for XMod Template usage such as reading the "signature" data record from the SQL database and passing it to the display with the XMP token of [[signature]], there are a few elements of added functionality, namely the mc:DownloadSignaturePadImage control. This optional control can be used in the Template to generate a "save this signature as an image" button/link. The values for this control allow you to set the:

Text sets the text of the link.

CssClassThis can be setup with CSS to make a style, icon or button look for this link as shown in this example:

      .save-link {margin:10px 0px;}
      .save-link:before {
        content: url(/Icons/Sigma/Save_16X16_Standard.png);
        margin:10px 8px 0 0;
      }