Use PowerPoint 2010 to create button images for InfoPath 2010

Learn how you can use PowerPoint 2010 to create images that you can use for a Picture Button control in InfoPath 2010.

ADVERTISEMENTS

InfoPath 2010 introduced a new control called the Picture Button control.

A Picture Button control allows you to select an image to be displayed for the normal state of a button and another image to be displayed for the hover state of a button.

In this blog post, I’ll show you how you can use PowerPoint to create images for use with Picture Buttons in InfoPath 2010. And after you have created the images, you can add them to a picture button.

This tip was briefly shown by the InfoPath Team in one of their InfoPath 2010 introduction videos.

And because I think it is a very useful tip for you to be aware of, I decided to expose the steps in this blog post to save you time from having to watch the video to know how to create such images. However, the video is still worthwhile watching.

To create button images for InfoPath 2010 in PowerPoint 2010:

  1. Open PowerPoint 2010.
  2. Press CTRL+A and then Delete to delete the sections that are on the slide.
  3. Click the Insert tab.
  4. On the Insert tab under the Illustrations group, click Shapes.
  5. Click one of the Rectangles from the Shapes drop-down menu.

    Selecting a rectangle shape in PowerPoint 2010

    Figure 1. Selecting a rectangle shape in PowerPoint 2010.

  6. Draw a rectangle on the slide.
  7. Right-click the shape you have just drawn and select Edit Text from the context menu.
  8. Type a piece of text that you would like the button to have as a label. For example: Submit.

    Typing text in a shape in PowerPoint 2010
    Figure 2. Typing text in a shape in PowerPoint 2010.

  9. Click the Format tab.
  10. On the Format tab under the Shape Styles group, click the down arrow next to the list of styles, and select a style for the button.

    Normal state for Picture Button image to be used in InfoPath 2010
    Figure 3. Normal state for Picture Button image to be used in InfoPath 2010.

  11. Right-click the button shape, select Save as Picture from the context menu, and then save the image somewhere on disk.
  12. Repeat steps 10 and 11 to give the button another color and save a second button image. Note: Do not change the size of the button, just its style.

    Hover state for Picture Button image to be used in InfoPath 2010
    Figure 4. Hover state for Picture Button image to be used in InfoPath 2010.

  13. Close PowerPoint 2010.

To use the images you created in PowerPoint as the images for a Picture Button in InfoPath 2010:

  1. In InfoPath Designer 2010, create a new Blank Form template.
  2. Click the Data tab.
  3. On the Data tab under the Form Data group, click Resource Files.
  4. On the Resource Files dialog box, click Add.
  5. Browse to the two images you created earlier and add them as resource files to the InfoPath form template. Note: You can only select one image at a time, so just repeat steps 4 and 5 to add the second image.

    Resource Files dialog box in InfoPath 2010

    Figure 5. Resource Files dialog box in InfoPath 2010.

  6. On the Resource Files dialog box, click OK.
  7. Click the Home tab.
  8. On the Home tab under the Controls group, click Picture Button.
  9. Right-click the Picture Button and select Picture Button Properties from the context menu that appears.
  10. On the Picture Button Properties dialog box on the General tab, select the first image from the Picture drop-down list box, select the second image from the Hover picture drop-down list box, and click OK.

    Picture Button Properties dialog box in InfoPath 2010

    Figure 6. Picture Button Properties dialog box in InfoPath 2010.

  11. Resize the Picture Button if you wish and then press F5 to preview the InfoPath form.

Now whenever you hover the cursor over the button it will display the second image and when you move the cursor away from the button it will change back to the first image.

 
 Subscribe via RSS or Email

Copyright: This article may not be used on web sites (whether personal or otherwise), copied, disseminated, altered, printed, published, broadcasted, or reproduced in any way without an expressed written consent of S.Y.M. Wong-A-Ton. The techniques demonstrated in this article may be used within any Microsoft InfoPath project. This article is provided without any warranties. Copyright for this article is non-transferrable and remains with the author, S.Y.M. Wong-A-Ton.

InfoPath 2013 Cookbook: 121 Codeless Recipes for Beginners
InfoPath 2013 Cookbook 2: 121 Codeless Recipes for SharePoint 2013
InfoPath 2010 Cookbook: 101 Codeless Recipes for Beginners
InfoPath 2010 Cookbook 2: 101 Codeless Recipes for SharePoint 2010
InfoPath 2010 Cookbook 3: 101 Code Recipes for C# Developers
InfoPath 2010 Cookbook 5: Integrating InfoPath with Excel and Excel Services


Related Posts

ADVERTISEMENTS

InfoPath 2013 Cookbook: 121 Codeless Recipes for Beginners

InfoPath 2013 Cookbook 2: 121 Codeless Recipes for SharePoint 2013

InfoPath 2010 Cookbook: 101 Codeless Recipes for Beginners

InfoPath 2010 Cookbook 2: 101 Codeless Recipes for SharePoint 2010

InfoPath 2010 Cookbook 3: 101 Code Recipes for C# Developers

InfoPath 2010 Cookbook 4: 101 Code Recipes for VB Developers

InfoPath 2010 Cookbook 5: Integrating InfoPath with Excel and Excel Services