Show an Image Based on ListBox Selection in InfoPath

I know, I know, Infopath is not the prefered choice for Form development, but it is still a powerful tool.  Especially for SharePoint admins that are restricted on what they can use to modify forms in thier enviroment.

I worked with a Hostpical SharePoint Admin today to solve one last problem before rolling this form out for general use.  He wanted to show an image based on a selection in a list box.  After some research I was able to build that part of the form and the image pops right up based on the selection.  Here is how we did it.  I used a post from the blog Forms on Fire –> https://www.formsonfire.com/

1) Upload your images to a picture library on your SharePoint site, alternatively the images can be in a directory on any website, as long as it available over the Internet.

image files

2) Setup your form.  For our example, we need 2 text boxes, 1 drop down list and a picture control.  The first text field stores the base URL, the drop down list contains image choices.  Alternatively, the images could be populated via a data connection to a SharePoint list if we make the value the file name.

Infopath image selection

The second text field concatenates the full URL from the base URL + “/” + image selection.

Field Value Infopath

Based on our data XPath for the default value of the full URL looks like this:

concat(../my:imageLocation, “/”, ../my:colorSelection)

3) The last step is to set the default value of the picture control to the full concatenated URL.  In our example, this would be the “fullURL” value.  Also, make sure the “Refresh value when formula is recalculated” option is checked (default).

Full URL

That’s it!  In our example, you can see how the full URL is constructed and the image updates based on the choice from the drop down list.

Check out Forms on Fire Blog, lost of great information.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