InfoPath 2003

InfoPath 2003 is one of the new additions to the Microsoft Office 2003 system that provides a dynamic forms based environment that allows business data to be collected and managed in XML without requiring end user knowledge of XML. Since the native format for data storage in InfoPath is XML, the information gathered using InfoPath forms can be very easily integrated with virtually any backend system that can understand and work with XML. InfoPath also allows the organizations to easily create rich and dynamic forms using the WYSIWYG interface that supports features such as offline editing, rich formatting, spell checking and so on. In this two-part article series, we will demonstrate the features of this new tool by looking at the InfoPath forms environment. We will also understand how to create dynamic data-bound InfoPath forms by leveraging external data sources such as SQL Server, and an ASP.NET XML Web Services.

Introduction

InfoPath is designed to solve a core problem in data collection and integration needs in the enterprise via XML. Despite XML's potential to enable application integration, its use typically requires a development background that involves typically XML and XSL. Because of this, it is primarily employed in back-office and data center applications. But now with InfoPath, you can bring the XML functionality to the desktop by allowing users to gather and manage business data in XML without requiring those users to know the language themselves. By providing native XML support, InfoPath allows customers to more readily reuse the information created through their business processes. For example, InfoPath can be used by the line of business (LOB) applications to bring the power of back-end systems and applications such as Customer Relationship Management (CRM), Enterprise Resource Planning (ERP), and Supply Chain Management (SCM), to every desktop. On a team level, InfoPath may be used to address such tasks as weekly status reports, sales call tracking and so on. Because of its seamless integration with other Office family products such as Excel, Outlook, and Windows SharePoint Services, you can readily share business data with your team members.

Architecture of InfoPath 2003

InfoPath's form design interface includes familiar controls, such as check boxes, date pickers, and text boxes. You can create forms by dragging these elements into a document editor that provides WYSIWYG view of the form, and traditional text editing and layout facilities are available to arrange and format the form elements. You can get most of these functionalities without having to write a single line of code even though a script editor is available if you wish to add more complex functionality.

When you are designing a form using InfoPath, you have two options.

• You can use one of the built-in sample templates provided by Microsoft for performing common tasks such as asset tracking, expense reports, project plans, and sales reports. These templates are fully functional, and can be used directly, or they can be customized to meet the needs of the user.
• Or you can design a form from scratch and add all your custom functionalities.

Data entered by users in InfoPath forms is stored in XML. InfoPath also provides out-of-the-box support for Web services protocols, including Simple Object Access Protocol (SOAP), Universal Description, Discovery, and Integration (UDDI), and Web Services Description Language (WSDL), making it an ideal client for Web services. You also have full control over the XML schemas used in this process, and you can bind form data controls to XML data elements by simply selecting them from a list.

Operations that can be performed using InfoPath

There are two main operations that you can do with InfoPath.

• Designing form templates — You can design InfoPath forms using the WYSIWYG editor that can be based on XSD Schemas or WSDL.
• Filling out forms — In this operation, when the user browses to a form template and InfoPath opens a form template allowing the user to fill out the form.

For both of these tasks, you need InfoPath to be installed and available in the client machine.

Designing an InfoPath Form Template

When you design a new form template, you can either start from scratch by selecting New Blank Form or base it on an existing data source by selecting New from Data Source. The task pane (available in the right hand side of a blank form) provides links to the various tasks you might want to perform while designing a new form. Specifically, you'll want to control the form layout, place controls on the form for capturing different types of information, define how those controls map to your underlying data source, define different data views of the form, publish it and so on. After selecting New Blank Form, InfoPath provides a blank design surface in which you can drag and drop controls onto. As you're designing a form, you can select Preview Form to see what it will look like when the user fills it out.

