End User Recipe: Employee Advanced Search

The goal of the Advanced Search page is to allow users to search one or more specific data source fields. In addition to standard text fields, the Advanced Search page includes a dynamic list that will be bound to a list of employee locations.

Step 1: Implement Employee Search Design

Let's start by building the page with the search criteria form.

  1. Create a basic dynamic page, either by hand or derived from a template.

    graphics/book.gif In the EmployeeLookup folder, locate the folder for your server model and open the employee_search_advanced page found there.

  2. Add a table to the content region of your page to contain the interface elements for the application.

    graphics/book.gif From the Snippets panel, drag the Recipes > EmployeeLookup > Wireframes > Employee Advanced Search - Wireframe snippet into the Content editable region.

  3. Within the table, insert the form and necessary form elements for the user login. For the advanced search, you'll need either a text field or a list for every data source field you want to search as well as a submit button. Use lists for those data sources that have a fixed set of values and text fields for data sources that could contain any text string. In our example, there are five text fields and one list element.

    graphics/book.gif Place your cursor in the row below the words ADVANCED SEARCH and insert the Recipes > EmployeeLookup > Forms > Employee Advanced Search - Form snippet [r2-2].


    Figure r2-2.

    graphics/04fig02.gif


  4. Be sure to save the page.

Again, no data validation will be applied to allow for a full-results search.

Step 2: Add Database Components

The list element inserted in the previous step requires a data source to be populated. In this step, we'll add a recordset that contains a list of the cubicles in use. Because it's possible that the cubicle number can be used more than once in lean times, some of our employees have to share their office space an advanced SQL statement is used to ensure that each value appears only once.

  1. From the Bindings panel, choose Add (+) and select Recordset.

  2. If necessary, switch to the advanced Recordset dialog [r2-3].


    Figure r2-3.

    graphics/04fig03.jpg


  3. In the Name field, enter a label associated with the corresponding list.

    graphics/book.gif Enter Cubes in the Name field.

  4. Choose your data source connection from the list.

    graphics/book.gif Select Recipes from the Connection or Data Source list.

  5. ColdFusion only: If necessary, enter the username and password in their respective fields.

  6. In the SQL field, enter the following code, according to your server model:

    graphics/vb.gifgraphics/js.gifgraphics/cf.gif

     SELECT DISTINCT EmployeeCube FROM Employees ORDER BY EmployeeCube ASC 

    graphics/php.gif

     SELECT DISTINCT EmployeeCube FROM employees ORDER BY employeeCube ASC 

    The DISTINCT keyword is a SQL instruction that forces only unique values to be returned.

  7. Make sure your settings are correct, and click OK to close the dialog and insert the recordset.

Note

Although we're only adding one recordset, if you had multiple list elements, you might need to have several recordsets, one for each list.


Step 3: Data Binding Process

With the recordset defined, we're ready to use it to primarily populate the dynamic list element on the page. I say primarily because Dreamweaver allows us to mix both dynamic and static elements in the list control. We'll use this facility to allow for a wildcard type value.

  1. Select the list element you want to assign dynamic values to.

    graphics/book.gif Choose the CubeNumber list element.

  2. From the Property inspector, choose Dynamic.

    The Dynamic List/Menu dialog appears [r2-4].


    Figure r2-4.

    graphics/04fig04.gif


  3. Make sure the CubeNumber list element is selected in the Menu list.

  4. Select Add (+) and, leaving the Value column blank, enter Any in the Label column.

    Static values in a dynamic list element appear at the top of the option list. The Value column is left empty so that a choice of Any results in no limiting filter being set.

  5. From the Options from Recordset list, choose Cubes.

  6. Set both the Values and the Labels lists to EmployeeCube.

    Because there are no separate identifying labels for the employee cube, the same data source is used for both Values and Labels.

  7. Leave the Select Value Equal To field empty and click OK to close the dialog.

    By leaving the Select Value field blank, the item at the top of the list in this case the static value with the label Any becomes the default selection.

Step 4: Specify Form Action and Method

As with the simple search form, we need to establish the correct action the page that will actually process the search request and the method how that page receives the data.

  1. Place your cursor anywhere within the form in either Design or Code view.

  2. From the Tag Selector, select the <form> tag.

  3. On the Property inspector, enter the path to the search results page.

    graphics/book.gif Select Browse and choose the employee_results file for your server model.

  4. Make sure the Method is set to GET rather than POST or Default.

Selecting a GET method causes the search criteria and other form-related information to be sent in a query string that is attached to the URL, like this:

 
 employee_results.asp?FirstName=&LastName=lowery&Email=&JobTitle=& Department=&Manager=&CubeNumber=&AdvancedSearch=Search 
 

Recordset navigation requires GET rather than POST because POST encodes the form entries in a way that GET does not. Note that in our example only the LastName variable has a value lowery and that is what the next page we're going to build would search for.



Macromedia Dreamweaver MX 2004 Web Application Recipes
Macromedia Dreamweaver MX 2004 Web Application Recipes
ISBN: 0735713200
EAN: 2147483647
Year: 2003
Pages: 131

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net