Set a Value On Signature

There are times where you may want to track actions taken on a form like when a user signed a document.  Signatures, like any other Component, are part of the data object and are accessible in calculated data rules.  In the example below, a Text Component is used to calculate a Date once a user has penned a mark into the signature box.

This is a basic Form and straightforward rule, but it does have some interesting points to consider.  

1. Start by creating the form.  In this example, use a Columns Component to center the other Form elements.  Place a Signature and an Text Component onto the designer.
   
   
2. In the settings of the Text Component, check the Disabled option on the Display tab.  For a scenario like this, you will likely want to avoid a user overriding the system calculated value.
   
   
   
   

3. In the Text Component for Date Signed, add a Calculated Value rule on the Data tab.
   
   

   Calculate Date Rule

   var current = new Date(data.dateSigned);
   if(data.signature && current.toString() === 'Invalid Date')
   {
       var d = new Date();
       value = d.toLocaleDateString();
   }
   else
       value = data.dateSigned;

   
   This rule might be more complicated than you would expect.  Any complexity stems from attempting to control the data and gracefully handle all possible scenarios.  In Line 1, assign the current value of the Text Component to a JavaScript Date.  The rule does this to ensure once a date has been captured, it does not get updated or changed.  Once you have a value in the field, keep that value.  If the Date Signed field is blank, its text will not cast to a Date and current will be set to the text string Invalid Date.  Next, on line 2, check to see if there is data in the Signature Component and be sure a date has not been previously entered into the field.

A working example of the form described can be downloaded here.