Jump to content
  • 0

Show or Hide Search in datapage header




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)
caspio Results deployment code (datapage 2) 

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


Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 1


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.


Link to comment
Share on other sites

  • 0

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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...