Customizing Filter Panel in Websites that Generated by PHP Report Maker 6.0.0

After customizing Page Title style in the previous article, now we are going to customize the style of Filter panel in websites that generated by PHP Report Maker. Just like the customization for Page Title, we will add outline border around the Filter panel area. This will make your Filter panel become more eye-catching.

In addition, this customization also will give you the ability to define the initial state for your Filter panel; whether collapsed or expanded, without having to re-generate your script files each time you switch it from one to another. Simply adjust the related constant in your configuration file, then you will get the result at that time.

[hidepost]

1. Open your \Script\rpt-config.php file, and find this code:

   // General
   

   before that line, please insert the following code:

   // Begin of modification Customizing Search Panel, by Masino Sinaga, for Customizing Search Panel, December 3, 2012
   define("MSR_SEARCH_PANEL_COLLAPSED", FALSE, TRUE); // Whether to collaps or expand the search panel
   // End of modification Customizing Search Panel, by Masino Sinaga, for Customizing Search Panel, December 3, 2012
   

2. Open your \Script\rpt-addon.js file, and find this code:

   <!--## if (PROJ.GetV("SearchPanelCollapsed")) { ##-->
   // Init search panel as collapsed
   if (<!--##=sFormName##-->) <!--##=sFormName##-->.InitSearchPanel = true;
   <!--## } ##-->
   

   then replace it with the following code:

   <?php // Begin of modification Customizing Search Panel, by Masino Sinaga, December 3, 2012 ?>
   <?php if (MSR_SEARCH_PANEL_COLLAPSED) { ?>
   // Init search panel as collapsed
   if (<!--##=sFormName##-->) <!--##=sFormName##-->.InitSearchPanel = true;
   <?php } else { ?>
   // Init search panel as expanded
   if (<!--##=sFormName##-->) <!--##=sFormName##-->.InitSearchPanel = false;
   <?php } ?>
   <?php // End of modification Customizing Search Panel, by Masino Sinaga, December 3, 2012 ?>
   

3. Now we will add our new style to the .css file that will be generated by PHP Report Maker. This will beautify your search panel by adding colored background and outlined around its panel. From your PHP Report Maker application, go to HTML tab, click on Styles sub-tab, and then click on Edit Styles button. You will see a CSS Editor window afterwards. Scroll down to the bottom of that textbox, and find this code:

   /*END_USER_STYLES*/
   

   before that line, please insert the following code:

   /* Begin of modification Customizing Search Panel, by Masino Sinaga, December 3, 2012 */
   .msSearchPanel {
     background-color: #EEEEEE;    
     padding: 0.5em;    
     border-left: 1px solid #CACACA;    
     border-right: 1px solid #CACACA;    
     border-top: 1px solid #CACACA;    
     border-bottom: 1px solid #CACACA;    
     text-align: left;    
     font-family: tahoma; /* font name */    
     display: block;  
     vertical-align:top;
   }
   /* End of modification Customizing Search Panel, by Masino Sinaga, December 3, 2012 */
   

4. Open your \Script\rpt-extfilter.php file, and find this code:

   <a href="javascript:<!--##=sFormName##-->.ToggleSearchPanel();" style="text-decoration: none;">
   

   then replace it with the following code:

   <a href="javascript:<!--##=sFormName##-->.ToggleSearchPanel();" style="text-decoration: none;" id="searchPanelAnchor">
   

5. Still in \Script\rpt-extfilter.php file, find again this code:

   <div id="<!--##=sFormName##-->_SearchPanel">
   

   then replace it with the following code:

   <div id="<!--##=sFormName##-->_SearchPanel" class="msSearchPanel">
   

6. Finally, re-generate your script files using PHP Report Maker as always.

[/hidepost]