Using the Design Tasks Pane

In InfoPath, the Design Tasks pane shown in Figure 10-10 contains the most common design activities and concepts related to customizing or developing a form template. By clicking any of these items, you expand the configuration options for that item in the pane. The items on the pane represent the process you follow when you create a form template. You start with a blank form template, and it launches with no data source. As you add controls to the form in Design mode, fields appear in the form’s data source to support the use of these controls. Next, you can create various views for the form, which are similar to those discussed in Chapter 4 related to lists and libraries, but in this case are specifically located in the form. You can basically create a set of criteria that displays your data in different ways, depending on what you want to collect or represent. You then check your design to make sure that it’s compatible in the browser where it will operate. Some field types are not suitable for use in a web browser, so when you create a form for the browser, it is important to include only elements that are supported. InfoPath has a Design Checker mode that helps support you with this. Finally, you publish your form template so that others can use it and so that you can begin collecting data.

Figure 10-10

The Task pane is generally opened by default when you first start the InfoPath application in Design mode. Otherwise, you can access it by selecting Design Tasks from the View menu. Because you will spend most of your time using this pane as you create a form template, this section is entirely devoted to the pane’s many items, which include Layout, Controls, Data Source, Views, Design Checker, and Publish Form Template.

Tip 

To learn how to create and publish a form template, see the next section, “Working with Form Templates.”

If you are not creating your form from an existing file, you should take time to plan it out. By considering your information requirements in advance and sketching a form out on paper, you can determine what your form and data source elements should be before you even start creating the form template.

Layout

The Layout task pane item allows you to create tabular layouts in your form to control how information is presented. Quite often, in order to create a form that contains multiple columns of information, you need a table to effectively organize everything. From the Layouts section of the task pane, you can:

• Insert predefined table rows and columns.

• Insert a custom table.

• Modify cells, rows, and columns within an existing table.

• Insert special layout controls such as horizontal or scrolling regions.

In Figure 10-11, you can see the contents of the Layouts section of the Design Tasks pane. Notice that in addition to using one of the table options listed in the pane, you can also create a custom table to suit your specific needs.

Figure 10-11

Controls

Once you lay out a form and define its overall structure, the next step is to add the fields that the form will contain. InfoPath offers a variety of controls that can be used to effectively collect and display information in a form including text boxes, rich-text boxes, selection list boxes, data pickers, check boxes, option buttons, buttons, and sections.

Adding controls is closely linked to creating a data source, which is covered in the next section. You can start with a blank form template and create the data source by adding controls to the form. As you add a control to the form, an item is created automatically in the data source to represent that control. You can add controls either by dragging them from the Design pane to the area you want them to appear on the form, or by selecting the area in the form and double-clicking the control in the Design pane. You should name your fields as you add the controls. You can rename a field by either double-clicking it or right-clicking the field and selecting Properties. The name cannot contain spaces and should be intuitive. When you open the Properties dialog box, you will see other aspects of the field that you can customize, such as default values, display options, or selection values. Each type of control has its own set of unique attributes and properties.

Text Box

A text box can hold all sorts of information types such as Name, Phone Number, or Currency. When you edit the properties of a text box, you can determine what format the information should be stored as by selecting the Data Type. When designing a form using this field type, you can have default values populated based on a user’s selection for other fields. InfoPath also supports the use of customizable rules that allow you to perform actions such as show a dialog box message or set a field’s value based on the user’s selection of an item or activity within the form. You may also include placeholder text that demonstrates to a user the type of information that the field should contain or how they can complete the item. Some of the options related to the text box control are listed in Figure 10-12, including some of the formatting and display alternatives:

Figure 10-12

• Auto complete:   This option suggests words or phrases to a user as she is completing a form based on previously entered options. Sometimes Auto Complete can make the process for filling out a form easier for the users. However, it is not typically appropriate for forms where information entered may be of a sensitive or confidential nature.

• Spell check:   This enables spell checking on content stored in the field.

• Multi line:   This option allows you to specify whether a text box can include paragraph breaks or if text can wrap. This is helpful for situations where the text may exceed a single line. If you do select multi line, you can determine whether the control should allow scrolling or expand to display the text when it exceeds a single line.

