Mel Balsamo

September 2017 - Posts

How To: Save Images to SharePoint

Prerequisites:

You should already have FormsViewer installed and understand how to upload and open forms.
You should already have an XSN form template that includes a Picture Control or File Attachment Control. If you are not familiar with Picture Controls, please see our How To: Capture Camera Images
Your form template should already be injected with qRules.

Steps:

In SharePoint locate or create document library that you would like to use for storing images or files from your form.
Open your form in InfoPath Design mode.
In the Fields pane, locate the base64Binary field from which you would like to save out files to SharePoint.
Add a qRulesLink attribute to the field:
1. Right-click the field
2. Click Add…
3. Enter the name qRulesLink (use this exact spelling and capitalization)
4. Click OK
Repeat step 4, but with the name qRulesFilename instead of qRulesLink.

Note: Your data source may or may not be repeating depending on your needs. In this example, we are allowing users to attach more than one photo in the form so we’re showing a repeating group.
Make sure that the Rules taskpane is open.
Add a formatting rule to hide the control when the file has been saved out:
1. Locate the Picture or File Attachment Control that is bound to your field and click it.
2. In the Rules pane, click New à Formatting
3. Give the rule the name “Hide when file saved”
4. Under Condition: click the blue None text.
5. Using the condition builder:
  1. Use the left dropdown to select the qRulesLink
  2. Use the middle dropdown to select is not blank.
  3. Click OK
6. Check the Hide this control box.
Add a section control and hyperlink for the link to the file:
1. Use your mouse to drag your picture or attachment field from the Fields pane to a location right next to your Picture or Attachment control.
2. When prompted for a control type, click Section.
3. Click to place your cursor inside the newly created Section Control.
4. Select the Insert tab and click Hyperlink.
5. When prompted for the hyperlink’s properties:
  1. For Link to, select the qRulesLink
  2. For Display, select the qRulesFilename
6. Click OK.
7. Click and drag the right edge of the Hyperlink so it fills most of its container.
8. If you wish to display a thumbnail of the linked image aside from the link itself, drag the qRulesLink field inside the section as a Picture control – right-click on the field on the Fields taskpane, select More and then select Picture
9. Set the control as read-only and also adjust the qRulesLink photo control with a fixed width or height of your choice so that it appears like a thumbnail on your form.
Add a formatting rule to hide the section control when the file has not been saved out:
1. Repeat the sub-steps from step 7, with these differences:
2. Instead of clicking the Picture or File attachment, click the Section control you created in step 8-b.
3. Instead of selecting is not blank in the condition builder, select is blank.
Add a button to your view and give it meaningful text like “Upload Photo”
Add a rule to the button to save out the image:
1. Click the button.
2. In the Rules taskpane, click New à Action
3. Click Add à Set a field’s value
4. In the Set a field’s value dialog:
  1. For the Field, select the Command field in the QdabraRules secondary data source.
  2. For the Value, paste the following command text, and replace the highlighted parts as indicated: SaveToSharePoint /url=[full URL to SharePoint library, up to the library’s name] /xpath=[full XPath to your picture or file field]
  3. Click OK
Save the template and upload it to FormsViewer.
Open the form in FormsViewer, add a file to your Picture or File Attachment Control.
Click the button to upload the file.
If it worked correctly, you should see the Picture or File Attachment Control disappear and it should be replaced with a thumbnail and a link to the saved out file. Clicking the link should take you to the uploaded image into the SharePoint library, showing full resolution.

Notes:

If you are saving out pictures, replace the hyperlink with a Picture control that is bound to the qRulesLink This control should display the picture by loading it from its location in the library.
Try the above steps on a picture or attachment field in a repeating group/repeating section. The SaveToSharePoint command should work without any additional changes.
Add the rule from your Save Files button to your form’s Submit button. Place this rule before the rule that actually submits the form. This should cause files to save out before your form is saved, reducing the size of your documents and the speed of your submits.

Posted Sep 05 2017, 06:10 AM by Mel Clemente with no comments

Filed under: SharePoint, InfoPath, FormsViewer, Mobile, Image, Capture Image, Camera, Save images to SharePoint, SaveToSharePoint

How To: Capture Camera Images

Prerequisites:

You should already have FormsViewer installed and understand how to upload and open forms.

Steps.

Create a new form template or open a form template that you already have in InfoPath Design mode.
Locate or create a group in your form’s main that would be suitable for storing the image you want to add.
Right-click the group in the Fields taskpane and click Add…
Enter any valid field name for the field. For Data Type, select “Picture or File Attachment (base64)”. Click OK.
Drag the newly added field into the location in your view where you would like to add it. When prompted for a control type, select Picture.
Save your form template.
Upload the template to FormsViewer and open it.
Click the image control that you added.
You should see a popup dialog with a file attachment control. Click the file attachment control to select a file.
Select a picture file to use.
1. If you are viewing the form on a mobile device, you may have the option to take a picture using your device app as an alternative to selecting a file, like so:
Click OK.
The picture should now be shown in your form.

Optional:

Modify the picture control’s properties to give it either a fixed width or fixed height. You can use this to prevent it from becoming too large.
Use the same field to create additional Picture Controls in different areas of your form’s view, or in other views. This will allow your users to attach pictures in one part and view them in other parts of the form.
- You can also modify some of the Picture Controls’ properties as described above, to show a smaller version of the pictures in certain parts of the form.

Posted Sep 05 2017, 05:32 AM by Mel Clemente with 1 comment(s)

Filed under: InfoPath, FormsViewer, Mobile, Image, Capture Image, Camera

How To: Add Signature Capture to your Form

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:

Export all resource files except QdabraRules.xml from the Signature Prototype XSN.
Add the .js and .css files to your own XSN as resource files.
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.
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.
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.
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
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)
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.
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.
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
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.
(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.