Qdabra's Image Picker Template Part - Mel Balsamo
in

InfoPath Dev

This Blog

Syndication

Mel Balsamo

Qdabra's Image Picker Template Part

SCENARIO

You want to add images to your InfoPath form, but:

  • Image attachments, even those that are embedded in the form, get stored in the XML itself, thus making its file size huge.
  • Your images are stored in a SharePoint list and cannot be retrieved via filters without using code.

SOLUTION

Install Qdabra’s Image Picker template part!

  • Based on Qdabra’s qRules library – extend your InfoPath forms without writing code
  • Easy-to-add XML Template Part – just add custom control via the InfoPath 2007 Designer
  • Comes with pre-configured layout which saves you time – just drag and drop from the taskpane
  • Less file size since no images are attached nor embedded in the XML – the images are loaded from the external SharePoint file.
  • Able to query images from a SharePoint list – filter using image tags for easy searching, without code!

Note that the QdImagePicker XTP uses a picture control to hold the images. Since picture controls are not supported in InfoPath Forms Services (IPFS), the template part will not work in the browser.

QUICK PREVIEW

Let’s take a quick look: here is a screenshot of Qdabra’s ImagePicker XTP:

 

In the screenshot above, the user searched for images that were tagged with ‘Logo’ as the Subject and returned two images. The user then clicked on the ‘View’ link for the first entry to display the actual image as well as its properties, as shown below:

 

Clicking on the ‘Use Selected Image’ button leaves the image on the form and a button that lets the user pick a different image.

 

The ‘Add’ tab becomes handy if the user wants an image that is not in the SharePoint list, but is on his network or local machine. Simply add the image to the picture control and click ‘Use This Image’.

 

The newly-added image is then uploaded to your SharePoint library/list.

This blog post details the steps needed before you begin using the XTP in your InfoPath forms; just a few modifications and you’re ready to go!

REQUIREMENTS

  • QdImagePickerXTP – Image Picker template part. Download it FREE here.
  • InfoPath 2007 – template parts (XTPs) are not supported in InfoPath 2003.
  • Qdabra qRules v2.0 – add the most commonly requested InfoPath features without the need of writing code. Download a FREE trial here.
  • A SharePoint list to retrieve and submit images to.

SET UP A SHAREPOINT LIST WITH IMAGES

1. In your SharePoint site, create a list. For the purposes of this tutorial, name your list ImagePickerList.

2. Add the following columns:

 

3. In your main ImagePickerList view, i.e. http://<SharePoinSite>/Lists/ImagePickerList/AllItems.aspx, click on the ‘All Items’ dropdown and select ‘Modify this View’.

 

4. In the ‘Edit View’ page, ‘Columns’ section, enable only the following columns and (optional) sort them as shown below:

 

5. Click OK when done.

6. Back in your ImagePickerList view, click New > New Item.

 

7. In the ‘New Item’ page, fill out all the fields, like such:

 

Hints:

  • Subject – this is the main tag used in the QdImagePicker XTP when searching for images. Since in your XTP, the Subject dropdown list box uses the following entries: Animals, Business, Family, Landscape, Logo, People, Travel, and Other; make sure to tag your images using only one of these values.
  • IsPrivate – can either be ‘true’ or ‘false’.
  • Image – the URL to the image

 

  •  
    • If you wish to upload an image from your network or local machine:

a. Leave the Image field blank for now.

b. Click on the ‘Attach File’ link in the New Item page

 

c. Browse to the image and click OK.

 

The ‘Attachments’ field will now appear in your ‘New Item’ page:

 

Note that the Image field will remain blank.

d. Click OK.

e. Back in your list main view, click on the Title dropdown of your newly-added image and select ‘Edit Item’.

 

f. You will be taken to the ‘Edit Item’ page where you’ll see the image attachment filename which now shows as a hyperlink. Right-click on the link and select ‘Copy Shortcut’ to place the image URL in your clipboard.

 

g. Paste the image URL in the Image field:

 

h. Click OK.

You now have your first Image item in your SharePoint list:

 

You would want to add more images to this list so that when you begin using your QdImagePicker XTP in your forms, you will have a couple of images to pick from. We recommend adding the images that you use most of the time, such as company logos, banners, signatures, etc.

For the purposes of this tutorial, we will use the following entries in our SharePoint list:

 

ADD THE TEMPLATE PART IN INFOPATH CUSTOM CONTROLS

1. Launch InfoPath and select Design a Form Template based on a new blank one.

2. In the Controls taskpane, click Add or Remove Custom Controls…

 

3. In the Custom Controls dialog box, click Add > Template Part, and browse to the location where you placed your QdImagePicker XTP.

 

