Reading Time: 4 minutes

[REF-MSDN]

 

1. Start InfoPath. Create a blank form.
2. In the Design Tasks task pane, click the Controls link. Click the Button control.

A Button control appears on the blank form.

3. Right-click the Button on the form, and then click Button Properties. In the Button Properties dialog box, click the Size tab. Change the height to 100 pixels. Change the width to 100 pixels. Click OK.

4. In InfoPath 2007, click Resource Files on the Tools menu. In the Resource Files dialog box, click Add. Move to the folder that contains the .gif files, and then double-click the .gif file that you want. Click OK to close the Resource Files dialog box.

Note The file that is used in this example is PoweredByCS_commercial.gif.

5. On the File menu, click Save.
6. In the File Name box, type Button1 to change the name of the form. Save the form to a folder of your choice. Click Save to close the Save As dialog box.

Note Do not close the form that you are designing.

7. In InfoPath 2007, click Save As Source Files on the File menu.
8. In the Browse for Folder dialog box, move to the folder in which you saved the Button1 form. Click the folder, and then click OK to close the Browse for Folder dialog box. On the File menu, click Close to close the form.
9. In Microsoft Windows Explorer, move to the folder that contains the form and the files that were extracted from the Button1.xsn file.

Note The folder contains the original Button1.xsn file and the following extracted files:

Manifest.xsf
Sampledata.xml
Template.xml
Myschema.xsd
View1.xsl
10. Open the View1.xsl file in Notepad. To do this, follow these steps:

a. Right-click the View1.xsl file.
b. Click Open With.
c. Click Notepad from the available options.
11. In the View1.xsl file that is now open in Notepad, locate the following line of code:

<input class=”langFont” title=”” style=”WIDTH: 86px; HEIGHT: 85px” type=”button” value=”Button” xd:xctname=”Button” xd:CtrlId=”CTRL1_5″ tabIndex=”0″/>

12. Replace the co de to below code and change the name of the image
The code that appears will look similar to the following code:

<input class=”langFont” title=”” style=”BORDER: none; BACKGROUND-IMAGE: url(PoweredByCS_commercial.gif); BACKGROUND-POSITION: left top; BACKGROUND-REPEAT: no-repeat; WIDTH: 86px; HEIGHT: 85px” type=”button” value=”Button” xd:xctname=”Button” xd:CtrlId=”CTRL1_5″ tabIndex=”0″/>

13. Save the modified View1.xsl file. Close Notepad.
14. Move to the folder that has the files that you extracted from Button1.xsn.

Note This is the folder with the modified View1.xsl file.

15. Double-click Manifest.xsf to open the form in InfoPath.

Note The original Button shows the .gif image at the upper left with the word Button in the center of the Button.

16. Close InfoPath.
17. In Notepad, reopen the View1.xsl file. To modify the “<input . . ./>” section, follow these steps:

a. Change the Button size to 100 pixels by 100 pixels.

You can do this by changing the WIDTH attribute of the Button and by changing the HEIGHT attribute of the Button.

b. Delete the word Button to remove the word Button from the face of the Button.

You can do this by changing the VALUE attribute of the Button.

c. Center the .gif image on the Button.

You can do this by changing the BACKGROUND-POSITION attribute of the Button.

The changed <input…/> element will look similar to the following code:

<input class=”langFont” title=”” style=”BORDER: none; BACKGROUND-IMAGE: url(AG00174_.gif); BACKGROUND-POSITION: center; BACKGROUND-REPEAT: no-repeat; WIDTH: 100px; HEIGHT: 100px” type=”button” value=”” xd:xctname=”Button” xd:CtrlId=”CTRL1_5″ tabIndex=”0″/>

d. Save the modified View1.xsl file. Close Notepad.
18. Replace the earlier version of the Manifest.xsf file with the newer version of the Manifest.xsf file.

Note If you double-click the Manifest.xsf file, you open the form in InfoPath. The changes are not in the form. This behavior occurs because the earlier version of the Manifest.xsf file is in the cache. You must replace the earlier version of the Manifest.xsf file with the current version of the Manifest.xsf file. To do this, use either of the following methods:

Method 1: On the Windows command line, type the following command, and then press ENTER:

InfoPath.exe /cache clearall

Method 2:

a. Open the Manifest.xsf file in Notepad.
b. On the File menu, click Save As.

The Save As dialog box prompts whether you want to replace the existing file with the same file name.

c. Click Yes

The newer version of the Manifest.xsf file has a newer time stamp. Therefore, when you double-click the newer version of the Manifest.xsf file, the cached file is discarded. The cached file is replaced with the newer version of the Manifest.xsf file. After you complete either Method 1 or Method 2, double-click the newer version of the Manifest.xsf file. You can see your new Button.

Communities Tagged : Technology
Tagged: InfoPath-2007

2 Responses to “Insert Image in InfoPath Form – Browser Compatibility Form”

  1. Parekh, Dipen Says:

    Hi Jenkins,

    Nice post.

    Can you confirm whether the button image will apply when the form is viewed in browser.

    Thanks,
    Deipn

  2. NS, Jenkins Says:

    sorry for late reply…
    sure its apply, I will update the Internet Explorer image soon…
    Since currently I am not working with Infopath, I will design a new form and update you

Published by NS, Jenkins on 11 Mar 2009 at 06:11 pm