Adding sidebar filters in your extension Joomla 3.0 style

Joomla 3.0 introduces an awesome Bootstrapped UI in the backend. As part of the standardization introduced to make Joomla easier for end users, its expected that list filters are shown on the left. Its imperative that you get your extensions to start following this UI standardization or your extension will stick out like a sore thumb!

Here's a blog post by our Dev Amol on how you can introduce these filters easily in your own extensions!

Parth

 Creating a component for Joomla 3.x and wondering how to add Sidebars? Here's a quick tutorial as to how you can do just that!

Step 1 Create the componentName.php fille on path

yoursite/administrator/components/com_componentName/helpers/

Step 2  Add function 'addSubmenu' in file componentName.php

class ComponentNameHelper
{
    public static function addSubmenu($vName = '')
    {
        if(JVERSION>=3.0) //Code support for joomla version greater than 3.0
        {
            JhtmlSidebar::addEntry(  
                JText::_('COM_COMPONENT_NAME_LANGUAGE_CONSTANT'),
                'index.php?option=com_componentName&view=viewName',
                $vName == 'dashboard'
            );
        }
    }
 }
    //JText::_('COM_COMPONENT_NAME_LANGUAGE_CONSTANT')  ; language constant for menu name
    //'index.php?option=com_componentName&view=viewName'  ; menu link
    // $vName ;  view Name

Step 3 Create the view.html.php fille on path

yoursite/administrator/components/com_componentName/views/viewName/

Step 4 add this code in file view.html.php

//code loading submenu
$ComponentNameHelper=new ComponentNameHelper();
$ComponentNameHelper->addSubmenu('viewName'); //pass the view name

Step 5 Create the default.php (layout file) fille on path

yoursite/administrator/components/com_componentName/views/viewName/tmpl/

Step 6 Add this code code in  (layout file) default.php file immediately after form tag

<?php if (!empty( $this->sidebar)) : ?>
<div id="j-sidebar-container" class="span2">
<?php echo $this->sidebar; ?>
</div>
<div id="j-main-container" class="span10">
<?php else : ?>
<div id="j-main-container">
<?php endif;?>