You can use the Form Web Part to connect to and filter a column of data in another Web Part. Both Web Parts must be installed on a server running Microsoft Windows SharePoint Services.

• How you can use the Form Web Part

• Connect the Form Web Part to another Web Part

• Customize the Form Web Part

• Use the Source Editor to customize the Form Web Part

• Common properties of Web Parts

How you can use the Form Web Part

The Form Web Part makes it easy to filter the contents of List View Web Parts. The Form Web Part sends filter criteria to the List View Web Part. By typing different criteria in the form, you can filter the list in different ways.

For example, you can filter a list of employees by department by selecting from a drop-down list, or you can filter orders by product line.

You can use text boxes, drop-down lists, check boxes, or option buttons on the Form Web Part. Only one field can be connected to a List View Web Part, but different fields can be connected to different Web Parts at the same time. For example, you can have a Form Web Part with a text box and a set of option buttons. The text box can be connected to one List View Web Part and the option buttons to another. When the user clicks the Go button, both List View Web Parts are filtered according to the information entered on the Form Web Part.

 Top of Page

Connect the Form Web Part to another Web Part

To use the Form Web Part, you connect it with another Web Part that is capable of receiving filtering parameters through a Web Part connection, such as the List View Web Part. The list you want to filter, and the column on which you want to filter it, must be visible in a Web Part on the same page as the Form Web Part. You can connect the Form Web Part to one or more Web Parts on the Web Part Page.

1. On the Web Part page that contains the Web Part you want to filter, click the Site Actions menu , and then click Edit Page.
2. Choose the Web Part zone where you want to place the Form Web Part, and click Add a Web Part.
3. In the Add Web Parts dialog box, select the Form Web Part, and then click Add.
   The Form Web Part appears with a text box and a Go button.

4. Click the arrow next to Edit , point to Connections, point to Provide Form Value To, and then click the name of the Web Part to which you want to link.
5. In the Configure Connection dialog box, the Column field should contain T1. Click Next.
6. The Column field in the Configuration Connection dialog box now shows all of the available columns in the list to which you are providing the filter parameter. Select the field that matches the information from the Form Web Part.

   

 Note   The fields do not have to have the same names, nor do they have to be the same data types. The values sent from the Form Web Part are text values.

7. Click Finish, then click Exit Edit Mode at the top of the page.

To use the configured Form Web Part, you can type text in the text box and then click Go or press ENTER. The other Web Part will display data that matches the text you typed. To clear the text box so that you can type new text, select the current text, and then delete it. To redisplay all items in the filtered list, click All Items on the View menu.

 Top of Page

Customize the Form Web Part

You can customize the Form Web Part by using either the Source Editor custom property or a Web design program that is compatible with Windows SharePoint Services, such as Microsoft Office SharePoint Designer 2007.

Instead of the standard text box, you can use option buttons, check boxes, multi-line text boxes, and list boxes. You can assign a default value to the form element, which can be overridden by the user. After you customize the Form Web Part, you can create another instance of it and add it to a Web Part gallery on your site.

If you customize the Form Web Part, keep in mind the following important points:

• Only one Go button (which uses the HTML INPUT element) can be used to pass data to the other Web Part.
• The Form Web Part uses the HTML FORM element. Certain HTML elements cannot be used inside the FORM element, including the HTML element, the BODY element, and the HTML FORM element.
• All form field names must be unique. Each name value is used to connect to a corresponding column name in the Web Part that you are connecting to.
• Although you can have more than one element (text box, check boxes, etc.) on your form, only one can be connected to the list to be filtered. However, each element can be connected to a different Web Part, so you can filter more than one list at a time, or multiple instances of the same list in different ways.

To customize the Form Web Part, use the Source Editor to add HTML source code to the form content.

 Top of Page

Use the Source Editor to customize the Form Web Part

