Building a Searchable Phone Directory with Windows SharePoint Services
Paul Schaeflein
4/6/2005
Go to page: 1 2
Printer Friendly Version
Building the Web Page
We are now ready to build the Web page. Start by adding a Content Editor Web Part to the Left Column. This part will contain the instructions. Below the Instructions, add a Form Web Part. The Form Web Part, in combination with a feature called Web Part Connections, will allow users to perform the partial name search. On the Web Part Menu for the Form Web Part, click Modify Shared Web Part to open the Tool Pane.
In the Form Web Part tool pane, click the Source Editor button. Replace the default HTML with the following:
<div style="padding: 2;" onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_">
Last name: <br/>
<input type="text" name="LastName" value=""/><br/>
First name: <br/>
<input type="text" name="FirstName" value=""/><br/>
<input type="button" value="Search" onclick="javascript:_SFSUBMIT_"/>
& nbsp;
<input type="button" value="Clear" onclick="javascript:ClearTextBoxes(this.form);"/>
</div>
<script lang="javascript">
function ClearTextBoxes(form) {
for ( var i=0; i<form.elements.tags("INPUT").length; i++ ) {
if ( form.elements.tags("INPUT")(i).type.toUpperCase() == "TEXT" ) {
if ( form.elements.tags("INPUT")(i).disabled == false ) {
form.elements.tags("INPUT")(i).value = " ";
}
}
}
}
</script>
|
After these changes, the page will look like this:
At this point, all that remains is to link the Web page to the database and then connect the Form Web Part to the result list. These tasks will be completed using FrontPage 2003.
Add Data View Web Part to the Page
Open the WSS Site in FrontPage. The folder list will include the new document library, and selecting the library will display its contents. (We have only one document, but any future Web pages you create will display here.)
- Right-click on the page and choose Open With | FrontPage (Open as HTML).
- Click on Insert | Database | DataView. This will open the task pane to the Data Source Catalog.
- Expand the Database Connections node
- Click Add to Catalog
- In the Data Source Properties, click Configure Database Connection
- Enter you server name
- Enter the user name and password created in the database setup.
- Click Next. You will receive a message that the credentials are stored in clear text. Since these credentials can only run our staff search procedure, this is acceptable risk. Click OK.
- Choose Northwind in the dropdown list, then choose the StaffSearch procedure.
- Click Finish
- The procedure's parameters are displayed. For both parameters, click modify. Check the box labeled "The value of this parameter can be set at runtime" and enter a single space as the default parameter.
- Click OK twice to add the data source to the catalog.
- Drag the "StaffSearch on Northwind" entry from the Data Source Catalog into the Web Part Zone labeled Body (the right-hand column).
- Right-click on the Form Web Part and choose Web Part Connections. This will lauch the Web Part Connections Wizard.
- Choose "Provide Form Values To", then click Next
- Choose "Connect to a Web Part on this page", then click Next
- Choose "StaffSearch on Northwind" as the Target Web Part.
- Choose "Modify View Using Parameters From" as the Target Action.
- Click Next.
- The wizard will display the Stored Procedure parameters (and some additional parameters used by SharePoint) in a grid alongside the Form Web Part fields. Choose the matching Form fields for the FirstName and LastName parameters. Leave all others as .
- Click Next.
- Click Finish.
- Save and close the Web Part page.
Return to Internet Explorer and navigate to the Phone Search page. All of the employees will be displayed. Using the Form Web Part, enter the beginning characters of employees' first and/or last name and click Search. This will cause the stored procedure to execute using the values from the form.
Since SharePoint is using client-side javascript instead of posting the form, the page is very responsive. However, removing the values from the text boxes will not completely clear the Web part connection parameters. You need to enter new values. The stored procedure is written to remove spaces from the value entered, so entering a space will clear the connection parameters. The Clear button will replace the text box values with a single space.
Other Resources
About this series
This series of articles on SharePoint is intended to help you understand the capabilities of the product, as well as provide tips and tricks, development ideas, information from Microsoft, information from the community, and perhaps some samples. Like many other series on IntranetJournal.com, I plan to include how-to articles that can help you with your deployments — ways to customize a page; deployment scenarios; content management; etc. With such a diverse product, there is no lack of topics for this series of articles. What would you like to read?
About the author
Paul Schaeflein is a developer with more than 20 years experience. Paul has been developing dynamic and interactive Web sites since 1996. Paul has worked on all of the versions of SharePoint and has worked with the .NET framework since its debut. You can reach Paul through his blog at http://www.schaeflein.net/blog/.
Go to page: 1 2
Printer Friendly Version
Events
[
Home | Discussion Forum | How Do I... |
Lotus Notes Intranets |
Microsoft SharePoint |
Products |
Shopping
]
