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

[vidierre]

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?

[CoopperBackpack]

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. 

[vidierre]

@CoopperBackpack the requirement is understood. This method I already used to display, on a different page, more datapages of one entity. I didn't thought it would be used also for this.

You know, when you are pointing one thing and you don't use lateralthinking....
Thank you is a good solutions!

[CoopperBackpack]

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:
   

  <style>
  .documents {
    font: bold 16px Arial;
    background-color: #86c4d2;
    color: #333333;
    padding: 15px;
    border: none;
  }
  </style>

  
   

• 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:

  <script>
  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;
    }
  </script>

  
  
  
  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/

[vidierre]

@CoopperBackpack is very interesting the iFrame into the footer. I have to test it. Thank you.

[vidierre]

On 2/21/2024 at 12:18 PM, vidierre said:

@CoopperBackpack is very interesting the iFrame into the footer. I have to test it. Thank you.

@CoopperBackpack I tested it and I want thank you again it is an easy and elegan solution. More than what I used to use!