Monday, April 25, 2011

Simple InfoPath 2007 Tutorial - Part 3 - Controls

Part 1 - Layout Design
Part 2 - Borders/Shading, Color Schemes, and Sections

Well, I finally got around to working on part 3 - yay for InfoPath 2010 and keeping me from using '07 and forgetting to blog about it...and thanks to whomever commented to remind me about this nearly abandoned series. This part of the InfoPath tutorial is going to focus on the various controls that one can use to make a browser-enabled InfoPath form. We discussed in the previous post the use of Sections as invisible containers to hold all your information; the key to sections is to put layout tables INSIDE them to align content (sections are for grouping/controlling information and tables are for aligning it). We also discussed that - in 2007 - you can drag n drop controls onto the screen or click where you want them to go and then just left-click them in the task pane.

1. Inside your sections that you've cleared out all space - left click and then swap to "Layout Tables" in the task pane and insert a "Custom Table". The custom table will ask how many rows and columns you want to have.

This gets into a tough/sticky situation: how do you want to handle the way a control (like a text box) relates to your labels for said control? I've seen it all: a label on top of the box, to the left of the box, underneath the box, and no label at all (oddly enough, nothing to the right of the box). Someone sent me an article recently where people did some eye-tracking testing and found that - for Americans at least - putting the label to the left of the box but making sure that it is super close to the box is the best setup but the second best is to put the label directly above the box - you choose. What's the difference? Screen real estate. If you put the boxes below the labels then your form tends to be longer on the page - making people scroll which is like the cardinal sin for some users - but putting the labels to the left makes your form wider - which can be difficult to get right with different monitors people use. I usually go with 4 columns and use the labels to the left so I end up with 2 columns of fields to fill.

2. Set the columns to 4 and the rows to 4 and type the labels for this section in the first and third column

3. Drag n Drop what you feel are the appropriate controls into your form for each of the fields. A textbox will be the most commonly used control because it is for people to just type in but it can be used for sentences/words, numbers, even dates (though a datepicker is usually better for dates). A dropdown list box will allow people to choose a single item from a dropdown menu (hopefully you've seen a dropdown menu when you click "File" and all those things pop down but in this you just have a box with a arrow you can click). Try not to use the Rich Text Box, Repeating Section, the Optional Section, or Repeating Table because the data that goes into this is difficult to work with when you want to make it show up in SharePoint (I'll explain later...for now, trust me).

4. Double-click each control or right-click them and then left-click "Properties" at the bottom. You will be taken to a new window with options for your control. Similar to your sections, you can name the control's "data binding" or "data source" from Field2 to something useful like LastName. Renaming this will be useful later and technically this is naming something else but we'll get to that later. Go ahead and rename each of your controls to something meaningful.

5. Now that you are done doing that for the first section, repeat for all remaining sections/fields...this is the longest, most tedious part of form design I think. Sometimes some of automating your form can take longer but not often.

6. Last things - highlight all of the cells in each of your layout tables that have labels in them and set them to be RIGHT-aligned (this will push your labels to be as close to the controls as may have to add a space if you feel they are TOO close together). Also, you can adjust the columns by moving your mouse over the VERTICAL dotted lines and then hold your left mouse button down and drag your mouse to the left or right...just try to keep all your tables similar.

7. If you have a box that is supposed to be huge and span multiple cells then you can merge smaller cells into a bigger one - you can then stretch the textbox to be bigger by left-clicking it once and then clicking and dragging the little white handles that appear at the corners. The final step to making a paragraph-type box is to double-click it, go to the "Display" tab and checking the "Multi-line" checkbox.

8. In case you have to do calculations - the Expression box is your friend. It has the ability to display whatever is in another field (useful for when you have a multi-page form) and to do math and other calculations (yea, I said "other calculations" like putting words together or figuring out if someone is dumb). We won't get into it today but you can drag n drop it to where you want it to calculate - possibly a total box at the bottom of several boxes where people type numbers. Key thing to note about expression boxes (at least in my experience) - they are read only, which is cool, and they will not let users copy and paste from them (and the coolness of that varies).

9. The Attachment field will let you attach a single item to that button - this is useful for limiting people to attaching a certain number of items - but be careful to note that getting the attachment to show up in SharePoint is probably not possible without code. If you want to give users the ability to attach as many attachments as they want - you then have my blessing to use a repeating section - just put the repeating section where you want your attach button to go, delete any space in it, and place the attachment button inside the section. If you need to have more information tracked per attachment then you need to use a layout table and create the repeating section just like a regular section - layout tables, labels, controls, naming controls, all that jazz.

10. Option buttons - aka radio buttons - and Checkboxes are the most annoying controls to layout on a page. For one, they automatically type out a label to the right of them so you have to remove that. Secondly, the settings for these are a little weird. For checkboxes, the data type is called "Boolean" meaning true/false and it gives you the option of saying whether or not Checked is true or Unchecked is true. I HATE the boolean data type because - to set it automatically elsewhere - you have to set it using the word "true" or "false" all lower case (but you'll see it listed as all upper case) AND because it shows up in SharePoint "TRUE"...honestly, looking at a long string of TRUE's and FALSE's is just annoying and harder to, for checkboxes, change the data type (on the page where you name the control) to "Text" and then it has a place for you type what words you want to use to represent when an item is checked and when it is cleared/unchecked (I sometimes don't put anything in the "cleared" spot and only put words in for when they check it...that way, when it shows up in sharepoint, i see mostly empty space and then whatever words I set for the boxes that get checked). For both option buttons and checkboxes - you have to double-click them and say what they are supposed to equal and specify what is set by default (checked/unchecked or the bubble you double-clicked has the option "This button is selected by default" for you to set that bubble as the default).

11. Last thing - I promise - if you happen to pick the wrong control by accident, just right-click the control and click "change to" and then choose the correct one. If the correct one isn't listed, just delete the control and get the right one (we'll clean up the behind-the-scenes mess this creates later).

Part 1 - Layout Design
Part 2 - Borders/Shading, Color Schemes, and Sections