You can embed a DataPage (child) into another DataPage (parent) using iframe. This can help reduce whitespace or avoid having a vertical scroll bar. The height of the iframe will adjust automatically to the content height.

In Form DataPages, you can embed both Forms and Reports.

In Report DataPages, you can embed Reports.

Note: Do not use this solution for Reports DataPages that have inline features enabled. Calendar pickers and dropdowns used in the inline add or edit options might not be displayed correctly if they overlap with the report height.

The following screens compare the embedded DataPages with and without automatic adjustment.

No adjustment: An embedded DataPage without the automatic adjustment of the iframe height set. The DataPage displays a scrollbar for viewing all the content.
Automatic adjustment: An embedded DataPage with automatic adjustment of the iframe height. All the content of the DataPage is displayed.

Steps:

  1. Open the child DataPage and perform the following actions:
    1. On the Configure Fields screen, insert Header & Footer.
    2. In the header, disable the HTML editor and paste the following code:
      Child DataPage wizard view showing the code to insert in the header.
  2. Open the parent DataPage and perform the following actions:
    1. Depending on the DataPage type:
      • If the parent datapage is a Form, go to the Configure Fields screen.
      • If the parent datapage is a Report, go to the Configure Search Fields screen. 
    2. Insert Header & Footer.
    3. In the header, disable the HTML editor and paste the following code:
      Configure Fields wizard view showing the code to insert in the header.
    4. In the header or footer section where you want your child DataPage to appear, in the HTML block, paste the following code:
      Parent Page wizard view showing the code to insert in the HTML block.
    5. In the pasted code, replace childDatapageURL with the URL of your deployed child DataPage.
    6. In the footer, paste the following code:
      Configure Fields wizard view showing the code to insert in the footer.

Note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge’s standard feature set. These solutions are provided “as is” without warranty, support, or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully. 

For assistance with further customization based on your specific application requirements, please contact our Professional Services team. 

code1
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.1/iframeResizer.contentWindow.min.js" type='text/javascript'></script>
code2
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.1/iframeResizer.min.js" type='text/javascript'></script>
code3
<iframe src="childDatapageURL" style="width: 100%;">Sorry, but your browser does not support frames.</iframe>
code4
<script>iFrameResize({log:true, sizeWidth:true, sizeHeight: true})</script>