In Action: Add a Search Interface to a Results Page

Every Search and Report DataPage contains a search page, a results page, and a details page.  This article explains how you can use parameters to create the functionality of a search page on the same webpage as the results and details pages.

In this example we will be creating a searchable property listing web page with a search interface at the top of the page and a results section immediately below.

This technique uses two separate DataPages.  Note that this technique requires a live web page for deployment.  You cannot use the “Direct from Caspio” deployment method.

Envision – table structure

This is the Design view of the table that we will be using for both the search interface and for the results section.

The search interface is a Web Form that uses Virtual fields to collect the search data.  The data entered into these fields is passed directly to the results section through parameters.  It may seem strange to use a Web Form for searching, but this form actually only collects the data and passes it along.  It is the results section (a Search and Report DataPage) that actually does the work.

It is a good idea to open your table in Design view and position it in a corner of the workspace before you open the DataPage wizard.  This way you can see your original field names when you are naming your Virtual field parameters.

Create the search interface

In the Caspio Bridge Explorer window go to the DataPage view and click the New button to open the DataPage wizard.  Choose Submission Form and click Next.

Enable advanced options and parameters

Since we will be passing parameters from this Form, we will check the Enable Advanced Options checkbox and then the Enable Parameters checkbox.  Click Next.

Include one field, temporarily

Because every Web Form requires at least one field, we will temporarily select a field to be included.  Choose any field from the left-hand panel and move it to the right-hand panel using the arrow button.  Click Next.

Add Virtual fields

Now we will create and configure the fields that will be displayed in the search interface.  Use the Insert button at the bottom right of the DataPage Elements panel to insert as many Virtual fields as you require.  If you plan on using multiple-criteria you must include a Virtual field for each criteria.

In this example we have included five fields, one field each for city, minimum price, maximum price, minimum bedrooms and minimum bathrooms.  Once your Virtual fields have been added, remove the ordinary field from the previous step using the Remove button located just to the left of the Insert button.

Configure your Virtual fields

Change the label of each field to indicate the data you would like the end-user to enter.  Virtual fields can be formatted as dropdowns, radio buttons, checkboxes, etc.

Pass the search criteria

In the Advanced tab, go to the External Associations and Defaults section.  On exit we would like to pass each Virtual field to the next page.  Click the "Pass field value to next page" checkbox.  By default, Virtual field parameters will be named after their DataPage element name (Virtual1, Virtual2, etc.). Rename the parameter to match the corresponding fieldname from your base table (this is when having the design view open is useful).

In this example we created special names for the minimum and maximum price fields to identify the individual values when we want to receive them.  It is important to remember these parameter names so you can correctly receive all of the values in the results section Search and Report DataPage.  When you're finished, click Next.

Reload the same form after submission

In the Destinations and Triggers page select the radio button for Go to this page(URL).  Enter in the URL of your results webpage.

Create the results section

Now we will make a Report form to serve as the results section.  This DataPage will receive the parameters and perform the search.

Enable advanced options and parameters

As always we need to enable advanced options and parameters so that this DataPage can receive parameters from the search interface.  Remember to change the DataPage type to Search and Report.  Click Next.

Use pre-defined criteria and accept parameters

On the second screen of the DataPage wizard we will select Pre-defined Criteria.  Click on the "Enable Parameters in Criteria" checkbox.  In this example we are only using internal Caspio Bridge parameters.  Press Next.

Select the fields that will receive parameters

In the Select Fields screen of the wizard we will move all of the fields that will receive search criteria from the left panel to the right.  Press Next.

Configure your fields and receive parameters

For each field we must configure the comparison type in the Standard tab.  We will then go to the Advanced tab and click the radio button to receive the parameter.  Make sure that the parameter name matches exactly with the parameter name passed from the search interface Web Form.

Also click If Empty, Ignore Criteria, because in the search interface the end-user may leave several fields blank.

Configure your results and details page as normal

Now that the connection has been made to the search interface we can format the results and details pages just as we would normally.  Press Finish to save this DataPage.

Deploy to the same web page

The DataPages are complete.  We now deploy them both to the same web page.  In this example we are deploying the search interface immediately above the results section.

Testing and formatting

Once the DataPages are deployed to the same web page you can now test to make sure the DataPages are linked.  It's a good idea to test each individual field to make sure the results are returned as desired.  If you are having some trouble, check the following:

• Are Parameters enabled on both of the DataPages?
• Are the names of the parameters identical in both the passing and receiving DataPages
• Is the search criteria set to an appropriate option for each field

After the functionality has been tested you can customize the look of the DataPages.  In this example we changed the background color of the search interface Web Form and added a DataPage header that says “Results” above the results section.