How to show & hide submit & details form on same page as tabular results using div column changes in bootstrap

[DesiLogi]

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="container-fluid">
 <br>
    <div class="row">
        <div class="col-md-3 bg-faded">
            <div id="showsubmitform" class="collapse">
				Caspio Deploy Code for Submit/Details form
			</div>
        </div>
        <div class="col-md-12" id="right">
            <div>
				Caspio Deploy Code for Tabular Report
			</div>
        </div>
    </div>
</div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <script>
  $('#btnSwitch').click(function(){
    $('.col-md-3').toggleClass('show');
    $('#right').toggleClass('col-md-9 col-md-12');
})
  </script>

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...

[Isabelleg]

Really good post ! thanks for sharing.

2 little notes :

- Class='collapse' should be an attribute of <div class='col-md-3'> not its child, because it will break on the second line if you have 3+12 (even if 3 is empty) no ?

- and in style they should add

.collapse {

display:none;

}

.show {

display:flex;

}

 

Now a question on the style of your tabular: is it responsive ? when you scale from 12 to 9, do you change your tabular's layout ? do you set your font to rem, although your viewport doesn't change, just the width of the div ...?

I am really eager to exchange on the subject, as I am trying to get the best UI possible in a responsive layout using bootstrap (and it seems that it is your goal too!)

Please link back to me so we can brainstorm on the subject.

Best,

And again thanks for sharing !

[DesiLogi]

Hi Isabelleg,

Glad you found the technique helpful. Re the 3 + 12 issue, that's the only way I could get it to work and it doesn't end up breaking on any lines. I'm sure you have a good point but this was how it ended up working for me. 

Re responsive datapages, I didn't end up making these datapages responsive as they are very data rich and more confusing than not if they go to responsive (there are also navigation buttons in a lot of places, some on the host page). 90% of the users use the app on a regular computer so for functionality (and because I sometimes ran out of room for code in the headers) I left the pages as-is. They adjust to this 12 to 9 col fine though (and as a note I made a set of dedicated datapages just for mobile that is responsive- it was easier to separate them).

[Isabelleg]

thanks for getting back so quickly !

interesting.

when you talk about "host page" are you referring to a CMS ? or are you coding from scratch ?

trying to get some ideas on how to fully integrate Caspio's DP with bootstrap (and not using their tech-tip for responsive layout).

If you have any insight ..

[DesiLogi]

Sorry it took me so long to get back on this. When I say 'Host Page' I mean a 'flat' html page that I've put the Caspio deploy page onto. After much trial and error I've found a lot of 'best practices' with Caspio and one of them is to keep the web pages and navigation the datapages on as simple as possible (meaning not a lot of extras that require js and css as it really adversely affected the datapages a lot). 

Re bootstrap, from my understanding there's not a lot of reason to use it unless you also make the datapages responsive. My app is kind of huge and mostly used on a laptop or desktop (lots of data, needs big space) so I didn't make it responsive- except for a dedicated mobile version of some of the datapages so people could get it on their phone in limited ability. It's really a matter of prioritizing to what the users will actually be doing. 

Hope this helps a bit and good luck!