Create a Picture Button - Greg Collins

InfoPath Dev

This Blog


Greg Collins

Create a Picture Button

Buttons that display pictures, with or without a text label, are a common practice in Web pages and are extremely useful in certain scenarios. Picture buttons can often convey much more information to a user than text buttons and do so in less space. But InfoPath has no feature that allows you to create such a button. In fact true picture buttons, which require the use of the button element, are not even supported by InfoPath—they will display in the view but will not function. For its buttons, InfoPath uses the input element with the type="button" attribute. These types of buttons only support text labels.

Regardless of this, it is still possible to create a picture button in InfoPath using a background picture—though it will be limited in that the picture will not depress, along with the border and any text label, when the button is clicked. This can be especially frustrating if you remove the border and have no text label because the user will have no visual feedback that they have actually clicked the picture button.

In this task we will create two picture buttons: one with only a picture, and another with a picture and a text label. We will add the pictures as resource files, and then manually modify the view .xsl file to make the buttons display the pictures. Let's start by designing a new blank form.

Add the button pictures as resource files:

  1. Select Resource Files from the Tools menu, and then click Add.
  2. Locate and select the first picture, and then click OK.
  3. Locate and select the second picture, and then click OK twice to close the Resource Files dialog box.

Insert and prepare the first button:

  1. Open the Controls task pane.
  2. Insert a Button into the view.
  3. Double-click the button.
  4. On the General tab of the Button Properties dialog box, press Space to clear the label.

    InfoPath requires buttons to have a label, so to effectively remove the label you can use a space character for the label text. If you attempt to just delete the label, InfoPath will present a warning dialog box.

  5. On the Size tab, type the height and width of the picture (in this case 126px and 101px respectively), and then click OK.
  6. Right-click the button, and then choose Borders And Shading.
  7. On the Borders tab of the Borders And Shading dialog box, click None to remove the existing border, and then click OK.

    To display a picture on a Windows XP style button in InfoPath, you must remove the border or the background color, or both.

Insert and prepare the second button:

  1. From the Controls task pane, insert a second Button into the view.
  2. Double-click the button.
  3. On the General tab of the Button Properties dialog box, type Publish for the label, and then click OK.

    By default InfoPath center aligns the button text label and does not provide a way to change the alignment. We will left align the text label when we edit the view .xsl file.

  4. Right-click the button, and then choose Borders And Shading.
  5. On the Shading tab of the Borders And Shading dialog box, select No Color, and then click OK.

Modify the view .xsl file to allow the buttons to display pictures:

  1. Choose Extract Form Files from the File menu.
  2. Select a location to save your extracted form files to, and then click OK.
  3. Close InfoPath to release the lock it places on your form files.
  4. Using a text editor, open your view .xsl file.
  5. Locate the first input element, and then add the following properties and values to the end of the inline style:

; BACKGROUND-IMAGE: url(Calculator.jpg); BACKGROUND-REPEAT: no-repeat

  1. Locate the second input element, and then add the following properties and values to the end of the inline style:

; BACKGROUND-IMAGE: url(Publish.gif); BACKGROUND-REPEAT: no-repeat; TEXT-ALIGN: left; PADDING-LEFT: 20px

  1. Save the view .xsl file, and then close the text editor.
  2. Reopen your form template by right-clicking the manifest.xsf file and choosing Design.


Figure 1. Buttons modified to display a background picture.

Try it:

You should now see the pictures in the buttons, as shown in Figure 1. Preview the form and test both buttons to see how they respond. By using a background picture we are able to accomplish our task of creating a picture button in InfoPath. Though the limitations might prohibit your use of them, in the right scenario they can be very useful.

©2005 Greg Collins. All rights reserved. Licensed to Autonomy Systems, LLC for display on

Published Jun 08 2005, 11:37 AM by Greg Collins
Filed under: ,



anandhi_nandakumar said:

How to show the Picture Button on Browser Enabled forms?

July 13, 2007 4:00 AM

anandhi_nandakumar said:

I have tried doing this but it doesn't work in browser enabled forms. I mean - when the form is browser enabled, i can't see the image on the button.

July 17, 2007 10:49 PM

freereg said:

I have the same problem as anadhi - I can´t see the image when I publish form. I see it only in design mode.

Do you have solution?


November 20, 2007 11:26 PM

jkiran09 said:

i am facing same problem? Did you find any solution?

August 13, 2008 2:52 AM
Copyright © 2003-2017 Qdabra Software. All rights reserved.
View our Terms of Use.