4. Verify that the XTP has been added to your Custom Controls taskpane.

 

5. Save your blank form template (XSN). For the purposes of this blog post, we will name it as ImagePickerXSN.

6. Close InfoPath.

INJECT QRULES AND THE XTP IN YOUR FORM TEMPLATE

1. Launch the qRules Injector from Start > All Programs > Qdabra > Tools > qRules Injector.

 

2. Browse to the location where you saved your ImagePickerXSN.

3. Click Inject, then OK in the confirmation dialog, and then close the qRules Injector.

4. Open ImagePickerXSN in InfoPath Design mode.

5. Scroll down to the very bottom of the Controls taskpane to get to the Custom section, and then click on the QdImagePicker control.

You should now have the template part on your canvas. The main and the secondary data sources will be injected in your XSN as well.

SOURCE FILES CLEAN-UP

If you go to Tools > Data Connections, you will notice that you have two instances of QdabraRules, one for the XSN, and one for the XTP:

 

When you first injected qRules in your XSN, it added the QdabraRules XML as a secondary data source. In this same XSN, you injected the QdImagePicker XTP which also uses qRules. This added another QdabraRules XML secondary data source to the XSN (with a different name). So now, you have two qRules XMLs, which is confusing and might cause issues when calling the qRules commands. Unfortunately, there is no workaround at the moment, hence the need to do some clean-up.

1. Save ImagePickerXSN as source files and close InfoPath.

2. Modify the manifest.xsf file:

a. In the directory where you saved your source files, locate manifest.xsf and open it in any text editor.

b. Replace all eight instances of “QdabraRules_QdImagePicker” with “QdabraRules”.

c. Delete the associated blocks where you find “QdabraRules1”:

i. xsf:file (for .xsd)

 

ii. xsf:file (for .xml)

 

iii. xsf:dataObject

 

d. Save and close manifest.xsf.

3. Modify the view1.xsl file.

a. Open view1.xsl in a text editor.

b. Replace the two instances of “QdabraRules_QdImagePicker” with “QdabraRules”.

c. Save and close view1.xsl.

4. Modify the sampledata.xml file

a. Open sampledata.xml in a text editor.

b. Delete the xd:DataConnection block where you find “QdabraRules_QdImagePicker”.

 

c. Save and close sampledata.xml.

5. Delete the extraneous QdabraRules1 files in the source files directory:

a. QdabraRules1.xml

b. QdabraRules1.xsd

6. Verify changes.

a. Open manifest.xsf in InfoPath Design mode.

b. Go to Tools > Data Connections and verify that you now have only one instance of QdabraRules.

 

7. Modify the qtpFormLogic data connection and remove the _QdImagePicker suffix in its name.

ADD A DATA CONNECTION THAT FILTERS DATA FROM YOUR SHAREPOINT LIST

The owssvr dll file comes with SharePoint. Clever people have been creating filtered SharePoint data queries by using this DLL. The Qdabra qRules command called FilterOwssvr attempts to make it easier to filter data from a SharePoint list and use it in your InfoPath form.

Before we start we need to locate a few values that we’ll need during this tutorial:

A. Owssvr.dll - On MOSS 2007, this file is located at the following URL: http://<SharePointSite>/_vti_bin/owssvr.dll.

B. List ID – Open the SharePoint list in Internet Explorer, select Settings and List Settings. You’ll see a URL that looks like this: http://<SharePointSite>/_layouts/listedit.aspx?List=%7B51964A2F%2D1C71%2D4C1C%2D969E%2DF5C9764B312B%7D. The List ID is in red, but we need to decode it to obtain the Guid. You can use an online tool such as http://meyerweb.com/eric/tools/dencoder/ to obtain the Guid, which in this case is {51964A2F-1C71-4C1C-969E-F5C9764B312B}.

Now that we have these values, we can set up our form to receive data from this list.

1. Confirm your values visually in Internet Explorer by navigating to http://<SharePointSite>/_vti_bin/owssvr.dll?Cmd=Display&List={51964A2F-1C71-4C1C-969E-F5C9764B312B}&XMLDATA=TRUE. You’ll see something like this:

 

2. In your ImagePickerXSN form template, go to Tools > Data Connections.

3. Click Add, and follow the wizard to create a data connection that receives data from an XML document, and enter the full URL we accessed in Step 1, i.e. http://<SharePointSite>/_vti_bin/owssvr.dll?Cmd=Display&List={51964A2F-1C71-4C1C-969E-F5C9764B312B}&XMLDATA=TRUE.

4. Continue the wizard, making sure to select ‘Access the data from the specified location’.

 

