I thought this might be helpful across the board for people developing in Caspio. I've been trying to do a better UI for data entry on web pages that also have to show results in a tabular report.
Since iframes don't reliably pass parameters from parent to child and back it's necessary to sometimes deploy 2 datapages (a Submit or Details and a Tabular) on the same web page. This doesn't really look good from a UI perspective.
This solution requires using bootstrap and jquery but it's fairly straightforward.
One option is to put the the Submit/Details deploy code in the first div with something like class="col-md-3" and the Tabular deploy code in the next div with class="col-md-9" (divs in bootstrap with col classes must add up to 12 but no more than 12, in basic mode). This will put the 2 datapages next to each other, the 1st with 1/4 screen width and the 2nd with 3/4th. However, this setup looks cluttered and can constrain the Tabular report which often needs full page width to show its data clearly.
So the ideal would be to onload hide/collapse the first div (with the Submit/Details form) and have the second div (tabular report) a full 12 columns wide. Then click a button or link to show the 1st div (Submit form) and change the 2nd div (tabular report) to 9 columns, thereby displaying both datapages when data entry/edit is needed. Clicking the button/link again (in this method) will collapse div1 and expand div2 back to 12 columns. So it's easy to toggle views this way.
To do this:
Put this in the body of your webpage (you may have bootstrap and jquery referenced differently):
<div class="col-md-3 bg-faded">
<div id="showsubmitform" class="collapse">
Caspio Deploy Code for Submit/Details form
<div class="col-md-12" id="right">
Caspio Deploy Code for Tabular Report
And then put a button or link elsewhere on your page, wherever you want to show it:
<a class="btn page-action" id="btnSwitch" href="#showsubmitform" style="color:green;" data-toggle="collapse"><i class="fa fa-plus" aria-hidden="true"></i> Submit New Data</a>
When the page is loaded the Tabular Report will be the only datapage showing, in full width.
When the 'Submit New Data' link is clicked the Tabular Report moves to the right and shrinks to 9 columns from 12. The space that opens on the left is 3 columns wide and will now show the Submit/Details form.
When the 'Submit New Data' link is clicked again it will hide the Submit/Details form and expand the Tabular Report back to 12 full columns.
You can change the column numbers of the divs and button ids and labels to suit. This solution might help with some UI massaging, if anyone is working on that aspect of their app...