Sunday, April 24, 2011

Simple InfoPath 2007 Tutorial - Creating Your First Form

Next post in this series:  Part 2 - Borders/Shading, Color Schemes, and Sections

To get started with creating an InfoPath template, you should have in mind a form you would want to design (maybe something you already fill out on paper). This tutorial will follow the example of a Professional Development form to ask for the company to send you to a conference/training:

1. Determine the process you currently use for this type of information. We currently don't even have paperwork that we fill out...we end up finding conferences and stuff and get department assistants to do legwork. Here's what we're envisioning for this form:
  1. A person sees a need for training/conference
  2. That person finds our form and fills out the following:
    1. Name and contact info
    2. Department and supervisor info
    3. Conference/Event info and costs
    4. Travel arrangement costs
    5. Per Diem costs
  3. The filled form is sent to the department admin assistant for her to correct and approve it
  4. The finalized request is sent to department approver (maybe a director)
  5. Optional:  the request goes another step higher for approval...this 5th piece may be "special" and may end up being a "few" layers of approval...good luck!
2. Determine if sensitive information is involved. For this form, there will be sensitive information for the supervisor/manager to approve or reject this proposal and give an explanation why. We will need to pay attention to that sensitive information and lock it down to the best of our ability. The fields that will need to be locked down:
  • Admin Assistant's Approval Decision
  • Admin Assistant Approval Decision DateTime (when did they make their decision)
  • Admin Assistant's Approval Comments
  • Department Head's Approval Decision
  • Department Head's Approval Decision DateTime (when did they make their decision)
  • Department Head's Approval Comments
3. Will there be anything in the form that will need to be pulled from somewhere else? In this form, I will pull some information from a SharePoint list to specify approvers, departments, and possibly per diem rates for the area involved.

Finally, with that information in mind, you can get started. The only other thing of which to be aware is color schemes, logos, etc that may be needed to make your form user-friendly or branding-compliant.

1.  DON'T OPEN INFOPATH YET...seriously, go close it; I know you have it open, go close it NOW!.......still waiting......k, maybe you have closed it, I'll trust you. As scary as this sounds, go get a piece of paper and a pencil. Again, I'll be waiting, GO GET THEM.....twiddles thumbs.....ok, here's what you do:
  1. Write down all the different things you want to ask for on the first page(e.g. first name, last name, department name, blah blah blah).
  2. Group or re-arrange the information you are asking for and give the groups names like "contact info" or "event info" - that kind of thing.
  3. Draw the way you want your form to work. You might be thinking "you're joking right?" HECK NO. Take the time, draw the form the way you want it to end up might even be helped if there is already a paper version of this form...just don't be married to the paper design if you don't want to ^_^.
2. Open InfoPath 2007. You will notice right from the get-go a couple of things: First, there is no ribbon yet. The menus look similar to Office 2003 and this is just like Outlook 2007. Both InfoPath and Outlook will be ribbonized in 2010. Second, this program is probably one of the least user-friendly interfaces you will come across. There is no "new" button or menu to create forms so click "Design a Form Template" on the left-hand side. The New Design window will look like the following picture. Be sure to choose "Form Template" at the top, "Blank" in the middle, and "Enable browser-compatible features only" at the bottom:

3. The screen that appears has a solid white background with no edges. This seems odd but remember: many of these forms will be placed online and there are no real edges to a website (just borders). The menu bars at the top of the screen are standard and include a formatting toolbar (for font, font size, font color, and font alignment) and a table toolbar to handle tables, cell alignment, cell borders, and shading. There is one other button of note and that is the "Preview" button at the top and toward the middle. This button will allow you to see what your form will look like in InfoPath once the form is ready to be filled out. Over on the right is the "Task Pane" which has a drop-down menu at the top and several links available to click. This menu will become your friend and ever-loving companion...learn it, know it.

4. The first thing you will want to explore will be the Layout Tables available in InfoPath. Layout tables allow you to use rows and columns to align your text, pictures, buttons, etc. This is extremely important when posting online because "how wide is a space?" is answered differently between different browsers or monitor resolutions (big or small monitors). Always put EVERYTHING inside a layout table.
Left-click the drop-down menu above the Task Pane and click "Layout". A couple of ready-made tables reside here that we can simply left-click and they will be placed in our form. Click the "Table with Title" option.
***Notice this uses the default blue color scheme; we'll get to that next time.***

Left-click inside the top rectangle (all these rectangles are referred to as 'cells') where the Title should be and type "Professional Development Application". In the Content cell, hit the tab key until you have the number of GROUPS of fields you wrote down in step 1 + an additional cell (we can always adjust this later). You now have a basic table to display your information.

This ends the first step in the tutorial, we'll go over changing colors of these tables next time including shading, borders, color schemes, and more. Hope this helps get you started, be sure to save your form template somewhere on your computer where we can pick up next time. It will save with the file extension ".xsn" thing to note: if you just double-click it, it will not open for you to will open for you to fill it out. To edit one, you have to RIGHT-CLICK the ".xsn" file and then left-click DESIGN.

Next post in this series:  Part 2 - Borders/Shading, Color Schemes, and Sections