Show or Hide Search in datapage header

[DesiLogi]

Hello,

It's great that you can now show the Search form in a datapage's header in CB 15. However, to make this really work you need to be able to show/hide it.

The problem to using the Search form in the header is that if you have a lot of search fields the Search form needs to be hidden until it's needed- otherwise it will take up too much screen space and clutter the page. 

I currently use 2 datapages- a Search form and the Results datapage. I have to put the Search form separately on the same html host page, but hidden so it doesn't clutter up the page. The user clicks a 'Filter' button and then it appears. They click it again and it's hidden. This way they have a clean, controllable view. 

Is there a way to use code to do the same thing but with the new 'show Search form on Result's page' option?  I don't know how to modify the Style or datapage's header to do this. 

I use the below code on the same html page (video of how it looks attached): 

<div id="filter" class="collapse">
caspio Search deployment code (datapage 1)
</div>
<div>
caspio Results deployment code (datapage 2) 
</div>

<a href="#filter" data-toggle="collapse" style="color:green;"><i class="fa fa-filter" aria-hidden="true"></i> Search/Filters</a>

It's possible to use a Virtual field in the Search form and Rules to show/hide the Section the search fields are in. But this doesn't look very good and is somewhat clunky as you can only use a check box or radio buttons. Really, the 'Search/Filters' choice should be a link like the normal Search link. I hope someone knows how to do this and thanks for any help. 

 

[douvega]

Hi,

Have you tried to use your same div tags but in datapages header and footer?

I mean, in the search configuration wizard, you should add Header/Footer and disable the HTML editor of these fields.

Then, in the header you put <a href="#filter" data-toggle="collapse" style="color:green;"><i class="fa fa-filter" aria-hidden="true"></i> Search/Filters</a><div id="filter" class="collapse">

In the Footer, you close the div by using </div>

If that one does not work, then we can try to loop through the HTML by using JS and get the table id by using the AJAX event handlers and add and .hide() or show() with jQuery.

Hope to hear from you soon.

Regards

[DesiLogi]

Hi Douvega,

This works shockingly well- I didn't try my existing show/hide code because I just assumed it wouldn't work, as Caspio's datapages often don't do what I think they will do. Thanks very much for pointing this out and I hope others can use this because it really makes for a nicer user experience. 

Once quick question- what's the best way to get the 'Search/Filters' label of the link centered in the header? Put the link code in a table and center it? 

EDIT: no worries re centering. I just used style="text-align:center" in a div around the link. Thanks again for the tip!