Creating an XPage for searching

The user uses this page to specify search parameters and see the results. The search parameters are values for the city, state, country, and zip code. The user can fill in any of these parameters and click a button. The page is refreshed and results are displayed as a view. A search property for the view limits the display to documents that match the search parameters.

About this task

Procedure

At the beginning of the list of XPages, click New XPage. Alternatively, you can right-click XPages > New XPage in the side pane.
Name your new XPage SiteFinder and click OK.
From under Custom Controls in the right pane, drag the Header custom control to the XPage.

This is the same image you put on the SiteList XPage, but it has been put in a custom control for ease of maintenance. A custom control is similar to a subform.
Add a style sheet to the page as follows:
1. Click on the actual page and not controls so thefocus is on the page.
2. Under Properties in the bottom pane, click Style.
3. Scroll to the end and click Add style sheet to page
4. In the Add Style Sheet to Page box, select styles.css.
5. Click OK.
Add a title as follows:
1. On the XPage, press Enter after the header, type a title for the page, for example, Site Finder, and press Enter again.
2. Highlight the text.
3. On the bottom pane, click Style if you are not already there.
4. From the list under styles.css, click .title.
The appearance of the text will change to conform to the selected style.
Below the title text, enter instructions for the user, for example, Fill in any or all of these fields and click Search, and press Enter.
Create a table with four rows and two columns as follows:
1. From Container Controls in the right pane, drag Table under the instructions on the XPage.
  
  The Insert Table dialog box appears.
2. In the Insert Table dialog box, specify 4 for rows and 2 for columns.
3. Click OK.
4. Use the grab handles to adjust the width of the table.
Do the following for each cell in column 1:
1. From Core Controls in the right pane, drag Label into the cell.
2. In the bottom pane, change the label of the control to City (row 1), State (row 2), Country (row 3), or Zip/Postal code (row 4).
Do the following for each cell in column 2:
1. From Core Controls in the side pane, drag Edit Box to the cell.
2. Under Properties in the bottom pane, click Edit Box.
3. Change the names to searchCity (row 1), searchState (row 2), searchCountry (row 3), and searchZip (row 4).
4. Under Properties in the bottom pane, click Data.
5. For Bind data using, click Advanced.
6. From the Use drop-down menu, select Scoped Variable.
7. From the Parameter list box, select Session Scope.
8. Scroll to the end and type the variable name as searchCity (row 1), searchState (row 2), searchCountry (row 3), or searchZip (row 4).
Binding these edit boxes to scoped variables will allow us to access their values in JavaScript™ code rather than in the data store. A session variable retains its value across pages for the duration of the user session on the server.
Do the following to create a button to submit and refresh the page:
1. From Core Controls in the side pane, drag Button to the line below the table.
2. In the bottom pane, change the label of the control to Search.
3. From the drop-down list for the button type, select Submit.
Clicking this button will submit the page to the server and refresh the contents of the page based on the values the user entered.
Do the following to display the query used to get results:
1. On the next line on the XPage, type Query string: and a space.
2. From Core Controls in the right side, drag Computed Field onto the page.
3. Under Properties in the bottom pane, click Font. Change the color to blue.
4. Under Properties in the bottom pane, click Value.
5. For Bind data using, click Advanced.
6. From the Use drop-down menu, select Scoped Variable.
7. From the Parameter list box, select Session Scope.
8. Scroll to the end and type the variable name as queryString.
  
  The variable name is of your own choosing and has no special meaning. You will assign a value to it later.
This allows us to display the query that we calculate later. The display is probably not necessary in a production application but is helpful for testing.
From Container Controls in the side pane, drag View onto the next line of the page.
1. Leave Show data from set to Domino view.
2. Leave Application set to Current.
3. In the View drop-down list, select SiteList.
4. Accept view1 as the data source name.
5. In the list of columns at the end, uncheck everything except SiteName, Phone, StreetAddress, City, and State.
  You can change this and choose what columns to display, but SiteName must be included.
6. Click OK.
Under Properties in the bottom pane, click View. For At runtime, open selected document using, select Site.
Under Properties in the bottom pane, click Data. Ensure that the view is set to SiteList.
Now you set a search query to limit the view to those documents that satisfy what the user enters for the search fields. Do the following:
1. Under Properties in the bottom pane, click All Properties.
2. Scroll to the end. Expand Data then expand the second occurrence of Data. Select the Search property.
  
  Your screen should look like this.
3. Click the diamond next to the Search property and select Compute value.
  
  The script editor opens.
4. Enter the following code in the script editor. Make sure the language is server-side JavaScript™ and Compute Dynamically is set.
```
var tmpArray = new Array("");
var cTerms = 0;
if(sessionScope.searchZip != null & sessionScope.searchZip != "") {
	tmpArray[cTerms++] = "(FIELD SearchZip = \"" + sessionScope.searchZip + "\")";
}
if(sessionScope.searchCity != null & sessionScope.searchCity != "") {
	tmpArray[cTerms++] = "(FIELD SearchCity = \"" + sessionScope.searchCity + "\")";
}
if(sessionScope.searchState != null & sessionScope.searchState != "") {
	tmpArray[cTerms++] = "(FIELD SearchState = \"" + sessionScope.searchState + "\")";
}
if(sessionScope.searchCountry != null & sessionScope.searchCountry != "") {
	tmpArray[cTerms++] = "(FIELD Country = \"" + sessionScope.searchCountry + "\")";
}
qstring = tmpArray.join(" AND ").trim();
sessionScope.queryString = qstring; // this just displays the query
return qstring // this is what sets the search property
```
  You will not go through the exercise, but this code could be put in the form of a function and placed in a script library. The script library would then be added as a resource to the page and the function accessed by a simple reference. This allows the code to be used in multiple places with central maintenance.
5. Click OK.
This code gets the values the user enters on the page by using the session scope variables bound to those edit boxes. The code builds and returns a query string that matches document values in the fields searchZip, searchCity, searchState, and Country.
For clarity we're using the same field names as in the documents we're searching, but we could use any names.
Adjust the first column to allow the user to open the document in read mode:
1. On the XPage, click inside the first column of the view.
2. Under Properties in the bottom pane, click Display.
3. Check Show values in this column as links.
4. For Document open mode, click Read-only.
Web users looking at search results will not be allowed to edit the documents they find when they follow the link. In a real application you would also use the access control list.
Save your changes and preview your new search screen.
Preview the page as desired. Try some searches, for example: 02108 or 33432 for the zip code; Boca Raton or Boston for the city; MA for the state; France for the country.
Close the SiteFinder XPage by clicking the X at the upper right of the center pane.

Results

At this point, your XPage should be similar to SiteFinderFinal which you can open for comparison.

The process shown here is not necessarily the optimal way to organize a search function but it is one way. You might instead assign the search property of the data source from JavaScript™ code in the Search button. That way it is easier to have multiple sources of query information on the page, perhaps with multiple search buttons for different types of searches.

Other controls are available to better format your results. The Data Table, for example, gives more control over how you lay out the search results, and is often used instead of a view. However, the View control is very simple to use.