Partager via

Dynamic Pictures

  • Article

When designing a feature-rich InfoPath form template, it is sometimes necessary to provide a dynamic image in response to user action. InfoPath picture control hides treasures that will help you satisfy such a requirement. In this article, we will explore a technique that allows you to make this happen without writing any code.

 

Here is our scenario: build a hardware order form for the telecommunications department. In the form, we would like to let the user choose the phone that they want to order, and show them a picture of the phone as soon as they select it.

 

 

The following steps will make this possible:

 

  1. Place pictures of available phones in a shared location; let's call it http://mysite/phones/photos/. Pictures are named according to phone ID's - for example, 1.jpg, 2.jpg, 3.jpg, etc.

  2. Insert a picture control. When you do so, InfoPath will ask whether you want the picture to be included into the form, or if you want it to be linked. Choose the second option.

  3. Take a look at the node that was just inserted into your data source by going to View | Data Source. Let’s call the new node hyperlinkDataSource; it’s a node with data type "hyperlink".

  4. Insert a text box that’s also bound to hyperlinkDataSource.

  5. Preview the form. Use the picture control to attach the image. Observe how the path in the text box changes to reflect the path of the image you just attached. Try changing the value of the text box to point to a different picture. Note how the picture control displays the new picture when you tab out of the text box.

    Now, we want this step to happen programmatically, when the user selects the phone from the dropdown of available phones.

  6. Create a phone picker dropdown; labels in the dropdown will show phone names, and values will contain phone ID's that correspond to file names we used in step 1. The simplest way to do this is to enter the items manually; don't forget to include the default "pick a phone" item.

If you want to get fancy, you can use a secondary data source - web service - to provide the list of available phones.

  1. Create a rule on the phonePicker node: set the value of hyperlinkDataSource to

    concat(" http://mysites/phones/photos/ ", phonePicker, ".jpg")

  2. Go to control properties for the new picture control; uncheck the “Allow users to browse for new pictures” property.

We're done! Preview the form and try selecting a few phones from the dropdown.

 

Picture control is available in both InfoPath 2003 and 2007, however it is not supported in browser-enabled form templates.

 

Alex Weinstein

Program Manager

Comments

  • Anonymous
    September 25, 2006
    The linked-image approach is efficient but requires a shared location to be available and accessible. You can achieve the same result with inline images. For example, you could:

    - Have a repeating section containing an image caption and an inline image
    - Have a listbox listing all the captions (and have the image copy as value, the listbox is using the repeating section as its data source)
    - Have a picture control that is being set whenever the listbox selection changes

    Of course, the repeating section can be hidden if needed. It would be a likely scenario to have it in a different view where you can add/remove images (“admin” view, can be protected by roles).

  • Anonymous
    September 25, 2006
    Excellent point. You may wish to embed the images into the form template to have a complete, wrapped up solution. David's suggestion would work very well.

    One possible improvement - instead of storing the inline images in the main data source, store them in a secondary data source - XML file added as a resource to the form template. This will ensure the smallest possible size of the form instances. That resource file can be just another InfoPath form that stores inline images. One drawback, however, is that you would need to update the form template every time a picture needs to be added or modified.

    -Alex

  • Anonymous
    May 24, 2007
    Hi there How can we use a secondary data source to access a list, and get the attachments from a item list?

  • Anonymous
    July 04, 2008
    Hi, How can we use the picture control as a link and display TIFF pictures? This file extension is not available, just if the picture is included in the form. Any other control that allows this? The scenario is: pictures are being saved in a sharepoint picture library after being scanned, and I would like to show the picture as a link (ex: http://site/image.tif) in the form. Any way to achieve this? Thanks, Miguel

  • Anonymous
    July 07, 2008
    Hi Miguel, Not sure if you tested this but if you try and use Internet Explorer to open a ".tif" file it will open in a separate application indicating IE cannot display this file type. When you try to link to an image in InfoPath we are going to use IE's engine to try an render that file - hence this will fail. There may be a 3rd party control that will do this for you or you could try and write an ActiveX control to do what you need; however, keep in mind custom controls are only supported in the InfoPath client. If you don't "have" to have the images in .tif format you may want to look at converting those to something else (i.e. .jpg) so you can get the behavior you desire. I hope this helps! Scott

  • Anonymous
    April 26, 2012
    You could also add the photos to the infopath form as a resource.  But if this was going to be used as an online form that would be connected with the sharepoint image library the the shared location this would not be a problem and would allow you to update the pictures of the phones without having to change the form itself.