As part of an auction site I was working on for a client, one part of the solution was to use an InfoPath form for users to submit their bids.  In another post I might detail all of the solution but in this post I want to focus on how to get the dynamic images from a SharePoint Picture library.  These were the basic requirements for the form:

• A user would choose their item, and wanted the item description to automatically display along with its picture
• The list of items should be filtered to only available items

For this post you will need the following components:

• A SharePoint site
• Picture Library with a custom column
• Form Library with our InfoPath form template

Do the Prep Work

As I mentioned above for our solution, we need a SharePoint site and two libraries; one for the images and one for the InfoPath form.  Since nothing is custom I won’t give you the step by step for creating a basic site.  Here is the rundown for the libraries:

• Create a Picture Library, called it Auction Items.  Then create a custom column called IsAvailable.  It should be of type boolean (Yes/No checkbox). 
  • I cleaned up the library and hid some of the unnecessary columns from the content type like picture taken, etc.  We only care about Title, Description,  and our IsAvailable column.  If you make them required, just be aware it will check it out until the fields are filled in. 
  • Also make sure that these columns are visible in the default view (Title, Description, IsAvailable, etc).
• Create a Form Library.  You don’t need to do anything with it yet, the only thing I am using it for is to hold our InfoPath form.

On to the Form!

What makes this all possible is using an XML data connection.  Normally it would be easy to wire the dropdown to a SharePoint list data connection and you could choose your column via the data connection.  To show the picture on the form, we need the picture URL.  This would be easy if we could load the Name column from the data connection, but we can’t!  What we can do is an XML data connection instead, and we can get to any column we need from the view. 

1. Open infoPath Designer, and create a form of the template SharePoint Form Library. 
   
   
2. Update the form layout to a 2 column table by merging the cells. 
   
3. Insert the form controls you need:
   1. Insert a drop down control for the Title field.
   2. Insert a text box for the Description.
      1. Right click on the control and click Text Box properties.  Under validation, click the checkbox “cannot be blank”.  Then click the Display tab, and check the box for “read only”.  We don’t users changing the text now do we?
   3. Insert an Picture control for the actual image using the Name field.  Be sure to use the option “as a link”.  This is critical.
      1. Right click on the control and click Picture properties.  Click the checkbox “read only” on the default Data tab.
         
         
4. Once complete, you should be with something with like this: 
   
   
   
5. Let’s clean up the fields a bit.  In the Fields box on the right side of the screen, you will see your fields like Field1, Field2, etc.  When you click on the control on your form, it will highlight field you’re using.  Right click on each one and name it appropriately.  Like this:
   
   
   
6. Now we need the data connection.  We use an XML data connection so we can access the Name column.  Click the Data tab, and click Data Connections, then click Add. 
   1. We want to Receive data.
   2. Choose XML document for the data source.
   3. For the location, enter the following: http://<site url>/_vti_bin/owssvr.dll?Cmd=Display&List=<GUID of list>&XMLDATA=TRUE&noredirect=true.  Click Next.  You will need to use your site URL, and you need the GUID of your Auction Items picture library (you can get it from library settings or SharePoint Designer).  The nodirect=true is required to get around a connection error after publishing.  You can make sure this works by pasting the URL in a browser:
      
   4. On the next screen, choose “Access the data from the specified location”.  Click next. 
   5. Give it a friendly name for the connection like Picture Library XML.  Go ahead and choose to “Automatically retrieve data when form is opened”.
      
      
7. Back on the form, right click on the dropdown we added, and choose drop down list box properties.  Change the List box choices to Get choices from an external data source.  Click the icon next to Entries, and choose the Path rs:data/z:row.  Then for the Value, choose @ows_ID, then for Display Name, choose @ows_Title like below:
   
   
   
8. Remember we wanted to have the ability to set items as available, so we need to add that filter.  Click on the button for Entries, and click Filter Data.  Add a filter, and for the criteria, choose the ows_IsAvailable field is equal to, choose Type number, and type 1.  This represents the field being checked on the image.
   
   
9. Now that the dropdown is wired to the library via XML, we can wire up the description and image.  With the dropdown control highlighted, click Manage Rules.  Click New –> Action, give your rule a name like Set properties.  Leave the condition, and add an action to Set a field’s value.  For Field, choose Description.  For the Value, choose Insert a field, change to the Picture XML data connection, and under rs:data/z:row, choose ows:Description.  We need to filter this so we get the Description field for the chosen item from the dropdown. 
   
   
10. Click Filter Data, then Add.  For the condition, choose ows_ID is equal to, and click Select a field or group.  Change the data connection from the Picture Library XML back to Main, and choose the Item field (the dropdown field) and click Ok.
    
    1. If you recall, we set this field to store the ID of the picture file, but display its Title.  So we’re saying set the filter using the ID in the dropdown matched to the ID of the item in the picture library. 
       
       
11. Add another Set a field’s value action.  This time set the Field Image, using the Value ows_NameorTitle, but filtered with ows_ID to the Item field.  But that’s not all, we need to build the full URL.  The name just gives us the filename, we need to add the rest.  Now we have the name, click formula and use this:
    concat("<URL to picture library with trailing forward slash>", @ows_NameOrTitle[@ows_ID = Item]). 
    

Let’s check our progress.  Upload a few pictures to the library, give them a title and description, and make at least one is set to not be available.  Preview the form, and choose an item.  The description and image should magically appear:

Pat yourself on the back, great job!  Now you just need to finish the form as you please, then add a button for submit to the form library we completed.  During publish just choose to update an existing form library we created.  Also check that what shows in the dropdown is filtered, you should not see all items. 

One Note of Caution

This works with web applications that use Classic authentication.  If you’re using Claims, by default this won’t work and you will get an error “"XML data that is required for this form to function correctly cannot be found”.  There are some workarounds using BCS and Secure Store but I can’t speak if they work or not.  So just be aware. 

For more information about C5 Insight or this blog, please Contact Us.