Separating Results and Details on Two Web Pages

7 minutes to read

You can separate your results and details pages into two different web pages. Additionally, in one-to-many relationships it is sometimes necessary to link directly between a single record in a results page and all associated records in another results page.

This article shows how you can use a hyperlink and an AutoNumber parameter to link to between a single record in one results page and another results page displaying all associated records from a second table.

It also takes you through the process of creating a separate DataPage for results and details pages and connecting the two DataPages using a hyperlink with a query string parameter. 

Prerequisites:

Your base table must include a unique ID field such as an Autonumber.

Steps to separate results and details on two web pages:

Create a Details Report. Apply the following configuration:

- On the Search Type screen, select Filter data based on your pre-defined criteria.
- On the Selecting Filtering Fields screen, move your unique ID field to the right-hand panel.
- On the Configure Filtering Fields > Advanced, select Receive value or parameter. Configure the field to load an external parameter named after the fieldname. In this example, the fieldname is ” Unique_ID”.

- Now you can configure your details page as normal.  Deploy your Details Report to a web page and note the host URL as you will need it later.

Create Reports as the DataPage Type and choose a tabular, gallery, or list layout.

- Set up your search and results pages as usual. Before moving past the Configure Results Page Fields screen, create a link to the Details Report.
- Insert an HTML block and create a hyperlink to the URL of the Details Report’s host page. At the end of the host page’s URL add a query string that passes the parameter for your record’s unique ID.

Create a hyperlink to the Details Report. Insert an HTML block and create a hyperlink to the URL of the Details Report’s host page.  At the end of the host page’s URL, add a query string that passes the parameter for your record’s unique ID. Here is a reference for the hyperlink you will need to create:

1. Replace URL with the host page URL.
2. Replace Fieldname with the fieldname of your unique ID field. For Example:

- The rest of the Results page can be formatted as usual. Select No Details Page when prompted.
- Save the changes and deploy this details page.

Now when your user clicks on the details link, they will be redirected to the second webpage and see the correct record details.

Steps to link a results page to a results page:

Some examples where results to results links may be useful:

Link to all log entries associated with a specific record (support ticket action logs, customer contact records, etc.)
View all user records associated with a specific event record (attendees, signups, etc.)

The example used in this article shows a searchable listing of club members. Each club has multiple members. Clicking on the “Members” link for each club record will display another Report DataPage listing all of the members in that club.

Prerequisites:

You will need two tables associated with one field. In our example, we use tables named M2M_Student and M2M_Clubs. These tables are associated with the Club_ID field. The Club_ID field is the primary key of the Clubs table and is a foreign key in the Students table. It creates a one-to-many relationship because one club may have many students. For simplicity, each student can only belong to one club.

Create the Club Report DataPage with M2M_Clubs table as your data source.

1. You can configure the search functionality, results display, and details fields to your preference.
2. In the Configure Results Page Fields screen, insert an HTML block using the Insert button at the lower right of the DataPage Element panel. This HTML block is going to hold the link to the Student Members Report. For now, just type “Members” in the HTML Block panel as a placeholder for the future link.
3. Finish creating the Report DataPage and preview it inside of Caspio.
Create the Student Report DataPage with M2M_Student table as your data source. This Report is different from the previous Clubs Report because it will not have a search page.

1. On the Search Types screen select the radio button marked Filter data based on your pre-defined criteria.
2. On the Select Filtering Fields screen, include the Club_ID field as the filtering field by moving it to the right-hand panel.
3. On the Configure Filtering Fields screen, select the Club_ID field and click the Advanced Select Receive value or parameter, select the External Parameter option from the dropdown and enter the parameter name. Be sure to note the parameter name (in this case @Club_ID). The parameter name in the Club Report must match this parameter name exactly. Check If empty, ignore criteria so if an end-user leaves one or several options blank, they will still be able to see results.
4. You can configure the rest of the Report as needed. Click Finish when complete.

Link the DataPages.
Now that the DataPages are complete, we can link them together by changing the placeholder members link text from earlier into a hyperlink to the Student Members Report. First, we need the URL of the Students Member Report. To get a location we will deploy the DataPage.
For this example, we are going to use the URL method to deploy our DataPages. You can use this same technique with the embedded method. Just use the URLs of your host pages instead of the link from the URL method of deployment.

1. Click on Deploy and, for the deployment method select URL. Click on the Link tab, copy the deploy code and click Close.
2. Open the DataPage wizard again by selecting the Clubs Report and clicking Edit. If you haven’t already, make sure that both advanced options and parameters are enabled in this DataPage.
3. Proceed to the Configure Results Page Fields Select the HTML block that contains your member’s link placeholder. Paste in the deploy code link from the Students Report. If you are using the Direct from Caspio method, the default link text will be the DataPage name. Update the hyperlink text to say “Members”.
4. Pass the Club_ID field as a parameter. Because you are using the Direct from Caspio deployment method, use an and symbol (&) to create a query string instead of a question mark. With the Direct from Caspio deployment, the first query string is always the AppKey of your DataPage.
5. After the AppKey (the long series of numbers and letters) add an and symbol (&). Enter Club_ID (make sure it is spelled the same as the receiving parameter in the student Report DataPage. Now add an equal sign. Then, using the Parameter Insert button at the lower right hand of the HTML panel, insert the Club_ID parameter in string format.
6. If you are using the embedded method and the Club_ID is your first parameter, use a question mark (?) as your query string signifier.
7. Click Finish when complete.

Now your two DataPages should be connected. You can test the link right inside of Caspio.

code1

<a href="URL?Fieldname=[@field:Fieldname]">Details</a>

code2

<a href="http://www.yourdomain.com/page.htm?Unique_ID=[@field:Unique_ID]">Details</a>