How to Make Search Panel Always Collapsed in the Web Applications that Generated by PHPMaker 10.0.4

As we have already known, PHPMaker will generate the List page that contains Search Panel which has the ability to automatically expand its panel when the search criteria has been entered by users, or even has been defined from PHPMaker side. In other words, this Search Panel can be collapsed when the List page is initially being loaded, but when the user has entered the search criteria inside the panel, it will automatically be expanded.

The next question is, can we make the Search Panel always collapsed, regardless the search criteria has or has not been entered/defined? Sometimes, this ability is needed, especially if you want to save the vertical space in your page. Now let's go back to the question above! The answer is of course Yes!.

I will show you how to make this comes true in PHPMaker 10. No need to customize the generated code. No need to customize template. All we have to do is to write some lines of code into the Client Scripts.

[hidepost]

1. Go to Tools -> Advanced Settings, then make sure you have enabled Initiate search panel as collapsed. This is important to make sure that the search panel will be collapsed when the List page is initially being loaded.
2. Assume we want to add this ability into the cateogries table. Then simply add the following code under Client Scripts -> Table-Specific -> List Page -> Startup Script:

   $(document).ready(function() {
   	$('#fcategorieslistsrch_SearchBody').removeClass('accordion-body collapse in').addClass('accordion-body collapse');
   });
   

3. Re-generate ALL your script files using PHPMaker as always. 🙂

As you can see from that code above, we only need to remove the class accordion-body collapse in that belongs to fcategorieslistsrch_SearchBody, and then add the replacement class named: accordion-body collapse. Yes, we only need to remove the in phrase at the end of phrase.
[/hidepost]