Cascading drop-downs and imagesPosted: 2012-04-02
You all know the great thing with InfoPath, how easy it is to work with cascading drop-downs. I would like to share one more thing with you in this area, how you could show different images depending on your choice in the drop-down.
I will very shortly describe how to set up cascading drop-downs, the main thing here is to give you the way to show the different images.
The drop-downs (2) is received from a SharePoint list with three columns “Tillverkare”, “Modell” and “Bild” (that is Manufacturer, Model and Picture, in english).
The configuration of the first drop-down looks like this.
The second drop-downs configuration looks like this.
Notice the lower circle, the next picture will show what to do when you press the button of the upper circle.
- Press the button to choose from your secondary data source
- A difference from the first drop-down is that you need to add a filter, so press the button “Filter data…”
- Add a filter where you say that Tillverkare (Main data source) is equal to Tillverkare (second data source)
Ok, so now lets move on to how to make this true for an image as well.
My list in SharePoint also has a third column called “Bild” (picture in english) and we want this picture to be changed depending on what Modell we choose.
Now lets add a Picture control to your form and open the properties of the picture.
You will see a default XPath to the picture control it self. Press the button to the right of the XPath and point to your secondary data source and your picture column. Now, as you see where the cross is, we would have wanted a button to add a filter, but it’s gone 😦
Instead we will use the filter from drop-down 2 as I will show you in a minute. For now, highlight your picture column in your data source and press OK. Also notice that you should set the picture to be Read only.
Open the properties of the second drop-down and copy the the part of the XPath that holds the filter.
[xdXDocument:get-DOM()/dfs:myFields/dfs:dataFields/my:SharePointListItem_RW/my:Tillverkare = d:Tillverkare]
Add this at the end of the XPath for the picture control and replace “Tillverkare” with “Modell”. Now you have a filter for you picture control as well.
To avoid having to see the picture controls icon in the form when no “Modell” is choosen, put a formatting rule on it that has the condition “when Modell is blank” hide this control.
When you publish this form you will probobly get an error that looks like this.
But go ahead and publish anyway and you will see that it works.
For a full blog post about setting up the cascading drop-downs you should read this blog post at Koobar’s Point.
I hope this helps someone sometime…