As you design a form from scratch, InfoPath automatically builds an XML Schema definition behind the scenes to represent the information that will be captured by your form. If you fill out an InfoPath form and save it to disk, InfoPath will produce an XML document that conforms to the schema. InfoPath also provides an advanced feature that enables optional and repeating sections. Optional sections can be hidden and displayed on demand, making it possible to simplify forms and decrease clutter. Repeating sections let you repeat blocks of information that occur multiple times in a schema. InfoPath also enables you to bind repeating controls to external data sources for automatic population of the control.

Designing a Simple InfoPath Form

In this section, we will design a simple InfoPath form that can be used for entering the details of an employee. To create this form, let us follow the steps outlined below.

• Open up InfoPath and select File->Design a Form from the menu, which results in the Design a New Form option being displayed in the Task Pane.
• Click on New Blank Form from the list of available options.
• From the Design Tasks pane, click on Controls to add controls to the form.
• In the Form editor, type in a text message that says Employee Details: and adjust the font size to 24 and center the text message. Then add a text message in the next line that says Employee ID:
• From the list of available controls, drag and drop a text box control right next to the caption and right click on it and select Textbox Properties from the context menu.
• In the Properties dialog box, change the Field Name to EmployeeID and then change the Data type to Whole Number (integer) from the drop down box. You can also set default value for the EmployeeID text box by entering an appropriate value in the Default value: textbox. After making all the changes, the properties dialog box should look somewhat similar to figure 1.
  
  

  
  
  Click here for larger image
  Figure 1.

• The Properties dialog box also provides advanced built-in validation features that you can take advantage of. To set advanced validations, click on the Data Validation button and you will be presented with the dialog box in figure 2.
  
  

  
  Figure 2.

• Using the Events drop down option, you can select a specific event and write code under that event. As you can see from the above figure, by default, it provides three events.
• From the Data Validation dialog box displayed above, you can also configure custom rules by clicking on the Add button. Clicking on the Add button results in the following screen (figure 3) in which you can set validation rules.
  
  

  
  Figure 3.

• In the same manner, add the remaining controls to the form. Also add a command button to the form and set the Label to Submit and change the Script ID as EmployeeSubmit using its properties dialog box. Then click on the Microsoft Script Editor to bring up the script editor. In the script editor, we will write few lines of code to simply display the data entered by the user in the textboxes. After making all the changes, the function should look similar to the following.
  
  

  function EmployeeSubmit::OnClick(eventObj) 
  { 
    XDocument.UI.Alert ("Employee ID : " +
      eventObj.Source.selectSingleNode("//my:EmployeeID").text);
    XDocument.UI.Alert ("Employee Name : " +
      eventObj.Source.selectSingleNode("//my:EmployeeName").text);
    XDocument.UI.Alert ("Employee City : " +
      eventObj.Source.selectSingleNode("//my:EmployeeCity").text);
    XDocument.UI.Alert ("Employee State : " +
     eventObj.Source.selectSingleNode("//my:EmployeeState").text);
    XDocument.UI.Alert ("Employee Zip : " +
      eventObj.Source.selectSingleNode("//my:EmployeeZip").text);
  }
  
  

• After adding all of the controls, the form should look somewhat similar to figure 4.
  
  

  
  Figure 4.

• To preview the form, click on the Preview Form option in the toolbox of the above screen. Using this option, you can test to see if the form behaves exactly the way you want. While previewing the form, you can also enter values on the textboxes, and click on the Submit button to see if it is displaying those alerts that we specified in the code earlier.

Designing a Data-Bound InfoPath Form

The first step in designing a data-bound InfoPath forms is to open InfoPath and click on the Design a Form option from the File menu. Now in the task pane, click on New from Data Source to specify the template and the data source. This results in the Data Source Wizard being displayed.

Figure 5.

As you can see from the above screen, InfoPath supports the following data sources: XML Schema or XML data file, Database (Microsoft SQL Server or Microsoft Access only), and Web Service. In this case, since we want to use SQL Server as the data source, select Database option and click Next. In the next screen, specify the database you want to use as the data source. Once you specify the database and the table information, you will get the screen in figure 6.

