Sunday, August 20, 2006

Picture Buttons in InfoPath 2007

In InfoPath 2007 it is impossible to create buttons with images as background. But, you can adapt some InfoPath files by yourself to create those picture buttons. Follow my instructions:

1. Create a new InfoPath form template

2. Add a new button. (
The button has ‘button’ as standard label.The border is black and the background is gray.)

In InfoPath 2003 it was still possible to replace the label value with a space character to have a button without text. In InfoPath 2007 it is impossible to add a space character as label value. We replace the standard value with ‘myvalue’.

3. Go to Tools > Resource Files and Add an .gif file as a Resource file. Rename the file to ‘picture.gif’.

4. Save your form template to ‘test.xsn

5. Now, go to the location where you stored the form template and rename ‘test.xsn’ to ‘’.

6. Extract all files and open View1.xsl with notepad. This stylesheet file renders the xml data. The content is written in HTML en CSS. The XSL has the same relation like HTML & CSS has. HTML files contain content and CSS files contain style definition which can be applied to the content files (HTML files).

7. Navigate to the Style endtag.

8. Add a new CSS definition for the picture button

BACKGROUND-IMAGE: url(picture.gif);

9. Navigate to the input tag in the body which defines our button and add the newly created CSS definition the class attribute.

... class="imageButton langFont" ...

10. InfoPath 2007 does not support an empty buttonlabel. But you can change the label manually in this file. So replace the ‘myValue’ in the value attribute with empty quotes.
... class="imageButton langFont" value="" ...

11. Save and close View1.xsl.

12. You can now reopen your form by right-clicking on manifest.xsf and select ‘Design’ in the menu.

13. The picture will be integrated in your view right now.

Greg Collins also wrote an article about Picture Buttons for InfoPath 2003.
My article is a supplement on his article.