Compartilhar via

Layout Tips & Tricks

  • Artigo

2D vs. Flow

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.

Layout Tables

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 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:

  • If you’re copying an existing paper form, try sketching out a grid for it using a pencil and a ruler. Count how many rows and columns you need, insert that table, and then start inserting controls into the appropriate cells.


  • InfoPath provides a Layout task pane in design-mode which helps you get started using tables, and exposes some of the actions like Merge and Split Cells in a more convenient fashion.

  • When you drag a control into a table cell its width will be set to 100% automatically. Consider using separate cells for static text and for controls.


  • If you are working from a schema, try dragging a group into the view – for example, “myFields”. One of the options should be Controls in Layout Table which automatically creates a two column table with a standard form layout, containing controls with width set to 100%. You can resize the controls automatically by resizing the layout table.

In the InfoPath 2003 SP-1 Preview we’ve added a few more table features:

  • a “fly-out” Insert Table button on the toolbar to make getting just the right table into the view easier


  • Draw Table – which definitely fits in with the Format Painter as one of the lesser known but essential tricks in your form design arsenal

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.

Layout “Grid”

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.  

Comments

  • Anonymous
    July 07, 2004
    Hi,
    The sample grid image does not appear in my browser, can you mail it to me?,

    Thanks a lot,

    Kaan AKYOL
    Software Developer

  • Anonymous
    July 08, 2004
    Updated the blog to use a GIF instead of a PNG.

  • Anonymous
    April 25, 2011
    The sample grid image sounds would be useful, but still does not appear.

  • Anonymous
    February 09, 2012
    Still it does not appear. Please re-upload!

  • Anonymous
    February 09, 2012
    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.

  • Anonymous
    November 23, 2012
    The comment has been removed

  • Anonymous
    May 09, 2013
    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?

  • Anonymous
    August 18, 2014
    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.

  • Anonymous
    August 18, 2014
    Layout tables. Is there any way to STOP the table from resizing the field or button each time you resize the table?