Sunday, February 5, 2012

InfoPath 2010 Dynamic Image Links

- Including a work-around to image field reversion issue (http://address)

Introduction


There are lots of reasons you need to link to a different resource from within an InfoPath form. Links to external documents, instructions, charts or other large images, videos, internal or external web links. Inserting a link into an InfoPath form is fairly trivial, and making an image a link to a resource is easy to do within InfoPath as well using the built in toolset.

However, by specifying the address within your InfoPath form, you are creating a static address, one that, if it changes, will need the form to be updated as well. If you include multiple links, then all of these links will need to be updated within the form when they change as well. This can create both challenges when moving to different environments as well as challenges for the team responsible for maintaining the form.

A better overall approach is to have the links stored in an external list, and dynamically generate the links when the form loads. The links can be updated through environments if necessary by updating the link values in the associated list, and the end user of the system can update resource links by updating the list values.

The solution described in this post works well for resources of multiple different types, like web pages, documents, and videos. If you have a single resource type, such as videos, that link to your form, you can create a library specific for that content type, and link directly to the library that hosts the content.

We will create a list within SharePoint to store these link values. A data connection to that list used by your InfoPath form will then retrieve the values from the list, and filter by the link type.

We are going to link to these resources using images (text based links work as well). There is a known issue with the picture insert function in InfoPath that causes a dynamic picture link to revert to a static value instead of the dynamically generated external value. We will also provide the workaround to this issue in this document. The result of this process will be multiple images, each linking to a URL determined by an external SharePoint list.

Create and Customize Link List


Ingredients
• SharePoint site to host links list
• Design Permissions on site

We first need a standard SharePoint link list to store our links in. These links can be to anything, external sites, SharePoint sites, images or videos stored on the SharePoint site. The only thing to be aware of when linking to internal SharePoint areas is that the user must also have permissions to the areas/content you are linking with. Otherwise, the link will not resolve and you will get a permissions error when the new window opens.

Since we plan on populating this list with multiple links, we need some way of telling them apart. We will add a “LinkName” field to the list to allow us to filter on that value.

Steps
1. Navigate to the site that you wish to add your links list to. Choose “Site Actions->More Options”.
2. “Filter By:”, select “List”.
3. Select “Links”.
4. Name your list something that describes its content (“SurveyFormLinks”).
5. Click “Create”. Your list will now be created.
6. Within your new list, click the “List” tab, and select “List Settings”.
7. In the “Columns” section, click “Create column”.
8. Name your column “Link Name”, leave it as a “single line of text”.
9. Check “Yes” for “require that this column contains information.
10. Leave other values as default and click “OK”.
11. (Optional) I like to warn users about the risk of changing values here, so I put that warning right in the list description. Click “Title, Description, and Navigation”. In the description section, I put the following text “DO NOT EDIT LINK NAME FIELDS, they are used by an InfoPath form to differentiate between links. To change a link, modify the URL.”. Click “OK”. Now when a user browses to this link list, they see this warning in the list description.
12. Add some links to your list, remembering the “Link Name” so that you can use it later on the query filter:


Create a Data Connection to the Link List


Ingredients
• SharePoint Out of Box link list created and populated with some links
• URL of site that hosts the list and data connections
• URL of data connection library
• InfoPath Designer 2010

Steps
1. Open InfoPath Designer 2010, New->Blank Form->Design Form
2. On the “Data” tab, click “Data Connections”
3. Click “Add”
4. In the data connection wizard, choose “Create a new connection to:” -> Receive Data ->Next
5. Select “SharePoint library or list” ->Next
6. Enter in the URL of your SharePoint site that has the list and connection library ->Next
7. Select your link list from the list ->Next
8. Select “URL” and “Link Name” from the list fields. ->Next
9. Check “Store a copy of the data in the form template”
10. Name your data connection and check “Automatically retrieve data when form is opened” -> Finish
11. Click “Convert to Connection File”
12. Paste in the URL of your data connection library. Something like:
http://www.mysharepoint.com/sites/ISTT/Form%20Data%20Connections

Then append a forward slash and a filename for your data connection, such as:
http://www.mysharepoint.com/sites/ISTT/Form%20Data%20Connections/QueryDataConnection

This will create a data connection file called “QueryDataConnection.udcx”

13. Leave Connection link type as “Relative to site collection”, click OK.
14. Navigate to your connection library and approve the connection.

Add the Data Connection to your Form


Ingredients
• Data Connection saved in connection library
• InfoPath form
• Form Links List populated with links

Steps
1. Open the form you wish to connect to this data connection in InfoPath Designer.
2. “Data” tab, click “Data Connections”.
3. Click “Add”.
4. Choose “Search for connections on a Microsoft SharePoint Server”.
5. Choose “select site” to see if your site is already listed in the “Site:” drop down list. If it is, go to step 11. If not, click “Manage Sites”.
6. Click “Add”.
7. Enter in the URL of the site that hosts your data connection library, for example:
http://www.mysharepoint.com/sites/MyForms.
8. Enter a display name.
9. Click “OK”.
10. You should see your site name in the list of sites. Click “Close”. 11. After a moment or two, you should be able to select your site from the list, and then see the name of your data connection library displayed in the dialog window. Click the “+” beside the data connection library and select your form links data connection:
Click “Next”.
12. Select both the “URL” value and the “Link_Name” value.
13. Click “Next”.
14. Check “Store a copy of the data in the form template”.
15. Name your data connection with a clear name for its purpose, such as “SharePoint Link List Connection”.
Check “automatically retrieve data when form is opened” (IMPORTANT). Click “Finish”.
16. You should now have your data connection viewable in the Data Connections Window (if this is a functioning form you will have other data connections as well):
17. Click “Close”.

Create and Populate the Hidden URL values


Ingredients
• InfoPath form
• Form Links List populated with links

Before we can dynamically set the URL values for images on the form we first need to extract those values and populate hidden fields with them. If we bind the values directly to the form images, we lose the ability to filter on the link type. By using hidden fields as an intermediate holding area we can filter the returned values from the link list to correctly populate those fields with the associated specific value.

Steps
1. Open your InfoPath form.
2. Add one new field for each link you wish to include, naming them clearly based on the type of link you are returning:
3. Right click your first field and select “Properties”.
4. In the “Default Value” section, click the Function (fx) button.
5. Click “Insert Field or Group”.
6. By default, the main data connection will be displayed. Click the drop down list at the top and select your link data connection.
7. Expand the “myFields” then “dataFields” folders, select “URL”:
8. Click “Filter Data”.
9. Click “Add”.
10. For the first drop down, select the link name column you created in the link list earlier (in our example, the name is “Video Name”, not “Link Name”):
11. Leave “is equal to” as the default. Click the drop down arrow on the third list, and select “Type text”.
12. Type in the name of your link. This will filter the URL based on your link name:
13. Keep clicking OK until you get back to the formula window, your formula should look similar to:
14. Click OK again, and one more time to close the field properties.
15. Repeat the same process for each additional link, associating each with a corresponding hidden form field. The only value that needs to change for each is the name of the link on the filter.

Hook up Links to Images


Field Reversion Issue
Intuitively, you may think that if you click the “Insert” tab on your InfoPath form, and then choose “Picture”, and insert the picture on the form, you would then be able to bind that picture to a dynamic link. When you open the picture properties, you can even see where you can bind it. If you right click on the picture, select “Hyperlink” you will see the following:
Great you are thinking! I just have to select my newly created dynamic field in the “Data Source” section and we’re good. Right? Unfortunately not.

So, for example, I will go ahead and select my first link hidden field to populate the form. Here is what it looks like when I do:
I then click “OK”. But it doesn’t work! Open the hyperlink properties again to see why:
The “Link to” field has reverted back to the “Address” selection, losing all of your binding information. This is the field reversion link issue.

Set Your Image URLS Dynamically (Field Reversion Work Around)
Ingredients
• InfoPath form
• Form Links List populated with links
• Image (or images) to link to queried URL values
• Hidden fields containing URL values

Steps
1. Open your InfoPath form.
2. Determine where on the form you wish to place the image.
3. Open Windows Explorer and browse to your link image:
4. Right click on the Image and Choose “Copy”.
5. Go back to your InfoPath form, click within the area you wish to have your image link, right click and choose “Paste”:
6. Your image should now appear on the form. Inserting an Image this way allows us to retain the data source binding. Click on the image if not selected already, and right click. Select “Hyperlink”:
7. Click the “Data Source” radio button.
8. Select the Appropriate hidden link field and click “OK”:
9. Click “OK”. Now, if you open the hyperlink properties of this image, it will remember the binding. Copying and pasting allows the binding to be remembered. Inserting an image using the InfoPath Insert command does not.
10. Repeat this process for each of the image/URL links you have in your form.
11. Publish and test. You should be able to click the images in your form and have the appropriate URL open in a new window.

No comments:

Post a Comment