Jump to content
  • 0

Select rows in one datapage using as parametaer a field from a row of another datapage.



I have two tabular datapages showing data from two differents tables. One is a persons table with one row for each person, the other is a documents table containing a set of rows for each person. Both are deplyod on the same page, persons on top and document on bottom.
I whish to be able to select one row from the persons datapges and showing in the documents datapages only the ones related to that person.
Anyone has some tips about this?
Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

Hello @vidierre,

I can provide the steps to create the following:


When the users click the 'Documents' button in the corresponding row, the report below displays the documents assigned to this person. In this example, it is a person with ID = 3.

The second DataPage (documents) is deployed as an iFrame in the Footer of the first DataPage (persons).

If this works for you and I understand the request correctly, please let me know. 

Link to comment
Share on other sites

  • 0

Hello @vidierre, let me share the steps to create a report as in the screenshot I shared above.

1) These are examples of the Tables:



2) The first step is to create a Report based on the 'Documents' table.

It should filter the records by the received parameter (person ID).

So, the Report should use the 'Filter data based on your pre-defined criteria' option on the Search page and receive the parameter.



In this example, the 'value required' is selected so this report is not displaying the records until the button on the report above is clicked. 

3) The second step is to create a Report based on the 'Persons' table. 

  • Add an HTML block to add the button. 
    The code example: 
    <button class="documents" onclick="refreshIframe('Assigned_to=[@field:ID]')" type="button">Documents</button>

  • In the Header, the button can be styled. Disable the HTML editor before pasting the code. 
    For example:
    .documents {
      font: bold 16px Arial;
      background-color: #86c4d2;
      color: #333333;
      padding: 15px;
      border: none;


  • In the Footer, disable the HTML editor and add the iFrame deploy code of the Documents Report.
    Customize the iFrame, add its width, remove the border, and add the ID that will be used in the JavaScript code to reference this iFrame.

    An example:

    <iframe name="Documents Search and Report" title="Documents Search and Report" src="https://accountID.caspio.com/dp/AppKey" 
    width="100%" frameborder="0" id="iFrameDocuments">Sorry, but your browser does not support frames.</iframe>

    In the example, this part is added manually to the deploy code: width="100%"  frameborder="0" id="iFrameDocuments"

    Add the JS code below, and use the Documents DataPage URL in the code:

    document.addEventListener('DataPageReady', refreshIframe);
      function refreshIframe(params){
         const iFrame = 'https://accountID.caspio.com/dp/AppKey?'+ params; // replace https://accountID.caspio.com/dp/AppKey with the Documents DataPage deploy URL 
         document.getElementById('iFrameDocuments').src = iFrame;


    P.S. to adjust the iFrame height this article can be helpful https://howto.caspio.com/tech-tips-and-articles/embedding-datapages-with-automatic-height-adjustment/

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...