2. BASIC OF INFOPATH FORM DESIGN
InfoPath is separated into
- InfoPath Filler: The Filler client is the one that runs in when users fill out a form, and
- InfoPath Designer: The Designer is that which you use to design form templates and is the client we will work in for most of this book.
A form template in InfoPath (in a .xsn cab file) is a collection of:
Data
The data resides in the underlying data source, which, as its name implies, is the source of the data.
This data source could be a SharePoint list, an XML file, a Web service, or a database, for example, where the data entered into the form is stored. In this case, this data source is referred to as the main data source since it is the main source of the data for the form. In a form template, there is always a main data source where the user-entered data is stored.
The form can contain one or more secondary data sources.
These secondary data sources can be used to populate different parts of the form, such as a drop-down list of cities and states. (The main data source can also be used to populate different parts of the form.)
View
The form template also contains at least one view, which provides a way to visualize the data.
This part of the form template contains the layout for the form and any controls into which users enter data.
The form template may actually contain multiple views based on the data source so you can present the underlying data in many ways. For example, you may want to create different views of the data for different languages or to present part of the data in one view and the rest in other views.
Resources.
The form template can also contain various resources.
These could be pictures you add to your form or any other type of file you want to storewith the form template.
Static pictures added to the form are automaticallyadded to the form template as resources.
Other resources can be added tothe form using the Resource Manager, which is available by selecting theResource Files menu item on the Form Data section of the Data tab.
Manifest.
Finally, the form template contains a form definition file, sometimesreferred to as a manifest.
This manifest contains all the information aboutthe form template, such as which files and resources, special editing behaviors(e.g., spell checking, auto-complete), and other data-centric features(e.g., rules and calculations) are included in the template.
Starting InfoPath Designer
When you start InfoPath Designer, the first thing you see is the New section of the backstage view.
On the top left-hand side are some traditional file menu commandsincluding Open.
Selecting Open allows you to open existing form templatesfrom your computer, a network share, Web Server, or SharePoint site.
If you are designing a new form, you can choosefrom the list of available form templates provided in this screen.
One of the form template design options offered from the starting screenis to Convert Existing Form.
If you have an existing form you’ve created inanother application such as Word or Excel that you would like to migrateto InfoPath, you can select this item and then click on the Design Form button.
Creating a New Blank Form Template
Let’s create an employment application form that prospective employees can use to apply for a position at the fictional MOI Consulting Corporation, a company that offers software consulting services. Creating this form template from scratch is very easy. The first thing you should always do before creating a form is to define your requirements.
The MOI Consulting employment application enables prospective employees to apply for open positions throughout the company. The user of the form will be able to search and apply for one or more jobs across the company.
When applying for a position, the prospective employee will enter pertinent information, such as name, address, and phone number.
The form will require that the user attach a résumé when applying for a job.
As you can see, the high-level summary broadly defines what the form will do and which controls should be included in the form template and, ultimately, what type of data will be stored in the underlying data source.
Typically, when you define your data requirements, you will also define the type of data (e.g., string, decimal, currency, date, and so on). The data requirements for the MOI Consulting employment application are defined in the Table below, which also indicates whether the data is displayed by the form or input by the user.
Click the Blank Form icon in the Available Form Templates section and then click the Design Form button.
InfoPath then presents you with a new blank form.
Most of the area displayed is an empty area called the design surface.
This design surface is where you set up the form’s layout and place the controls into which the userswill enter data when filling out the form. By default, when creating a blanktemplate, the form is created as a table with a section for a title and then aspace below for the form’s content.
To the right of the design surface is the Fields task pane. This task panelists all the fields in the form, whether or not they are displayed to the user.
This is where you organize the data structure behind the form.
On creatingthe blank template, this list is empty, but fields will be created here automaticallyas you start adding controls to the form.
Designing the Layout of Your Form
The first thing you normally will do when designing an InfoPath form is design its layout.
Clicking into the design surface causes the Table Tools Layout tab to appear in the ribbon UI.
Tables are the main design construct used in InfoPath to lay out text and controls in your form templates.
You can use familiar table controls to design the layout of your form by inserting rows and columns, splitting and merging cells, and altering the height and width of sections of the table.
You can also use the Draw Table option to very quickly draw flexible table structures.
It is also possible to create a form based on pre-existing page layout templates.
To do this, select the Page Design tab.
One of the icons is Page Layout Templates.
Clicking this opens a menu showing five pre-built table structures—Title Only, Title and Heading, Title and Body, Color Bar, and Offset Body.
By default, the blank form template is created using the Title Only layout template.
The first row of this table is where you insert the title for your form.
The second row is where you insert the rest of your form content.
We gave our sample form the title “MOI Consulting Employment Application,” .
Use the table layout commands to customize the form’s layout.
You can place the cursor inside the second row of the layout table by clicking anywhere inside the row.
We want to give the user a place to enter his or her name.
Since we are storing the name in two parts—last name and first name—we will need to have two places in the form for the user to enter this information.
To split the row into two cells, click on Split Table in the Layout tab.
A dialog opensasking how many rows and columns you want to split the cell into.
Thedefault option is to split the cell vertically into two columns, so click OK.
Finally, so that the user knows what data to enter, let’s add instructive textto each cell.
Next, let’s add a new row so that we can insert controls to allow the user to enter address information.
To add a new row, place the insertion point in the last row of the table and then
click on the Insert Below button in the Layout tab.
When you add the new row, you’ll notice that it looks exactly like the row above it— click Merge Cells in the Layout tab.
Themes
Certain types of form content, such as layout tables and Repeating Table controls (which we’ll talk about later in this chapter), use themes to help you design better-looking forms by applying colors and formatting to your form.
Themes help you make your forms a bit more exciting by adding color.
If you choose colors that are in the active color scheme, you can be sure that the colors will match.
The color themes available in InfoPath 2010 match those available in SharePoint Server 2010, so it’s easy to ensure that your colors are consistent when you put an InfoPath form into SharePoint.
In InfoPath 2010, the default theme is Professional - Summer, to change it just click on the Page Design tab.
In the Themes section click on one that matches your tastes. It’s as easy as that.
The layout tables and Repeating Table controls change to use the colors in the new scheme.
Using Controls
The next step is to add controls to give your uses a way to enter data.
Info-Path includes many controls you can use for various purposes, such asallowing users to type in formatted or unformatted text, retrieving datafrom a database, or grouping multiple controls.
There are many ways toinsert controls into your form; by far, the easiest is to use the Controls taskpane.
If you go to the Home tab in the ribbon UI, there isa section for controls.
If you want to have quick access to all availablecontrols at all times when designing your form, you can click in thebottom right-hand corner of this Controls section to open up the Controlstask pane.
When you insert a control, no matter how you’ve done it, InfoPath doesa few things behind the scenes.
- First, a view representation of the control iscreated.
This view representation is the visual aspect of the control. In otherwords, it’s what the user sees. - Next, for most controls, if the Automatically create data source checkbox is checked in the Controls task pane(which it isby default when designing a blank form), InfoPath creates fields or groupelements in the data source.
These fields or groups result in XML Schemaconstructs when the form template is saved.
The exact schema constructscreated are determined by the type of control inserted. - Finally,InfoPath may or may not add information about the control to the formdefinition file (manifest).
As we mentioned earlier, this manifest informationtells InfoPath various things about the control, such as whether or notthe control supports spell checking or auto-complete and what to do wheninserting a new instance of the control.
We can tell which controls we want to use in our form simply by lookingat the data we want to collect and the data type of each item. Of course, we may want to use other controls as well in orderto group controls or to present additional data to the user, such as a list ofopen positions to choose from.
Each control in the Controls task pane has adefault data type associated with it, therefore we canuse our data requirements to help us decide which controls to use.
Input
The controls in the Input category are the ones used for gathering datafrom the user.
All of these controls are prettystraightforward, so we won’t talk about each one in detail.
Each control in the Controls task pane has aspecific purpose and behavior.
Some controls have the same purpose butdiffer only in the way they appear in the view (e.g., the Drop-Down ListBox displays only one item, while the List Box displays multiple items.
First, let’s add the controls to our form templatethat correspond to the name of the potential employee.
Since the data forthe first and last names is simple text, we will insert Text Box controls intothe form template for each of them.
We are using the Text Box control in this example for FirstName and LastName.
But one of the new controlsin InfoPath 2010 is the Person/Group Picker, which connects to Share-Point. Instead of the name being a simple text string, this control maps toa group of data connected to a person, such as his or her account ID anddisplayed name.
Next, let’s add controls to allow the user to enter a phone number and e-mail address.
We will add these controls in a new row right below thefirst and last name controls.
As mentioned earlier, we can use the Table Layouttab to insert a new row into the layout table.
Containers
Finally, we want to add controls to allow the user to add address information.
Since a person’s address has multiple components—street address, city, state (or province), postal code, and country—we need to use multiple controls to allow the user to enter this data.
However, since all of this data logically belongs together, we also want to group the controls in the form.
To do so, we’ll use a Section control.
Also, we’ll add another layout table with a title inside the Section control in order to lay out the controls neatly.
For most of the address data, we’ll use mainly Text Box controls.
However, we will use a Combo Box control for the country.
MOI Consulting usually receives applications from people in only a few countries but will accept them from any country. A Combo Box control allows the potential employee to choose his or her country from a list or to enter it manually if it doesn’t exist in the list.
Notice the tab at the bottom that contains the word Section and the border surrounding it.
This is called a design-time visual which is useful for designing your form, it’s also functional. When you click on the tab at the bottom of the control, the Section control becomes selected.
TEST FORM
Generally, it’s a good idea to test your form template at various points duringthe design in order to address any issues with the layout or behavior ofthe form.
When testing your form, you obviously want to use the form inthe same way your users will.
You may be thinking that the most obviousway to do this is by saving the form template and then filling it out.
While that is true, there is an easier way.
InfoPath Designer allows you to preview your form by clicking the Preview button on the Home tab.
Previewing your form runs your form in almost exactly the same way as if you had saved the form template and then filled it out normally. When previewing, you can quickly test your form template at any point during its design.
Let’s return to designing our employment application form. There are still more data items we want to collect.
For example, we want to allow the user to enter the minimum salary he or she would like and any additional comments. Let’s say that we won’t require users to indicate the minimum salary desired or to add comments.
Since this is the case, we want to use optional controls for this data.
Also, we want to allow users to apply for multiple jobs at the same time.
Therefore, data that relates to different positions could be entered multiple times.
In order for the user to enter these data items, we have to add repeating controls to our form.
Let’s look at the repeating and optional controls available to you when designing a form template.
Optional Section Control
The Optional Section control is like a Section control in that it is a container for other controls and text.
You can put as much text and as many other controls in it as you like.
The advantage that the Optional Section has over the normal Section is that you can use it for data that users of your form are not required to enter.
The Optional Section and its associated data are not inserted into the form until the user chooses to do so.
For example, in our employment application form, we want to give the user the option of entering additional comments. For this data, we will use a Rich Text Box control so the user can enter formatted data.
However, to make the comments optional, we will put the Rich Text Box inside an Optional Section.
Since the minimum salary desired is also optional, we will place a Text Box for the salary in a separate Optional Section. We are using two Optional Section controls instead of one because the user may wish to add comments but no salary information or vice versa. The result of adding these controls is shown in Figure 2.12.
Let’s preview our form again to see how the Optional Section controls behave.
Figure 2.13 shows the part of the form that contains these controls when users fill out a form. Each of the Optional Section controls simply shows a link that says Click here to insert. (Obviously, that text isn’t very descriptive. In Chapter 4, we’ll show you how to customize it.)