Figure 6.

In the subsequent dialog boxes, leave the default options to complete the wizard. Clicking Finish in the last wizard dialog generates two views.

• A query view with a queryFields section that contains textbox controls for all of the data source's fields. The query view also contains a New Record button and a Run Query button to interrogate the data source.
• A Data Entry View, which is empty by default. To display data from the data source, you need to add controls to this view.

For the purposes of this article, let us add a very simple functionality that allows us to retrieve the details of a specific category based on the supplied category id. For this reason, remove the New Record button from the query view.

• Open up the Data Entry view and click Data Source from the task pane.
• Open up the dataFields node from the treeview and select d:Categories node from the treeview.
• Right click on that node and select Repeating Section with Controls from the context menu. This results in a Repeating Section being added to the Data Entry view.
• Now click on Views in the task pane to navigate to the Query view.
• Click on Preview Form option in the toolbar to preview the form.
• In the CategoryID textbox, enter 1 and click on Run Query to run the query and you will see the details of the category being displayed in the data entry view. This is illustrated in the following figure.
  
  

  
  Figure 7.

Publishing an InfoPath form

Once you've designed a form template, you need to save and/or publish it. You should note that clicking the Save button simply saves the form template to a file. You can return to the form template at any time and continue working on it. The form template is a standalone file that contains all the information necessary for another user to fill it out. Before we discuss the steps involved in publishing an InfoPath form, let us consider the structure of an InfoPath solution file.

InfoPath stores all template-related files in a compressed archive file called an InfoPath solution file that is saved with the file extension .xsn. The solution file contains manifest.xsf, which lists the other files the solution requires: .xml file (an empty form document), an .xsl file for producing each form view, and a .xsd file for the data source. The solution file also includes JScript or VBScript files, if form customization requires script and JScript is the default.

Selecting Publish displays the Publishing Wizard, which allows you to distribute the finished form to a centralized location, accessible by other users. You can publish a finished form to a number of places:

• A network share,
• A SharePoint controlled web site
• A virtual directory on a web server.

Once a form has been published, users can access the form directly from InfoPath (by selecting Fill Out a Form) or by simply browsing to the file in Windows Explorer or Microsoft Internet Explorer. When you browse to a form, InfoPath opens it in "fill out" mode and enables the user to enter data. While filling out the form, users also can save forms to the local drive and work on them in a disconnected manner and then submit data when reconnected. Users of a shared template can also store local XML snapshot copies of the forms they complete, send completed forms to others by e-mail, or export a read-only copy of the form as a single-file Web page in Microsoft MHT format. The e-mail version includes the form's XML file as an attachment. This feature enables recipients with InfoPath and network access to its template to edit the form. Users with client authentication certificates can apply digital signatures to the forms they complete, and others in the workflow chain can add their digital signatures to a form.

Conclusion

In this article, we have understood the architecture and features of InfoPath 2003 that can go a long way in revolutionizing the process of capturing business data. We have also had a look at the rich WYSIWYG editor that allows you to design rich dynamic forms. Finally we demonstrated how to retrieve data from SQL Server and bind it to a control present in the InfoPath form. In Part-2 of this article, we will see how to interact with an ASP.NET Web Service from an InfoPath form and retrieve and submit data to the web service.

Source Code

The following is the source code for this two part article: InfoPath.zip - 52 kb.

About the Author

Thiru Thangarathinam has many years of experience in architecting, designing, developing and implementing applications using Object Oriented Application development methodologies. He also possesses a thorough understanding of software life cycle (design, development and testing). He is an expert with ASP.NET, .NET Framework, Visual C#.NET, Visual Basic.NET, ADO.NET, XML Web Services and .NET Remoting and holds MCAD for .NET, MCSD and MCP certifications. Thiru has authored numerous books and articles. He can be reached at thiruthangarathinam@yahoo.com.

# # #