• Text box limit:   This option allows you to specify the number of characters a field can contain. You may use this option when accepting information, such as a phone number or social security number, whereby the number of characters is limited to a fixed number.

• Conditional formatting:   In some cases, based on the value that is entered in text box or in another field, you can choose how to display a field. For example, if the number of items ordered in a form exceeds the value in another field for the number of items available, you may select to have the order field highlighted in red. Also, you can use conditional formatting to hide certain fields based on the selection of another field.

• Placeholder text:   You can use placeholder text to include suggestions in a text box or field to represent the text a user might enter or provide instruction on how he or she should complete a field. For example, for a name field, you might have placeholder text that states “Enter Name Here.” As soon as a user clicks the field, the text is erased. You cannot use placeholder text for forms that you intend to publish to Forms Server for access via the browser. Only use the Placeholder Text feature for forms users will complete. Users must have the InfoPath application installed on their computers.

Rich-Text Box

You use the rich-text box to collect more detailed information from a user, such as a description or background information. This field type or control has many of the same customization features as the text box including spell check, placeholder, conditional formatting, and wrapped text. When customizing this field type, your user can apply certain levels of formatting directly in the field, such as including images, rich text, or tables. Note that if you intend to publish your form to a Forms Server or SharePoint environment so that users can access it on a browser, your form may only support certain levels of formatting. Therefore, to make your form accessible via the browser, you should select Enable Browser-Compatible Settings Only, as shown in Figure 10-13.

Figure 10-13

Selection List Boxes

Selection list box field controls include drop-down list box, combo box, list boxes, and multiple selection list boxes. Depending on the type of information you are collecting from your users and whether you intend to make the form available in the browser, your implementation choices may vary:

• Drop-down list box:   This type of box allows users to select from fixed sets of values. If there are many items, you may select a drop-down list box to save room because it only shows one item until the user clicks a down arrow. Too many items can negatively impact a user experience, so consider applying a filter so that only a relevant set of items display based on a user’s selection in another field - for example, if the user enters the United States as his country, a field for State or Province selection could be filtered to only display states because there is no requirement to display provinces. The drop-down list box can be used in browser-enabled forms.

• Standard list box:   This option allows users to select from a fixed set of values. The items display in a listing box and are viewable all at once. This is different from the drop-down box for that reason and is typically only suitable when you have less than ten or so values. Otherwise, the control will take up a large amount of space, and selecting from too large a set of values may be difficult for some readers. The standard list box can be used in browser-enabled forms.

• Combo box:   The combo box is very similar in presentation to the drop-down list box; however, it also allows users to enter their own values in a list. Therefore, if the item they want to select is not listed in the drop-down list, they can type in their own value. This field cannot be used in a browser-enabled form.

• Multiple selection list box:   The multiple selection list box is similar to the standard list box, but contains check boxes for each item and can also optionally allow users to enter their own values into the list. This field cannot be used in a browser-enabled form.

Date Picker

This feature helps a user select a date, which is especially helpful when you have regional variations in date formats. For example, 05/06/07 can represent a completely different day in Canada than it would in the United States. It’s also helpful to select the correct dates when they are critical to travel plans, or when the user may not know the exact date of something - for example, when they are planning meetings that occur the third Monday of every month. An example of the Date Picker control as seen by an end user on the completed form is shown in Figure 10-14.

Figure 10-14

You can configure the Date Picker to contain certain default values including special functions, such as today (), which sets the default date to the current date of when the user is completing the form.

Check Box

In many of the exercises in this book, you selected a check box to enable an option for an application. The same logic applies in a form template. You can have a single check box to provide a Yes or No type answer to a question. For example, if a check box were associated with a to-do list, a blank box would indicate that the task has not been completed, whereas a selected check box would indicate that the task was completed. Alternatively, you have check boxes that allow a user to select one or more items from a group of choices, as shown in Figure 10-15. While each choice is an individual field, you can group the check boxes together in a section or table for data organization purposes.

Figure 10-15

Option Button

