Prerequisites:

• You should already have FormsViewer installed and understand how to upload and open forms.
• You should have an XSN form template that has been injected with qRules.
• You should have the Signature Prototype form included with this document (Download the package here)

Steps:

1. Export all resource files except QdabraRules.xml from the Signature Prototype XSN.

   

2. Add the .js and .css files to your own XSN as resource files.

   

3. Add a Section control to your form. This will serve as a placeholder for the signature control.
   1. Place some placeholder text in this section control, like “Find me”. You will use this in step 7 to locate the section in the form’s source in step 7.

      

4. Add a Picture control to your form along with a corresponding base64 (Picture or File Attachment) field.
   1. When you select Picture from the Controls pane, select the option to include it in the form.

      

   2. Place this inside the Section control from step 3.

      

   3. Click the control to select it and add a formatting rule to hide it when it is blank.

      

5. Add a button to the view for the purposes of showing the signature control. Give this button some text like “Sign this form” and a meaningful ID. Make note of this ID for use in step 8.

   

6. Save the form as an XSN file and extract its source.
   1. If you are unsure how to extract the form’s source, you can do this:
      1. Click the File tab
      2. Click Publish
      3. Click Export Source Files
      4. Locate or create a folder where the source files will be extracted. This will create several files in the destination folder, so it is usually best to select an empty folder or create a new folder for this.
      5. Click OK
7. Locate the source files you extracted, and use a text editor to open the view XSL file corresponding to the view where you are adding the signature control. Locate the Section control you created in step 3. It will most likely be in the format CTRL[number] make note of this ID for use in the next step.
   1. If you are not sure how to locate the Section control, you can do the following:
      1. Within the text editor, search for the placeholder text you added in step 3 (e.g. “Find me”). When you’re done with all the steps in this document, you may delete this placeholder text.
      2. This should take you to roughly the location of the Section control. Look in the near vicinity of the located placeholder text for a <div> tag with an xd:xctname="Section" attribute.
      3. Make a note of the xd:CtrlId attribute on this tag. (e.g. CTRL3)

         

8. Edit the SignatureConfig.xml from the exported resource files of the Signature Prototype XSN and add the needed config settings.
   1. Open the XML in a text editor such as Notepad.
   2. ButtonId is the button ID from step 5.
   3. PlaceholderId is the ID of the Section control that you determined in step 7.
   4. DestPath is the full XPath of the picture field from step 4.

      

9. Back in the InfoPath Designer, go to Data > Data Connections and add a receive XML data connection for your modified SignatureConfig.xml – name it SignatureConfig.

   

10. On the finishedLoading field in the QdabraRules data source, add a rule to load the .js and .css files using LoadResource. (You can imitate the rule in the same location in the sample form. It should involve three LoadResource commands:
    • LoadResource /name=jquery.signaturepad.min.js
    • LoadResource /name=Signature.js
    • LoadResource /name=Signature.css

      

11. Save, upload the form to FormsViewer, and try it out.
    1. Click the button you added in step 5 to reveal the signature control.

       

    2. Add a signature by clicking and dragging your mouse across the gray area.

       

    3. Click Capture Signature to capture an image of the signature. This will store an image of the signature in your image field and hide the signature control.

       

12. (As needed) To add more signature controls to the same form, repeat steps 3-9. In step 8, add one <Signature> element to the SignatureConfig file for each signature control and update the SignatureConfig data source instead of creating a new one.