Show Image Based on Selection in InfoPath

Kendall Kunz

Images based on Selections in Infopath

We had a need to display an image based on the selection from a drop-down list. Essentially, when a user selects a model number an image should display corresponding to that model number. Images are mutually exclusive and if the user changes their selection, the image should be updated to reflect that new choice. Also, the image control is hidden via a formatting rule until a selection is made. The concept is actually very simple and takes but a few steps.

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.

Button

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.

Button

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

Button

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