Thursday, May 13, 2010

InfoPath Form Layout - Proper Design

You've decided to create an infopath form but don't want to do the whole "let's make this and see how it works and then figure out the 'right' way to do it" approach. One simple tip that will really help in laying out your form for both presentation sake and for data source/structure's sake: EVERY label AND control should have their OWN cells inside a table which is inside a section which is inside another table.

This may sound strange, but let's break it down further. You have a simple form with 4 fields (First Name, Last Name, Favorite Food, and Favorite Color). You should firstly think of how the information should be grouped (name info and favorites info) and use that to think of how many sections you will need. For this we would need two sections. Once you have your number of sections, add 2, and that's how many rows you need for a simple form (one of those rows is the title row and the other will be for the submit button). To create this layout, I used a Table with Title layout table, split the second cell into 3 rows, removed the shading on the second row and all borders on those bottom rows, gave it a title, put two sections in their respective rows, and put a button down at the bottom. From there, you place a Custom Table inside the sections to allow you to put controls and their labels into the section in an organized fashion. Having done that, name all the controls and sections by double-clicking them and changing the Field or Group Name. Here's what the results looked like in both the table and then the data source menu:

This particular way of doing things will keep all of your data sources in named folders and makes it easy for those coming later to identify where a data source should exist on the basic page. All corresponding data is automatically grouped together for easier retrieval, if necessary, from them pesky programmers. Have fun!