In Action: Search Page and Results Page in Two Different Webpages

You can deploy a search page and a results page into two different web pages.  This can be useful if you want to provide a search interface in your navigation bar or if you want to deploy the search widget to multiple websites.  We are going to separate a Search and Report DataPage into two separate DataPages to create separate search and results pages.

Preparation:

Before we begin to create the DataPages we are going to create the webpage that will host the results page.  This way we have the URL ready to reference when we create the search page.  The search page can be deployed on as many web pages as needed.

Steps for separating a search page and a results page:

1. Create the search page (Submission Form)

In the Caspio Bridge Explorer window go to the DataPages view.  Click the New DataPage button to open the DataPage wizard.  Although this DataPage will serve as a search page, select Submission Form as the DataPage type.  We are going to collect the search criteria using this DataPage and then pass it directly to the results page (a Gallery Report DataPage) which will do the actual work.  Click Next.

1. Select the table you’d like to search as your data source.
2. Enable advanced options and parameters.  This is so that we can pass the search criteria to the results page.
3. Proceed to the Select Fields screen.
4. Select one field and move it to the right-hand panel using the arrow button.  It doesn’t matter which field you select because it will be removed later.
5. Press Next.

2. Prepare the Virtual fields

Now we are going to create Virtual fields to collect the search data from the end-user.  We are using Virtual fields because we don’t want to run the search in this form.  We also don’t want to create a new record using this form.  In fact, this form is only collecting data and passing it on.

Add as many Virtual fields as you need to run your search.  If you are using criteria in your search, you will need to include a separate Virtual field for each, for example, one field for minimum price, another field for maximum price.  Now you can select the non-Virtual field that was included in step one and click the delete button.

Configure each Virtual field:

1. Modify the field label to reflect the data you’d like to collect.
2. Click on the advanced tab.  If you do not see an advanced tab it is most likely because Advanced Options and Parameters have not been enabled.  Go back to the first page of the DataPage wizard and enable these options.
3. Click the On exit, pass field value to next page checkbox.
4. Rename the field parameter to match the data that’s being collected.  Be sure to use the parameter format: [@xxxxx]
5. Note the parameter name to receive the data in the results page.
6. Repeat for all the Virtual Fields.
7. Click Next when finished.

3. Set the destination to the results page

In the Destinations and Triggers screen click on Go to this page (URL).  Enter the URL from the results webpage.  Be sure to include the protocol (http:// or https://).  Now, no matter where the search page is deployed it will direct end-users back to this URL.  Click Finish to save your DataPage.

4. Create the results page

In the DataPages view click the New button to open the DataPage wizard.  This time we will be creating a Gallery Report DataPage to receive the parameters from the search page, perform the search, and display the results to the end user.

1. Select Report and Gallery as the DataPage type.
2. Select the table you are searching as the data source.
3. Enable advanced options and parameters.
4. Select Pre-defined criteria as the search type and enable parameters in criteria.
5. Click Next.

In the following screen, move all of the search fields to the right-hand panel using the arrow button.  Click Next.

5. Receive the parameters

Now we will configure each DataPage element to receive the corresponding parameter data from the original search page.

For each DataPage element:

1. Click on the Advanced tab.
2. Go to the On load section and check Receive parameter.
3. Enter the parameter name exactly as it was entered in the search page.  Be sure to use the parameter format: [@xxxxx]
4. From the radio buttons available, choose the If empty, ignore criteria options.  This way if an end-user leaves one or several options blank, they will still be able to see results
5. Repeat for all search criteria.
6. Complete the results page and details page as normal.

6. Deploy the DataPages

Now that the DataPages have been configured you can deploy them to your web pages.  Click the deploy button for each DataPage, choose the Deployment Model and Security Settings.  Copy the snippet created, and paste it directly into your web page’s HTML.

Testing and formatting

Once the DataPages have been deployed it is a good idea to perform searches using every available field to be sure the results are as expected.  If you are having trouble with any particular field be sure that the parameter names in both the search page and the results page are exactly the same.

Once you are happy with the functionality of the separate search and results pages you can take a few minutes to improve the look and feel of the DataPages.