Auto-Fill Textbox in InfoPath

In this article we can explore how to auto-fill a TextBox in an InfoPath form within SharePoint 2010.

The Scenario

The following is our Customer List with Code and Name.

Customer List

The following is our Product List that has a lookup to Customer Code.

Product List

On selection of the Customer Code dropdown list, we need to auto-fill the Customer Name text box.

Customer Code dropdown list

Note

In typical ASP.NET forms we can use JavaScript to do it. But InfoPath web part enabled pages seldom work with JavaScript.

Solution

Use the following procedure to do it.

Step 1: Create Lists

Create the Customer List with 2 columns:

  1. Code as Text
  2. Name as Text

Create the Product List with 3 columns:

  1. Product Code as Text
  2. Customer Code as Lookup (connecting to Customer > Code)
  3. Customer Name as Text

Step 2: Create InfoPath form

Open SharePoint InfoPath Designer 2010 from your Start menu.

SharePoint InfoPath Designer

In the Initial Screen choose the SharePoint List and click the Design Form button.

SharePoint List

You will get the following wizard. Enter your site URL and click "next" button to continue.

(Please use only the site URL and not the list URL. Enter Credentials if prompted.)

site URL

In the next page choose the Customize option and select the Product List. Click the "Next" button continue.

Customize option

Click the "Finish" button.

Finish

You will get the following screen.

screen

Step 3: Create Data Connection

On change of the Customer Code drop down, we need to use the Code to search in the Customer List and get the Name field. For this, we need a Data Connection.

Choose the "Data" tab and click on the "Data Connections" button.

Data Connections

In the dialog box that then appears click the "Add" button.



Choose the Receive data option and click the "Next" button.

Next button

In the next page choose the "SharePoint List" option.

SharePoint List

In the next page leave the URL of the site as it is.

URL of the site

In the next page choose the Customer List as the source.

Customer List as the source

In the next page select the Code and Name properties.

Code and Name properties

Click the "Next" button and enter the name as "CustomerDS" for the data source.

CustomerDS

We are now ready with our Data Source to query against.

Step 4: Modify form

We need to modify the Customer Name TextBox. Right-click on it and choose the TextBox Properties menu. You will get the following dialog.

TextBox Properties

Choose the Formula Editor that is the highlighted button above. In the dialog that then appears, choose the "Insert Field or Group" button.

Insert Field or Group

In the dialog box that appears, choose the "Show advanced view" link.

Show advanced view link

Now you will be able to select the CustomerDS data source. Expand the Data fields below and choose the Name property as shown below. (Do not close the dialog.)

CustomerDS data source

Click the Filter Data button to enter our filter condition. In the dialog box that appears, click the "Add" button to add the filter. Choose the ID property against the Select a field or group.

Filter Data

You will get the following dialog box.

dialog box

Choose the Main data source and select the Customer Code property. Click the "OK" button. The filter condition looks as in the following.

Customer Code property

You might be wondering why we are comparing the ID property against the Customer Code:

  • In the background the Customer ID is stored and hence the ID comparison is needed.

Close all the dialog boxes by clicking the "OK" button and the Properties dialog box looks as in the following.

Properties dialog box

Click the "OK" button to close the dialog box.

The Value says to use the Name property when the ID is equal to the Customer Code.

Step 5: Save and Publish

Save the form and click on the "Publish" button.

Publish

You will get the following dialog box if no errors exist:

dialog box with no errors exist

Step 6: Test the form

Click on the Open link above and choose "Add item" in the page that appears. Try selecting a Customer Code and you can see the Customer Name is automatically set.

Test the form

This concludes our experiment with InfoPath Auto-Fill.

For deleting an InfoPath form, use Internet Explorer then choose "List Settings" > "Form Settings" > "Delete" option.

Delete

References

Configure InfoPath Forms Services

Summary

In this article we have explored an InfoPath Auto-Fill scenario using Data Sources and Filter. I hope this will be useful in real-life scenarios.