February 28, 2021
Hot Topics:

InfoPath 2003

  • By Thiru Thangarathinam
  • Send Email »
  • More Articles »

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 : " +
      XDocument.UI.Alert ("Employee Name : " +
      XDocument.UI.Alert ("Employee City : " +
      XDocument.UI.Alert ("Employee State : " +
      XDocument.UI.Alert ("Employee Zip : " +
  • 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.

Page 2 of 3

This article was originally published on September 5, 2003

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date