Every Report DataPage contains a separate search page, a results page, and a details page.  This article explains how you can use parameters to combine the search and results pages together on a single web page. In this article, you create 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 “URL” deployment method.

This is the Table that will be used in this example.

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 will be configured to collect search data and pass parameters along to the results page. It is the results section (a Search and Report DataPage) that actually does the work. Therefore the table used in your submission form should be a dummy table which doesn’t have any Required field.

 

Create the search interface

In this section, you first create a search interface using a Submission Form.

  • On the DataPages’ listing screen, click New DataPage to open the DataPage wizard.
  • By default, the cursor selects Submission Form as the first DataPage type.
  • On DataPage DataSource screen, select a dummy table which doesn’t have any Required field (if you don’t have it, create one) for data source.
  • On the Select Fields screen, include one field temporarily. Because every Web Form requires at least one field, temporarily select a field to be included. Choose any field from the Available Fields panel and move it to the Selected Fields panel using the arrow button.
  • On the Configure Fields screen, you start to add Virtual fields. You 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, there are five virtual 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 X 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

Next, you configure each virtual field to pass the search criteria. Select the Advanced tab and under the External Associations and Defaults section , pass the parameter to the next page , by enabling On Exit option and by checking Pass field value as parameter. 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

On the Destinations and Triggers page, select Same Form in the dropdown for Destination after record submit.

Click Finish.

Create the results section

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

  • On the DataPages’ listing screen, click New DataPage to open the DataPage wizard.
  • Select Reports on the left menu and click Tabular.
  • On the Search Type screen, check Filter data based on your pre-defined criteria. Check Allow parameters in search criteria and Bridge parameters only. In this example, you are only using internal Caspio Bridge parameters.

Select the fields that will receive parameter

Next, you select the fields that will receive parameters. In the Select Fields screen , move all of the fields that will receive search criteria from the left panel to the right. Click Next.

Configure your fields and receive parameters

Each field must be configured to receive parameters.  For each field, add the corresponding parameter in the Value field 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.  Click 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 using embed deployment method.  In this example we are deploying the search interface immediately above the results section.

Deploy using iFrame

If you’re using iFrame deployment, copy the results page iFrame deploy code and paste into the search DataPage Footer.

Related videos:

Related articles:

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.