One of the first things that experienced form designers will notice when using InfoPath is that layout of controls is not on a 2D design surface – it’s what we call “flow-based”. Controls function like images – or even character glyphs – in an application like Word. You can drag them around and insert them between words and use blank lines or spaces for positioning. To those designers who are used to precise layout using pixel grids or absolute coordinates, this can be disconcerting.
To experienced web designers, however, this model is very familiar. Web pages have to be designed to layout dynamically based on the target device. When you’re designing a web page you simply don’t know how wide the browser window which will eventually display the page is, how large the fonts are for the user viewing the page, or even what color settings are applicable. And, of course, different browsers display the same content differently even if all other variables are the same.
InfoPath templates face a similar set of challenges – but in this case, it’s the data and the form that is dynamic. A variable number of records can appear, parts of the form can show and hide, and users can type different amounts of text into controls which grow. A fixed 2D layout for controls simply wouldn’t work.
Couple that with a desire to have our views be compatible with web standards (XSLT outputting XHTML), and you can see why we built InfoPath with a flow-based layout mechanism.
A lot of the coolest features in the various Office System applications are likely to fall into two buckets: either you’ve never heard of them, or you couldn’t live without them. Here are a few: Format Painter, Styles & Formatting, Fill Down, and Pivot Tables. Once you’ve used any of those, it’s hard to imagine not having them.
Tables for layout are like that.
Web designers know that the trick for good dynamic layout is to use tables. Rather than absolute positions, tables allow for 2D layout of controls by expressing constraints and relative positioning. Even tools like the WinForms designer in Visual Studio .NET are moving in this direction, encouraging the use of docking and panels instead of Top/Left/Width/Height. This makes layout tweaks easier and can even make things like localization much more straightforward.
A few tips for creating layout using tables:
In the InfoPath 2003 SP-1 Preview we’ve added a few more table features:
If you’ve never used the Draw Table tool, you should try it. Select Table | Draw Table. This will show the Table toolbar, and enter a mode where you can drag out a rectangle using the mouse to create the first cell, and then draw lines across it to split the cell into two. Keep drawing lines to keep splitting cells. You can change the Border Style on the toolbar to change the style of the borders you create, or use the Eraser tool to erase borders – merging cells.
Here’s a cool trick from the team. In the SP-1 Preview, there exists the availability to include a background image. Here’s a sample grid image:
Copy the above image and save it to your system as a bmp (no loss in fidelity). Now go into the View properties dialog, click on ‘Use a background picture’. In the ‘Files of type’ dropdown, select ‘All Files (*.*)’ and finally select the grid image you just saved. Back in the View Properties dialog, check “Tile horizontally” and “Tile vertically”. Click OK.
Now you have yourself a grid by which to align your controls and text by – this is especially useful when aligning controls between layout tables, aligning tables themselves, or in cases where tables just aren’t appropriate. When you are ready to publish the form, just go back to the properties dialog and take out the background image.
The sample grid image sounds would be useful, but still does not appear.
Still it does not appear. Please re-upload!
I don't think the sample image is anything particularly interesting. You can use whatever image you like. If you want the image itself to actually look like a grid, you can whip one up in Paint pretty quickly.
Why is it when you print the form the line thickness is random - all my line thicknesses are set to 1pt but when it prints some are 2pt then 3pt it doesn't matter how many times i format it different line thicknesses change at random - makes the form look very amateur......have read numerous blogs with the same problem and no answer
I've noticed that sometimes my layout tables have broken and controls in the lower part of the form now appear in the background. It only ever happens after saving and closing the doc, I notice when I reopen that this breakage has occurred. It seems intermittent and I don't want to rule out an error on my part but I don't know what I'm doing wrong. Any ideas?
WRT "Web designers know that the trick for good dynamic layout is to use tables." This is rubbish!! CSS is the preferred method for layout if you're a decent web designer.
Layout tables. Is there any way to STOP the table from resizing the field or button each time you resize the table?