Customizing SharePoint 2010 List Forms with InfoPath 2010
Customizing SharePoint 2010 List Forms with InfoPath 2010
In Windows SharePoint Services 3.0, list forms were regular ASP.NET pages serving as the visual interfaces to add an item to, or edit or display an item in, that list. Typically, list forms were defined in the list template and instantiated upon the creation of a new list instance. Although there are several ways to replace the out-of-the-box list forms (DispForm.aspx, EditForm.aspx, and NewForm.aspx) with custom ASPX pages each approach introduces its own challenges.
One of the exciting features in InfoPath 2010 is the ability to extend or enhance the forms used by SharePoint lists for creating, editing, or showing list items. Today, you can modify list forms layouts, set validation rules, or create additional views using little or no code. When you are finished modifying the list forms, reflecting your changes back to SharePoint is just a matter of using the one-click publishing capability that comes out of the box with the list form.
In this section, you will explore some of the new functionalities of InfoPath 2010 used to customize SharePoint list forms in the context of a Training Management application, which you will build throughout the chapter.
Creating the Trainings List
Before diving into customizing the Trainings list forms using InfoPath, you need to create the SharePoint list and add the required fields to it. Business requirements of the Training Management application dictate that the training coordinator be able to create new training opportunities by selecting Add New Item in the Trainings list. This list resides on the Human Resources website and requires the following information:
Title: A title for the training opportunity
Code: A code that uniquely identifies the training (unique eight-character fixed)
Description: The description of the training
Start Date: The training’s start date
End Date: The training’s end date
Cost: The cost of the training (American dollars)
Level: The difficulty level associated with the training (a number from one to five)
Enrollment Deadline: The date that enrollment ends
Address: The address of the training facility (multiple lines of text)
Additional Information: Optional information about the training itself (enhanced rich text with pictures, tables, and hyperlinks)
Figure 9-2 illustrates all the fields of the new Trainings list, their types, and whether they are required when submitting to the list.
Customizing SharePoint List Forms
To customize the list forms in the Trainings list, navigate to the list and click Customize Form on the List tab that appears on the Ribbon, as shown in Figure 9-3.
This will launch InfoPath Designer in SharePoint list mode, and a basic form will be autocreated from the fields specified in the list’s schema. You can see the fields in the Fields task pane on the right side of the design canvas in which mandatory fields are designated with a red asterisk.
Before going further, look at the controls that have been placed on the form (See Figure 9-4). For each Date and Time column in the Trainings list, a Date and Time Picker control has been generated by InfoPath. The Date and Time Picker is a new control in InfoPath 2010 that allows you to type a date and time or select a date from a calendar display.
Also notice that, when you click on one of the existing form fields (for example, Level), the control tools’ contextual Ribbon appears on the top and gives you the ability to interact with the list columns inside the InfoPath Designer. Any changes at this point will be persisted later to the SharePoint list when the form is published. For example, if you change a control’s binding to a new field, that field will be automatically added to the list’s schema when the form template is published to SharePoint.
In addition to autogenerating the form through the Fluent UI interface, you can launch InfoPath Designer by going to the New tab in the Backstage and choosing SharePoint List as the template. You then enter the URL of the Trainings list, and the same InfoPath form will be autogenerated for you.
To save some real estate on the form, let’s create an optional section that the training coordinator can use to insert or remove additional information about the training if necessary. Right-click on the autogenerated Additional Information rich textbox on the form and delete it. In the Fields task pane, switch to Show advanced view, then click on the drop-down menu next to the Additional Information field and choose Optional Section with Controls. This adds an optional section, and the same rich textbox bound to the Additional Information field is inserted into the form, as shown in Figure 9-5.
Adding Intelligence Using Rules and Views
Rules in InfoPath are a set of one or more event-centric actions used to create a dynamic experience for the users of the form when they fill it out. There is always an event that triggers a rule, and in response, the rule performs some action, such as a format change or a validation check.
The training form sample provided in this chapter contains two validation rules and one business logic rule, which must be satisfied as follows:
1. If End Date < Start Date, then show a validation error message.
2. If Enrollment Deadline > Start Date, then show a validation error message.
3. Only the Address and Additional Information fields can be edited after the training is created.
To implement these requirements, click on the End date control (date picker) to select it. Next, on the Home tab, click Add Rule, then Manage Rules. This will open the Rules task pane. Click New button, then Validation. Give the rule a name (e.g., RuleEndDate). Click the None hyperlink in the Condition section, and define the rule to run when the condition shown in Figure 9-6 is true. Click OK to save the rule.
Repeat the same steps for Enrollment Deadline.
Best Practice #1
InfoPath rules and formulas (collectively referred to as declarative logic) are powerful ways of adding intelligence to your electronic forms. It’s not a best practice to write custom code where declarative logic can do the job!
As stated in Rule 3, you need to make sure that, when the training is created, there is no way someone can make changes in any fields except the address and additional information fields. To implement Rule 3, you need to leverage another powerful feature of InfoPath, called views. Views are a great way to present your form differently to the users based on different states that the form is in. In the case of the training creation form, you need to set a different view when a training is being edited than what it is when the training coordinator creates a new training. (This view is referred to as insert mode.)
To add the Edit View to your form, go to the Page Design tab and in the Views group, click New. Call the new view Edit Training, and click OK. One special attribute of views is that you can display the same fields on multiple views using separate controls — just copy (Ctrl+C) the layout and controls from the default view and paste them (Ctrl+V) onto the second view. Next, add a meaningful title to the top of the form for both the default and Edit Training Views — say, New Training and Edit Training. In Edit Training View, remove the attachment row and make Title, Code, Description, Cost, and Level controls read-only (Right-click Ø Text box properties Ø Display tab Ø Read-only).
Because you can’t make the Start Date, End Date, and Enrollment Deadline controls read-only (they’re Date Picker controls), let’s just delete them all and replace them with three textbox controls instead (Home Tab Ø Control section Ø Text box). At this point, right-click on each textbox control and choose Change Binding to bind it to the appropriate date field, as shown in Figure 9-7.
It’s very important that you delete the field1, field2, and field3 fields that InfoPath automatically added to the Fields pane as a result of adding the new textboxes. Otherwise, the new fields will be promoted as list columns when you publish your form to SharePoint.
At this point, your Edit Training View should look like Figure 9-8.
To glue everything back together, you need to set something up that flips the view between the new and edit modes based on a condition. Navigate to the Data tab and go to the section called Form Load. Click on the New button, select Action, and then type an appropriate name for the rule, such as RuleSwitchToEditView. Essentially this sets up a rule and runs when the form loads. Now, you need to specify under which condition this rule runs.
The condition is clear: you want to switch the view when users edit an existing training. Because Code is a mandatory field, it cannot be blank when training is created. Therefore, you can use this field to handle this particular situation, as shown in Figure 9-9.
After the condition is set, it’s time to define the action that needs to kick in. Click on the Add button just below where you defined condition and select Switch Views. In the View drop-down box specify Edit Training View, if it’s not already selected (see Figure 9-10). That’s it!
NOTE: Because external lists are just like lists with some extra hooks added to the backend Business Connectivity Services data source, they can be treated like typical lists in InfoPath. However, the steps you need to take to customize external list forms are different from those for typical list forms. External list form customization is mostly done in SharePoint Designer 2010.
Publishing List Forms
At this point, you are done with designing your form and empowering it with rules and views. Now, go ahead and publish the form to the SharePoint list from which it came. In the Backstage, go to the Info tab.
In Figure 9-11, a nice screenshot of the current state of the form is shown on the right side. Also, InfoPath already knows which list this form belongs to, meaning that there is no additional configuration required on your side to publish the form to SharePoint. Just click on the button that says Quick Publish, and you are done.
After the form is published to the Trainings list, do not close the form. Instead, click on Save As and save the template somewhere on your local drive. The important point to remember here is that saving a form template locally or on a network share is a totally different process from publishing it. Publishing versus saving a form template will be covered in greater detail later in this chapter, but for now just accept these as two different terms in the InfoPath lexicon.
Once the form has been successfully published and its template is locally saved, return to the Trainings list in the HR site and create a new training item. Sure enough, the default ASPX page is replaced with the default view of the form template you just customized and published. After filling out the form (see Figure 9-12), you can submit it by clicking Save on the top Ribbon. At this point, the form applies the appropriate rules to validate your input and adds a new list item to the Trainings list.
While you are still on the form, notice that the Additional Information field is partially invisible on the form because it is hosted in an optional section.
If you click anywhere on the rendered form and get a property of the page, you will see that the form, unlike uncustomized list forms, is not loaded by the NewForm.aspx page. Instead, it is loaded by another out-of-the-box web part page called newifs.aspx.
The newifs.aspx, displayinf.aspx, and editifs.aspx pages are new additions to the list’s infrastructure in SharePoint 2010. They are all web part pages that can be customized via browser. All three pages are accessible from the List Ribbon Ø Form Web Part drop-down, as shown in Figure 9-13. Each page hosts an instance of the InfoPath Form web part that knows how to locate and load the form template associated with the Trainings list.
When editing an existing training, you will see that the rule you placed in Load event of the form kicks in and switches the view from New Training to Edit Training, where you can edit the last two fields of the form only, as illustrated in Figure 9-14.
If, at some point during the customization process, you decide to undo everything and revert to the out-of-the-box ASPX forms, it’s easy. Browse to the list’s List Settings page, click Form Settings, select Use the default SharePoint form, and click OK. Optionally, if you leave the Delete the InfoPath Form from the server unchecked, the InfoPath form you customized will remain on the server. Thus, the next time you click Customize Form, the saved InfoPath form will be used in InfoPath Designer, instead of a new one being autogenerated from scratch.
There are two things about SharePoint list forms to consider. First, custom code is not supported in customized list forms using InfoPath 2010. Right-click on the form template you just saved in your local drive, and select Design to launch InfoPath Designer 2010. There is no Developer tab on the Ribbon to launch Visual Studio Tools for Applications (VSTA) for writing custom code (see Label 1 in Figure 9-15). Second, you can only publish a list form to the list it belongs to (see Label 2 in Figure 9-15). This also means that converting your list form to a form library is not possible.
Distributing the Trainings List
To distribute the InfoPath forms attached to the Trainings list, you need to export the Trainings list as a template and make the template available for use in other sites by uploading it to their List Template gallery, as shown in Figure 9-16.
NOTE: For creating custom list definitions that use InfoPath Forms, see my blog post at http://www.devhorizon.com/go/13.
This article is excerpted from chapter 9 "Electronic Forms" of the book Professional SharePoint 2010 Development by Tom Rizzo, Reza Alirezaei, Jeff Fried, Paul Swider, Scot Hillier, Kenneth Schaefer (ISBN: 978-0-470-52942-3, Wrox, 2010, Copyright Wiley Publishing Inc.)
About the Author