The option button gives users a choice between items. Instead of allowing users to select more than one item, you give them a list of choices and allow them to select only one of them. In Figure 10-16, a user can select only a single size when ordering their pizza.

Figure 10-16

You select how many choices you want to give the user, and you assign each option button a unique ID that makes it easy for you to identify the user’s selection.

Button

You can add a button to launch a new activity or series of rules on a form. When the user clicks the button, the activity or rule triggers. You can use buttons to launch several actions including:

• Change views in a form.

• Submit to a data connection.

• Retrieve information from a data connection.

• Launch a new form template.

• Launch a message window or display box.

• Set the value for a field in the form.

• Close a form.

By implementing rules in combination with special conditions, a simple form template can become a dynamic application and drive specific business processes in a way that is very intuitive and easy to use.

Sections

Sections give elements structure, and are therefore important when you design a form’s data source and display needs. You can add, remove, or hide sections within a form template. As shown in Figure 10-17, you can select to have a section initially excluded from the form or added by a user. You may choose to hide a section if you want to have portions of your form only appear based on a user’s response to a question. For example, if you have a set of questions in your form related to what pizza toppings a user wants on their pizza, you might choose to hide those questions, if in a previous answer the user selected that he wanted to order hamburgers.

Figure 10-17

It is generally a good idea to add sections to your form templates to group information that is similar or related. You should name sections appropriately so that you can better identify a set of related fields within the form’s data source.

Other Controls

The previously listed field types are just a few of the standard controls available for use in an InfoPath form. Additional control types include:

• Tables:   You can include tables in your form for users to complete. Each table can contain a number of fields and may include repeating rows so that users can add more information or items to the table as required.

• Master/Detail:   In some cases, you may have two controls or sections whereby the selection in one will dictate the detail displayed in another. An example of this might be a product category list and a product details listing. If a user selects a category, the details listing should be reformatted to display only the items related to the selected category.

• Lists:   A list can be a more informal control that allows a user to add a bulleted or numbered list in his response. You may include a list in a form that asks a user to submit ideas for a new product or accomplishments for a particular time period.

• File Attachment:   It may be appropriate or beneficial to have a user attach a file to his form instance. This file becomes embedded in the form document and others can access it later when reviewing the form.

• Picture:   This control allows you to create a field that will either upload and embed a picture in the form, or link to a picture stored elsewhere.

• Ink Picture:   For users with a drawing tablet or Tablet PC, InfoPath has built-in support of Ink, which allows a user to write directly into a form with a digital pen. This field supports the drawing of an image directly within the form.

• Hyperlink:   This control allows you to insert a hyperlink into the form whereby you can specify the link to a location and display text.

• Expression Box:   For more advanced users, this control can be used to enter an XPath expression that can perform advanced calculations on data stored in the form. The results of the calculation are displayed in the form.

• Vertical Label:   For design purposes, you may want to have a vertical label added to your form. This control presents the form designer with a text box within which text can be added. This text displays vertically on the form.

• Regions or Groups:   Similar to sections, regions and groups are organizational elements that can be added to pages to support fields or text.

Data Source

The primary data source of your InfoPath form is basically the skeletal information structure of your form. In order to have a field in the form, it must be tied to an element in the data source. When you create your form by adding controls, data source elements are automatically added in the primary data source for you. You can also have secondary data sources, such as external data connections that you can use to display information in the form. For example, you may have a secondary data source that is a database. You can drag information from your database onto the form and select which fields or controls should be used to display the information.

As previously described in the last section, the data source is very closely tied to the controls. You should name your fields as you add the controls. This will automatically update the data source. The name cannot contain spaces and should be intuitive. You can also add groups, tables, or sections in your form’s data source so that you can easily track elements or items that are related to one another.

The primary data source of a form can be imported based on an XML file or data connection. This approach is more advanced whereby a formalized data structure is imported into the form and then controls are added to the form to represent the data. If you are not creating your data source from a data connection or XML schema file, you should take time to plan it out. Consider your information requirements, and sketch a form out on paper. By considering what some of the information requirements are in advance, you can generate a good idea on what your data elements should be before you even start creating the form template.

Tip 

When you remove a control from a form’s view, you do not remove the field from your data source. Views are discussed in the next section.

