Connecting Web Parts

Web Parts can be extended even further by configuring a connection between them. Using Web Part connections, you can easily pass data between Web Parts and have the Web Parts use the data to decide what data to display.

To provide you with a simple example, suppose that you are displaying a list of your products from a SQL Server database. You want to be able to click the product name in one Web Part and have that product name passed to another Web Part that will then display the supplier information for that product. Configuring this type of interaction is simple using Web Part connections.

You will need two data sources to complete the task:

1. Select Data, Insert Data View.

2. Click the Add to Catalog link in the Database Connections section of the Data Source Catalog as shown in Figure 38.29.

   Figure 38.29. The Add to Catalog link allows you to easily add a new connection to the Data Source Catalog.

   

3. Click Configure Database Connection.

4. Configure a connection to a SQL Server database and click Next.

5. Select Northwind in the Database dropdown.

6. Select the Products table.

7. Click Finish.

8. Click the Fields button.

9. Remove all fields except for ProductName, UnitsInStock, and UnitsOnOrder as seen in Figure 38.30.

   Figure 38.30. Select only the ProductName, UnitsInStock, and UnitsOnOrder fields for the data source.

   

10. Click OK.

11. Click OK again to add the data source.

12. Click the Products on Northwind connection to display the context menu.

13. Select Copy and Modify from the menu as shown in Figure 38.31.

    Figure 38.31. The Copy and Modify menu option makes it easy to create a new data connection based off of an existing connection.

    

14. Click the Fields button.

15. Remove the UnitsInStock and UnitsOnOrder fields.

16. Add UnitPrice and SupplierID and shown in Figure 38.32.

    Figure 38.32. Only ProductName, UnitPrice, and SupplierID are used for the second data connection.

    

17. Click OK.

18. Click the General tab.

19. Enter Supplier Details in the Name text box.

20. Click OK to add your data source.

Now that your data sources are ready, click the Products on Northwind data source and select Insert Data View from the menu. Place the insertion point below the Data View and insert another Data View for the Supplier Details data source. Your page should now resemble the page in Figure 38.33.

Figure 38.33. Two Web Parts ready to talk to each other.

In order to configure the Supplier Details Data View so that it shows the information only for the product name that was clicked in the first Data View, you will need to filter it using the Filter Criteria dialog box.

1. Click the Data View Options button for the Supplier Details Data View and select Filter from the menu.

2. Click the first row in the Filter Criteria dialog box to create a new filter clause.

3. In the Field Name dropdown, select ProductName.

4. Leave the Comparison dropdown set to Equals.

5. In the Value dropdown, select [InputParameter].

Your Filter Criteria dialog box should now resemble the dialog box shown in Figure 38.34. The [InputParameter] setting simply specifies that you are going to pass a parameter to this Web Part from somewhere else. In this case, we will pass the parameter from the other Web Part. Click OK to commit the criteria. The Supplier Details Data View should be filtered so that it currently shows no records.

Figure 38.34. The Filter Criteria dialog box configured to accept an input parameter as a filter.

The next step in the process is to set up the Web Part connections so that the first Web Part on the page feeds data to the second Web Part. We will do that by configuring the Web Part connection on the Supplier Details.

1. Click the Web Part Options button for the Supplier Details Web Part and select Web Part Connections from the menu. You should now see the Web Part Connections Wizard shown in Figure 38.35.

   Figure 38.35. The Web Part Connections Wizard walks you through setting up a Web Part connection.

   

2. In the Choose the Action on the Source Web Part to Use for This Connection dropdown, select Modify View Using Parameters From. This action is used to modify the Data View using parameters from another Web Part.

3. Click Next to proceed to step 2 of the wizard, shown in Figure 38.36.

   Figure 38.36. Step 2 of the Web Part Connections Wizard specifies the location of the Web Part to connect to.

   

4. Your only option here is Connect to a Web Part on This Page. That is what you want to do, so click Next.

5. In step 3 of the wizard, shown in Figure 38.37, you will accept the default values. Because your page only contains one other Web Part, there are no other options available. However, if other Web Parts were on the page, you would have a choice of which Web Part to connect to.

   Figure 38.37. Step 3 of the Web Part Connection Wizard indicates the specific Web Part to use and how to use it.

   

6. Click Next to proceed to step 4 of the wizard.

7. Here you can see that there are two parameters. The first is [InputParameter], and that is the parameter we are using. In the Columns in Products on Northwind column, click <none> and select ProductName in the dropdown, as shown in Figure 38.38.

   Figure 38.38. Step 4 of the Web Part Connection Wizard is where you configure what data you are sending between Web Parts.

   

8. Leave the StartPosition parameter as <none> because you will not be using it and click Next.

9. In step 5 of the wizard, you can choose which field in the Data View you want to use for a hyperlink. This hyperlink will kick off the communication between the two Web Parts. In this scenario, you want to use the ProductName field, so select it.

10. The Indicate Current Selection Using check box allows you to configure a field that will indicate the item being displayed in the details Web Part. FrontPage will indicate the selected field by bolding it. Check the check box, check the ProductName field in the Modify Key Columns dialog box as shown in Figure 38.39, and click OK.

    Figure 38.39. Step 5 of the Web Part Connection Wizard allows you to choose a hyperlink field on the Web Part.

    

11. Click Next to proceed to the final step of the wizard.

12. In step 6 of the wizard, shown in Figure 38.40, the Set Up Conditional Formatting on Consumer Web Part check box will cause the Conditional Formatting task pane to appear when you click Finish. In this case, you will not be setting up conditional formatting, so leave it unchecked and click Finish to complete the connection.

    Figure 38.40. Step 6, the final step of the Web Part Connection Wizard.

    

After you have inserted the connection, save your Web page.

The Web page is now ready to be browsed. Preview the page in your browser and click on any product name to display supplier details on that product, as shown in Figure 38.41. When you click the product name, the Web Part displaying the links communicates that product name to the Supplier Details Web Part, and it filters the Data View based on the product you selected.

Figure 38.41. Two Web Parts one built by using data passed to it from the other.