Tuesday, November 16, 2010

Simple InfoPath 2007 Tutorial - Part 2 - Borders/Shades, Color Schemes, and Sections

Previous post in this series:  Part 1 - Layout Design
Next post in this series:  Part 3 - Controls

This next section of our InfoPath tutorial continues the illustration of a Professional Development request form (proposing a trip for yourself to go for training or other professional development). Don't worry, no more long speeches about laying out your design - I hope you have it drawn out already :).

1. Open your form by RIGHT-clicking it and clicking "Design" to update your design.

2. You should have a single table that has one column and several rows. Right now, if you've been sticking with the tutorial, you'll have a title cell and a few content cells. The content cells have an ugly background and a thick blue border in between each cell. Yea, I know. The first thing we're working on is your shading and borders - so we're gonna fix this. First, left-click in your bottom cell and drag your mouse up to the first content cell; then, while your mouse is in one of these highlighted cells, RIGHT-click and click "Borders and Shading".

3. Click the "shading" tab at the top and choose the "No Color" bubble. Now, you could also change it to any other color you desire; however, most will prefer to have a simple and clean look. Also, if you do choose to color your stuff, be sure to check to see if your company has specific colors they want you to use (this can be important to making sure that your bosses like the form you made ^_^). Notice also the color dropdown that they do give you...the basic set of colors available is from your "color scheme" - remember this as we will discuss it in a sec.

4. Click back to the Borders window. This window was super-confusing at first to me. There are a couple of buttons at the top - one that says "None", one that says "Outline", and one that says "Inside". These buttons act as you expect them to: if don't want any borders - click None. If you already have borders on the outside of your cells (an outline of your entire selection) then the Outline button will remove them. If you don't have borders on the outline, then it will add them. The same goes for the inside borders (the borders which would divide your cells instead of the outline).

5. On the left-hand side, you can click the type of border you would like (dashed, solid, etc) and then the thickness and color. Here's the annoying and confusing part: you HAVE to select all of these before you add borders around any of your cells. This can be confusing because sometimes it will look like it has selections you wanted but then doesn't give you what you expected. Eh, get used to playing with this screen :). Just click "None" for now to remove all borders and you can go back there later and click "OK"

6. Now, back to color schemes, if you use the toolpane and switch to the Color Schemes section, you can just click to change it. If you have used the colors given to you in the color scheme, then these colors will change when you switch the scheme; if you specifically set the colors, then they will stay that way no matter your scheme. You may not care about colors/scheme (I certainly didn't for the longest time) but you will probably find that colors and aesthetics go almost just as far for getting people to use your form (even though you will always think it's the greatest thing ever) as making it actually function well. Seriously, you'd be surprised to find how many bad forms out there are preferred because they're "prettier".

7. Last thing we talk about today and the beginning of getting your form to actually do something: sections. Swap your toolpane to the "Controls" section and then look at the bottom of the "Default" controls for the "Section" control...not optional section, not repeating section, just a section. A section is an invisible container to organize your categories of information you are trying to gather (remember, you should have organized all the fields of information you want into big groups? well, we use sections to handle all of them).

To put a control on the page, you can either click it (and it will automatically place the control wherever your cursor is on the screen) or you can left-click and drag the section to wherever your mouse is when you release the mouse button. Either way, click and drag your sections onto the page into each of the cells where your groups of information will be. Also, drag a button into the bottom cell.

8. Remove any space inside these sections (there are usually 3 lines of space in there). Also, you will see the word "section" at the bottom left of it...double-click it and change the name of your section from "Field1" to something that lets you know what information is supposed to go in there like "ContactInfo" or "EventInfo" or something. Note that you can't use spaces and it's also useful to avoid special characters. I usually name them as if there are several words and capitalize each word so "Contact Info" becomes "ContactInfo"; I've also seen quite a few use underscores as well but there's actually a benefit to using it the way I do (I'll tell you later ^_^).
Well, that's the next step in setting up your form. These sections and borders are super important because, as long as you do it right, your information will be organized and easier to use and update.
Previous post in this series:  Simple InfoPath 2007 Tutorial - Part 1 - Layout Design

Next post in this series: Part 3 - Controls