Tip to improve an InfoPath form's appearance

  • Article

Improved InfoPath Form Look and Feel

Apples to: Microsoft Office InfoPath 2003 and Microsoft Office InfoPath 2003 SP1

Looking for simple ways to jazz up your form layout?

Summary

Using tables, inline images, background colors, and conditional visibility, I created a pretty simple look and feel that groups parts of the UI together that goes a little beyond just borders.

Example

Picture of an improved look for an InfoPath form

Implementation

I started by drawing a rounded rectangle in mspaint, then I cut it into smaller images and added it to a table. For the vertical part which grows, I didn’t use an image, I instead colored the background the same as the image. Otherwise I couldn’t get it to grow when nested repeating elements would resize. I removed all borders, padding, and other spacing to get everything to fit together.

For the repeating section, I used conditional visibility on section with two separate images. I had to use the following expression to get count and position for repeating sections:

// count //position

count(../../my:SummaryItem) != count(../preceding-sibling::node()[local-name() = "SummaryItem"]) + 1