Saturday, November 01, 2014

Create Dynamic Images Using InfoPath and a SharePoint Picture Library

Posted in [SharePoint], [Technical] By Doug Allen @ 4/10/2014

Create Dynamic Images Using InfoPath and a SharePoint Picture LibraryAs 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: 
    basic infopath form

  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:
    infopath fields

  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:
      SharePoint XML data connection
    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:
    image

  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.
    image
    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])
    image

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:

dynamic image with infopath and sharepoint picture library

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

, , , , ,

Comments

Got something to say? Join the discussion »
    Posted by Doug Allen on 10/13/2014
    Hi Sarahp,

    I am referring to the path of the site collection and subsite URL that contains the list that has the image library.
    Posted by Sarahp on 10/13/2014
    When you provided the link in step 6, and you say "your site URL" in orange, are you referring to the form library, the image library, or the data connection?
    Posted by Doug Allen on 9/15/2014
    SPUser,

    Are you using a picture library or a custom library with a hyperlink field? It sounds like a hyperlink column that is using the link and not a picture. Or, you could potentially not be getting the proper URL in the Image field on the form. Is it clickable on the form?

    Doug
    Posted by SPUser on 9/15/2014
    Hi Doug,
    Is it possible to show the image in the display form as a thumbnail? It now displays as a link. Please let me know.

    Thanks again for the wonderful solution.

    Sp User.
    Posted by Doug Allen on 8/28/2014
    Alex, the problem is either in the data connection, or where you are setting the field value with the concat formula which is where you're dynamically building the URL to the image. I assume your web application is not claims based? Are you getting the name and description, just not the image? Or are you not getting any values? if you're just not getting the image but are getting the Name, its in your set field value action. If you're not getting anything, check your data connection. I would suggest writing that field as a text URL and put it on the form so you can see the URL you are getting, and make sure it is a valid URL to your images.
    Posted by Alex on 8/27/2014
    Hey Doug - thanks for this very informative walk-through for an auction site. I am having some difficulty in that my pictures are not appearing. The jpg symbol is there, however it is white with a red x. Any ideas? Many thanks.
    Posted by Chrisatlake on 5/9/2014
    Doug,
    Yes, I can see the XML in step 6 and it is loading the data source when the form is opened. I can drill down to the source as shown in step 7 but when I choose rs:data/z:row and click OK, that is when I get the error.

    -
    -
    -
    -


    -


    -


    -


    -


    -


    -


    -


    -




    -


    Posted by Doug Allen on 5/8/2014
    Chrisatlake,

    From your description, does your path have /XML on the front of it? Are you able to see the XML page in step 6.iii? Did you make sure it is loading the data source when is form is opened?

    Doug
    Posted by Chrisatlake on 5/8/2014
    Doug,
    At step 7, when I choose the Path rs:data/z:row, I am prompted with "You must select a repeating group or field", although my fields appear to be the same. Any ideas? It looks exactly what I'm looking for though and would really like to get it working. Thanks.
    Posted by tzichterman on 5/7/2014
    Thanks again Doug! Very informative. Agree that a code solution would be better, just not a developer personally.
    Posted by Doug Allen on 5/7/2014
    TZichterman,

    My client who I did this for did not want to store any history of bids; the form only submitted to an email who monitored the process. Obviously for most auction style scenarios, you would want to retain that. I would think of 2 lists, one for the product and one for Bids, with a lookup to the product. You would have the InfoPath form submit to create a bid on the InfoPath form. For SharePoint 2013, we did another version where it was purely with an aspx page and javascript that had a live timer countdown, tracked the highest bid, etc. That was much more robust, though required code vs. InfoPath.

    Doug
    Posted by TZichterman on 5/7/2014
    Doug - thanks for the overview. I am in the process of putting together a similar auction site using Infopath and Sharepoint 2013. Interested in how you organized your fields for the bidding process. Especially allowing for quick refreshes to update the current bid amount.

    Thanks,
    Tom

leave a reply

 [Quick Submit with Ctrl+Enter]

Remember my details
Notify me of followup comments via e-mail

C5_Insight

About C5 Insight

We are a Microsoft Gold Certified partner focusing on SharePoint, Microsoft Dynamics CRM and Salesforce.com.  Learn more about us by visiting our website.

Search

We Wrote the Bible on Microsoft SharePoint and Dynamics CRMBook-Microsoft Dynamics CRM 2011 and SharePoint 2010 Bible

Tags

Maximize

Recent Comments

Maximize

Blog Roll

Maximize

Disclaimer

The information herein may be used solely at your own risk.  No warranty is made by the author or by C5 Insight, Inc.

The opinons expressed herein are those of the individual authors and do not necessarily represent C5 Insight, Inc in any way.

Copyright 2011-2013 by C5 Insight