5. Click Next. We’ll name this data connection ‘FilterImages’ and uncheck the box ‘Automatically retrieve data when form is opened’.

 

6. Click Finish, and then Close to exit out of the wizard.

RE-BIND SECTIONS TO THE FILTERIMAGES DATA SOURCE

These sections of the QdImagePicker XTP are bound to the qtpFormLogic secondary data connection.

 

These sections will hold our SharePoint list images and details. We then need to re-bind them, including the fields, to the ‘FilterImages’ secondary data source.

1. Start from the outermost section; right-click on it and select ‘Change Binding’.

 

2. Select ‘FilterImages (Secondary)’ from the ‘Data source’ dropdown and click on the rs:data node, then click OK.

 

3. Next, re-bind the repeating section; right-click on it and select ‘Change Binding’, then select the z:row repeating node.

 

4. Do the same for the innermost section; right-click and select ‘Change Binding’, then bind it to the z:row repeating node.

You should now have all the three sections bound to the ‘FilterImages’ data source:

 

5. Next, we will modify the expression boxes to point to the nodes in our ‘FilterImages’ data source since these nodes are actually the columns in our SharePoint list. Do this by double-clicking on each expression box, clicking on the fx button under the ‘General’ tab and entering the formula as follows (Note that the underlined fields point to the ‘FilterImages’ secondary data source nodes):

a. Date – substring-before(@ows_Date_x0020_Taken, " 00:00:00")

 

b. Title@ows_LinkTitle

c. Subject@ows_Subject

d. Location@ows_Location

e. Creator@ows_Creator

f. Copyright@ows_Copyright

g. Private – select ‘Text’ under the ‘General’ tab and on your keyboard, hold Alt + 129 (numeric keypad) to get ü and display a check mark. If you are using a non-English OS keyboard, simply copy ü and paste it in the ‘Text’ field.

 

Go to the Display tab > Conditional Formatting > Add and add the condition ows_IsPrivateis not equal to’ “true” (entered as text), to hide the control.

 

h. ID@ows_ID

i. Image (picture control) – @ows_Image

MODIFY THE FORM LOGIC

First, we need to change the rules that call the FilterOwssvr qRules command that are present in the ‘Search’ button.

1. Double-click on the ‘Search’ button and click ‘Rules’. The last two rules in this button are the ones that use the ‘FilterOwssvr’ command.

 

2. Double-click on the second rule (No Date Taken), modify the action and click on the fx button.

 

3. We already have the correct command syntax in there. We just need to insert the correct data connection adapter name, which in this case is ‘FilterImages’.

 

4. Click OK three times to get back to the ‘Rules’ dialog box.

5. Do the same actions for the third rule (Date Taken specified); change the data connection adapter name to ‘FilterImages’.

 

Notice that we’re using ‘Date_x0020_Taken’ in the /filter parameter instead of ‘Date Taken’. This is because, in InfoPath, if our SharePoint List columns have spaces in their names, they are encoded with 'x0020' when retrieved from the data source.

Also note that the values in this parameter are case-sensitive. If you accidentally give this command an invalid value for the /filter parameter, no error is returned. It is up to the form designer to ensure that the /filter parameter is correct.

To make sure that we are using the correct values in our /filter parameter, check for the exact node names in your data source (without the :ows_ prefix):

 

For the same purpose that we need to point the sections and the fields to the newly-added ‘FilterImages’ secondary data source, we also need to change the rules and the conditional formatting in our controls that have any instances of the ‘qtpFormLogic’ Images node to point to the ‘FilterImages’ rs:data node instead. We will do this by looking for logic that uses any of the following nodes:

 

and replacing them accordingly with these:

 

6. View button:

a. Double-click on the button to display its properties.

b. In the ‘Button Properties’ window, click ‘Rules’ and modify the action in that rule. You will see that it sets the value of ImageDocId to ID that comes from the ‘qtpFormLogic’ secondary data source.

 

c. Change ID into :ows_ID of the ‘FilterImages’ secondary data source.

 

You should now have this action in your ‘View’ button rule:

 

7. FilterImages sections:

 

Go to each section’s properties by right-clicking on each section and selecting ‘Section Properties’. In the dialog that opens, go to the ‘Display tab’ and click ‘Conditional Formatting’.

a. data (FilterImages) section (Both conditions hide the control):

From:

 

To:

 

b. row (FilterImages) repeating section:

From:

 

To:

 

c. row (FilterImages) section:

From:

 

To:

 

8. Use Selected Image button:

a. Modify only the first rule (Copy Image URL) in the button properties:

Click OK four times to go back to the ‘Insert Formula’ dialog. Your value for the @qRulesLink should look similar to this:

 

