Archivo de March 2009

04 03 2009

Improving symfony backend filters. Taking advantage of the screen using a window

Escrito por RickArt en development, symfony, tags: , ,

When we started to use the backend generated by Symfony, the first thing we noticed is a block of filters that reduce the capacity of expansion of primary data.

Solution: Use a window to show the filters.

By doing so we can expand the data horizontally. The filters will be displayed/hidden through a filter button.

Configuring JQuery and JQueryUI is very simple. We only have to:

  • download the packages and extract the contents in [symfony_project]/web/js/jq 
    /js/jq/jquery.js
/js/jq/jquery-ui.js
/js/jq/theme/*
  • configure the view.yml of our app to include the new libraries: 
    stylesheets: [main, admin, ../js/jq/theme/ui.all.css]
javascripts: [main, jq/jquery-ui]
A feature of this configuration is that we must have a toggle button that allows to change the visibility of the window filters. For a configuration similar to the first snapshoot our layout.php will be similar to:
<div id="menuwrapper">
  <ul>
     <li><?php echo link_to('Píldoras', '@lib_pill'); ?></li>
     <li><a href="#">Atributos</a>
     ...
     // Rest of menu
  </ul>
  <ul style="float:right">
    <?php if (sfContext::getInstance()->getActionName() == 'index'): ?>
      <li>
        <?php echo link_to_function(__('No active filters'),
                                    'showFilters()',
                                    array('id'=>'filters_link'));
        ?>
      </li>
    <?php endif; ?>
    <li class="dark"><?php echo link_to('Cerrar sesión', '@signout'); ?></li>
  </ul>
</div>

<div id="content">
  <?php echo $sf_content ?>
</div>

...

It's important to pay attention at the first condition to ensure that this button is showed only when we are in a listing.

The function that is called from the button must be defined in anywhere, for example main.js or admin.js. The code of this function must be: (Please note that we have previously included the jQuery libraries)

function showFilters (module)
{
	var action = ($("#sf_admin_bar").dialog('isOpen'))? 'close':'open';
	$("#sf_admin_bar").dialog(action);
}
Finally, in order to run the filters in this new form, we take advantage of the way in which Symfony generates the code, its nomenclature and the capabilities of jQuery to traverse the elements of HTML items. The final layout.php shines as follows:
// Menu configured as we have said previously

<div id="content">
  <?php echo $sf_content ?>
</div>

<?php if (sfContext::getInstance()->getActionName() == 'index'): ?>

<script type="text/javascript">
  $("#sf_admin_bar").dialog({
                           autoOpen: false,
                           width: 600,
                           height: 500,
                           title: '<?php echo __('Filters') ?>' });

  var hasFilter = false;
  $("*[id*='lib_<?php echo sfContext::getInstance()->getModuleName(); ?>_filters']").each(function(i)  {
    if (this.name.indexOf('[is_empty]') != -1) {
      if (this.checked) {
        hasFilter = true;
      }
    }
    else if (this.value.length > 0) {
      hasFilter = true;
    }
  });

  if (hasFilter)
  {
    $("#filters_link").text('<?php echo __('There are active filters'); ?>');
    $("#filters_link").css('background-color','#F1B2B2');
  }
</script>

<?php endif; ?>
Voilà:


This fragment is valid for all modules because it uses the function getModuleName(). When there are active filters, we change the background color of filters-toggle button to notify the user.
Enjoy !

Comments 3 Comentarios »