Customizing SharePoint 2010 List Forms with InfoPath 2010

Customizing SharePoint 2010 List Forms with InfoPath 2010

Professional SharePoint 2010 Development bookIn 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.

SharePoint List fiels

Figure 9-2

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.

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.

 

Figure 9-4

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.

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.

define a rule in InfoPath to run when the condition shown

Figure 9-6

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.

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.

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.

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!

Figure 9-10

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.

Publishing SharePoint List Forms from InfoPath

Figure 9-11

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.

Figure 9-12

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.

Figure 9-13

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.

Figure 9-14

This form template (Trainings.xsn) can be found in the code download for this book.

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.

Figure 9-15

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.

Figure 9-16

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.)

Tags:

Comments

11 responses to “Customizing SharePoint 2010 List Forms with InfoPath 2010”

  1. Anonymous says:

    Great job!! Helped me gain a better understanding of infopath!

  2. Anonymous says:

    Thanks for the Information. Excited about SharePoint 2010

  3. Anonymous says:

    Is it a good choice to use this tool?: Kaldeera Advanced Forms
    thanx in advance.

  4. Anonymous says:

    Will this work with SharePoint 2010 Foundation?

  5. Anonymous says:

    Hi ,
    I am using infopath form for external list. I want to search the external list item. So I configured search. I need to edit the search item. So, I added new action in central admin-> Business Data connectivity service. I need to give edit page URL to redirect my edit button. Could you please tell me what is the URL of edit page.
    Thanks.

  6. Anonymous says:

    I keep getting the error: "Customizing the form for this content type is not supported." any help would be great!

  7. Anonymous says:

    Awesome guide really helped me out!  I was wondering thought, how did you get that "Give Feedback" quick survey’s section to appear on the form?  Is that custom code or something that is easily done?
    Thanks again!

  8. Anonymous says:

    do I need an Enterprise License to customize list form with infopath?

  9. Anonymous says:

    "you can only publish a list form to the list it belongs to"
    This right here makes InfoPath List deployment a completely useless tool for any sort of Enterprise implementations.  Development and Quality Assurance environments thrown right out the window.
    Sure, initial development would work as you can export the list from DEV to QA and from QA to PROD.  But want to make changes to the form later on?  Nope.  You have to edit it DIRECTLY ON PRODUCTION, instead of doing it in DEV, the republishing to QA, then republishing to PROD.  Have to do 3 times the work making the same changes in all environments separately…. not properly tested and shaky work, because you run the risk of missing a step editing in PROD the same way you did in QA and as you did in DEV.  Can’t do the export list method anymore either, as you’d loose all existing list data recreating the list in PROD with the new form.
    Useless.
    Have to remember never to do List deployments, and instead do Document Library deployments.  That way you can at least update the publish location and maintain proper testing environments and life cycle.

  10. Anonymous says:

    To add to my above comment about List deployment being useless.  There is a HACK method to getting around this, but it’s not pretty, and not something you can easily pass on to a lot of the folks who’ll be maintaining these forms.  You can rename the xsn to cab, crack it open as a zip and spill out it’s contents.  Search and replace all occurances of your server URL with the new location, then recab the whole thing back up again (recabbing is yet another whole ordeal figuring out).
    Turns messing with List deployed InfoPath forms into something that may require a far more skilled developer to understand and consistantly manage.

  11. belinda says:

    Hi there. if i use infopath forms i’m not able to access the edit form through the title link of each item, is this correct? in other words the form won’t open from the link, i have to go to the list and then drop down menu, and Edit Item–which is a huge when you are working with lookup columns because you can’t even access the link.

Leave a Reply

Your email address will not be published. Required fields are marked *