Where the XPath formula for the value is: xdXDocument:GetDOM("FilterImages")/xml/rs:data/z:row/@ows_Image[../@ows_ID = xdXDocument:GetDOM("qtpFormLogic")/FormLogic/View/ImageDocId]

This formula allows us to retrieve the value of the Image column in our SharePoint list, filtered such that its ID column’s value is equal to the value in the ImageDocID field of the qtpFormLogic secondary data source.

b. Back in the ‘Button Properties’ Display tab, click on the ‘Conditional Formatting’ button and change the condition from:

To:

c. Click OK to close all dialogs.

<!--[endif]--><!--[if gte mso 10]>

1.       Use Selected Image button:

a.        Modify only the first rule (Copy Image URL) in the button properties:

From:

To:

Where the XPath formula for the value is: xdXDocument:GetDOM("FilterImages")/xml/rs:data/z:row/@ows_Image[../@ows_ID = xdXDocument:GetDOM("qtpFormLogic_ImagePicker")/FormLogic/View/ImageDocId]

This formula allows us to retrieve the value of the Image column in our SharePoint list, filtered such that its ID column’s value is equal to the value in the ImageDocID.

b.       Back in the ‘Button Properties’ Display tab, click on the ‘Conditional Formatting’ button and change the condition from:

        To:

c.        Click OK to close all dialogs.

9. The error expression “Nothing found. Please try a different search criteria.”; change the first conditional formatting from:

 

to:

 

We should now have the following conditional formatting in our error expression box (each hides the control):

 

Lastly, we should also modify the ‘Use this Image’ button which allows us to upload our own images from our network or local machine. This is where we use the SaveToSharePoint qRules command which saves a file, a set of files, an image or a set of images to a SharePoint Document Library or List.

 

10. Double-click on it to open its properties, and then click ‘Rules’.

 

11. You’ll see three rules in this button. We need to modify the action in the first rule only since it calls the ‘SaveToSharePoint’ qRules command. In the ‘Action’ dialog box, you’ll see that the Command field is being set to the value: SaveToSharePoint /url=<SharePoint List URL> /xpath=/my:QdImagePicker/my:Image

 

a. For the /url parameter, replace <SharePoint List URL> with the list URL that we’ve set up earlier in this tutorial, e.g. http://<SharePointSite>/Lists/ImagePickerList, making sure to replace <SharePointSite> with yours.

b. For the /xpath parameter, replace /my:QdImagePicker/my:Image with the correct XPath for your Image node; in this case, we have: /my:myFields/my:QdImagePicker/my:Image

 

Your command syntax should then be:

SaveToSharePoint /url=http://<SharePoinSite>/Lists/ImagePickerList xpath=/my:myFields/my:QdImagePicker/my:Image

(Again, making sure to replace <SharePointSite> with yours).

To make our scenario more realistic, let’s add a few fields and make our form template a bit fancy. Here’s what I have in Preview mode:

 

That’s it! Our form template is all set up and is ready to be published to our SharePoint Site.

PUBLISH TO A SHAREPOINT SITE

1. Save all the changes you’ve made in your ImagePickerXSN form template.

2. In InfoPath’s menu, select File > Publish.

3. In the ‘Publishing Wizard’, select:

 

4. Enter the location of your SharePoint site in the next screen.

5. We will publish this form template in a ‘Document Library’, so select that option and click Next.

 

6. You can create a new document library with a name of your choosing and promote/display columns as you wish.

7. When done, click Publish, and then Close to exit out of the wizard.

You can also add a submit data connection as you normally would if you wish to submit your forms to your SharePoint site. We’ll skip those steps for now since the ImagePicker XTP will function simply by just opening a new form where we published our form template to.

Open your SharePoint document library and create a new document/form. Fill out your fields, click on that ‘Pick Image’ button and start searching for images! Don’t miss out on the ‘Add’ tab and select any image from your network and local machine!

 

Once you’ve started using Qdabra’s ImagePicker template part in your InfoPath solutions, you’ll see how easy and neat it is to search and add images in just a few clicks.

  • Download the QdImagePicker XTP for FREE here.
  • Download Qdabra qRules for a FREE trial here.

Comments

 

Mel Balsamo said:

Video Tutorials qRules Demo [3:29] Submit To SharePoint List Demo [9:09] Save To SharePoint Demo[7:49

March 10, 2011 10:55 PM
 

Mel Balsamo said:

Video Tutorials qRules Demo [3:29] Submit To SharePoint List Demo [9:09] Save To SharePoint Demo[7:49

January 27, 2012 10:08 AM
Copyright © 2003-2018 Qdabra Software. All rights reserved.
View our Terms of Use.