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.
- Start by creating the form. In this example, use a Columns Component to center the other Form elements. The place a Signature and an Text Component onto the designer.
- 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 user's overriding the system calculated value.
In the Text Component for Date Signed, add a Calculated Value rule on the Data tab.
Calculate Date Rulevar 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. 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 in this example can be downloaded here.