1. On the Web Part page that contains the Web Part you want to filter, click the Site Actions menu , and then click Edit Page.
2. Choose the Web Part zone where you want to place the Form Web Part, and click Add a Web Part.
3. In the Add Web Parts dialog box, select the Form Web Part, and then click Add. The Form Web Part appears with a text box and a Go button.
4. Click the arrow next to Edit, then click Modify Shared Web Part.
5. On the tool pane, click the Source Editor button.The Text Entry dialog box opens with standard HTML code.



6. To make the code easier to read and modify, insert carriage returns in the text to break the lines as shown here:

The line highlighted in the illustration is the HTML code that produces the text box in the Form Web Part:

<input type="text" name="T1"/>.

You can change this line, but do not change any of the other HTML code in the dialog box.

The Form Web Part dynamically creates a scripting routine at run time to create the connection to the other Web Part. Do not modify the onkeydown or onclick event code in the Source Editor, or you may unintentionally break the Form Web Part.

You can change the name of a field, add labels to form fields, or specify a default value for the text or text area field in the Form Web Part.

Departure Date: <input type="text" name="Date"/>

Departure Day: <input type="text" name="Day" value="Tuesday"/>

 Top of Page

Use a different type of field

Instead of the standard one-line text box, you can use any of these types of fields:

• Multi-line text box
• Check box
• Option buttons
• Drop-down list of choices

The following examples show the code you would add to use each of these types of fields:

 Top of Page

Multi-line text box

The ROWS value specifies the number of lines that are visible in the text field. The COLS value specifies the width of the text area in characters. Thus, this example would produce a text box 5 lines deep by 30 characters wide. When the user types in the box, the text will wrap at 30 characters.

<div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_"> 
 	
<textarea name="Description" ROWS=5 COLS=30> 
 	
<input type="button" value="Go" 
onclick="javascript:_SFSUBMIT_"/>
</div>

 Top of Page

Check box

This example adds a check box with a label. Notice that while the name of the check box is text, the value sent to the connected Web Part is a number. The value can be any type of data. You must specify a value to be sent if the box is checked.

<div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_"> 
 	
Check if you walk to work <input type="checkbox" name="commute" value="1" />
 	
<input type="button" value="Go" 
onclick="javascript:_SFSUBMIT_"/> 
</div>

 Top of Page

Option Buttons

This examples adds two radio buttons. Both must have the same name. Notice that the labels follow the buttons. The "<br/>" tag causes the buttons to be displayed one on top the other.

<div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_"> 
 	
<input type="radio" name="Date" value="4/1/2009" /> 4/1/2009
<br />
<input type="radio" name="Date" value="4/5/2009" /> 4/5/2009
 	
<input type="button" value="Go" 
onclick="javascript:_SFSUBMIT_"/>
</div>

 Top of Page

Drop-down list of choices

This code creates a drop-down list. The <select> and </select> tags create the drop-down list box. Each option appears as a separate choice in the list. Only one choice can be selected. The text before the </option> tab (e.g., Walk to work) is what appears in the drop-down list.

<div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_"> 
 	
<select>
 <option value="Walk">Walk to work</option>
 <option value="Bike">Ride my bike</option>
 <option value="Bus">Take a bus</option>
 <option value="Auto">Drive my car</option>
</select>
 	
<input type="button" value="Go" 
onclick="javascript:_SFSUBMIT_"/>
</div>

 Top of Page

Common properties of Web Parts

All Web Parts share a common set of properties that control their appearance, layout, and advanced characteristics.

 Note   The common Web Part properties that you see in the tool pane may be different from what is documented in this section for several reasons:

• To see the Advanced section in the tool pane, you must have appropriate permission.
• For a specific Web Part, a Web Part developer may have chosen not to display one or more of these common properties or may have chosen to create and display additional properties that are not listed below in the Appearance, Layout, and Advanced sections of the tool pane.
• Some permission and property settings may disable or hide Web Part properties.

Appearance

Layout

Advanced

 Top of Page