In addition to the primary data source of a form template, additional data sources become available as new data connections are added to the form. An example of this is shown in Figure 10-18.

Figure 10-18

Similar to the behavior of the primary data source, you can drag elements within a secondary data source onto the page. This can help provide some data reporting from external data sources within the form itself. You can add items either as sections or tables and then format them as required. For example, in a form template that tracks information about a customer, the primary data source of the form may contain items such as the customer’s phone number, company name, and email address. And you might create a secondary data source that connects to the orders database. You can drag information from this secondary data source onto the form to show a salesperson all the products the customer has purchased.

Views

In Chapter 4, you saw how to create custom views for lists and libraries to display different records and columns from a single data source. With InfoPath, you can also create multiple views from a single form. The views can act either as reports or pages in a form where they can represent completely unique steps related to the completion of a process. For example, you can have a form template with four different views: one for customer requests, a second that logs troubleshooting issues that an employee must resolve, a third that tracks correspondence with customer, and the final that tracks customer’s comments on the level of service they’ve received.

Views can be created from the Design pane by selecting Add a New View from the Actions list. When a view is created, it is blank. The Form Designer must drag layout elements such as tables onto the form and add controls as needed. A single field can be added to multiple views. For example, you may have a field for customer name. You can add this field to every view in your form. You can also change unique characteristics related to the presentation of the field on each view. While the data remains the same, the presentation of a field on each view can be slightly different. For example, on one page the customer’s name may appear in large bold letters, and on another it may appear in a drop-down box. However, the data of the field remains the same. Therefore, if “Graphical Wonder” is listed as the customer in one view, it will also be listed on all other views in that field.

You can use buttons on views to toggle between each of the available views. In some cases, multiple views and buttons can be implemented on a form to collect information from a user in steps. You essentially add a button to a view that, when selected, will launch another view using the Rules capabilities of buttons. This replicates the experience of a wizard and can help simplify the experience of the user as she completes the operation. If you don’t use custom buttons, you can have users switch between various form views within the InfoPath application using the View menu, as shown in Figure 10-19.

Figure 10-19

Design Checker

As previously stated, not all form controls are supported for use within browser-based forms. Therefore, you need to consider who the audience for your form will be and how they will access the form. If the form has to be available for use on the browser, careful consideration is required to ensure that the experience is positive. This may seem like a lot to understand if you are just getting used to creating these forms. Therefore, a Design Checker exists with the InfoPath application to guide you by highlighting anything you may have in your form that would not be compatible with the browser or previous versions of InfoPath.

If you decide that a form should be browser compatible after you have already begun the form design process, you can change the setting by selecting the Compatibility item under Form Options, as shown in Figure 10-20.

Figure 10-20

Another option in this same interface is a URL to test whether the form will be compatible with the destination SharePoint Server. By specifying a URL, the Design Checker displays alerts and messages indicating items in your form that may affect compatibility with either the browser or older versions of the application.

Publishing a Form Template

You can always save a template in a location for your personal use and to edit further, but to make your form available to others you need to publish the template to a central location. You can publish an InfoPath form template to any of the following locations:

• A SharePoint Server with InfoPath Forms Services (supports use of browser-based forms)

• A SharePoint Server without InfoPath Forms Services (does not support browser-based forms)

• A shared network location such as a file share

• A list of email recipients (requires Outlook 2007)

• An installable form template

Depending on the environment in which you are working and what tools you have available, you may select either one of these options when completing the Publishing Wizard.

Tip 

In the next section, “Working with Form Templates,” you walk through examples of publishing an InfoPath form to a SharePoint Server, including directly publishing to a document library, creating an InfoPath Form content type, and uploading an administrator approved form template.

If you publish your form template to any of these locations, you must save a local copy of the template on your computer. If later you want to make updates to the form template, you can make them to your local copy and complete the Publishing Wizard to update your form template in its shared location. However, you should be confident that no edits were performed directly on the template in its shared location. If there are, then you may overwrite them by publishing an older version of the form. It is a good idea to identify and define development policies and procedures related to your organization’s custom InfoPath forms to ensure that such situations do not occur.