EFilterWidget

De Yii Framework en Español
Saltar a: navegación, buscar

EFilterWidget

Es un widget que permite agilizar consultas de los usuarios, permitiendoles especificar valores que serán consultados via ajax para mejorar el resultado del cliente.

EFilterWidget.png

Esta es la ruta del repositorio oficial, de donde podrás ver un ejemplo de como implementar, es muy sencillo. https://bitbucket.org/christiansalazarh/efilterwidget


Inserta el widget en una vista

 
<?php                                                                          
    $this->widget('ext.efilterwidget.EFilterWidget'
    ,array(
        'id'=>'efilterwidget1',
        'findButtonLabel'=>'Find>>',
        'okButtonLabel'=>'OK',
        'fields'=>array(
            'year'=>array(
                    'ui'=>'text',
                    'label'=>'Year:',
                    'value'=>'',
                    'size'=>10,
                ),
            'month'=>array(
                    'ui'=>'list',
                    'label'=>'Months:',
                    'value'=>'FEB',
                    'size'=>10,
                    'options'=>array(''=>'??','JAN'=>'Enero','FEB'=>'Febrero'),
                ),
        ),
        //  use this attribute to pass any data readed from your Form.
        //  suppose you have $form->textField($model,'anyattribute');
        //  containing a value to be passed back to your action in order
        //  to perform a search.
        //
        //  in your action this value is passed via 'arg' attribute name
        //  $_GET['arg']  
        //
        'actionInputArgumentID'=>'Form_anyattribute',

        'action'=>array('site/efilterwidgetsample'),
        'receptorId'=>'testValue',
        'onSuccess'=>"function(data){ $('#logger').html(data); }",
        'onError'=>"function(err){ $('#logger').html('error: '+err);  }",
        'backgroundColor'=>'#ccffee',
    ));
?>  
<div id='logger'></div>
<?php 
    echo "Example text field receptor:";
    echo CHtml::textField('testValue','');
?>

Crea el action de respuesta para el widget

Es importante que devuelvas contenido JSON sino no funcionara. Lo que se hace aqui es recibir los argumentos del formulario los cuales puedes obtener usando $_GET['nombreargumento'] donde "nombreargumento" es aquella entrada del atributo 'fields' del widget. Para conocer todos los atributos enviados al action puedes usar $_GET['keys'] el cual dara una lista separada por comas con los keys enviados.

Debido a que el widget espera que le devuelvas contenido para llenar un SELECT es necesario que devuelvas lo que la clase CHtml::listData devolverá al recibir un array con el resultado que tu le quieres enviar de regreso al widget.

 
<?php
// in any controller, please be consistent with 'action' parameter on widget.
//
public function actionEFilterWidgetSample(){
    $keys = explode(",",$_GET['keys']);
    $anyValue = $_GET['arg'];  // value readed from FORM referenced by: actionInputArgumentID
    $sample = array(
         array('userid'=>'U1', 'name'=>'christian')
        ,array('userid'=>'U2', 'name'=>'anahi')
        ,array('userid'=>'U3', 'name'=>'pedro')
        ,array('userid'=>'U4', 'name'=>'lisbeth')
    );
    header("Content-type: application/json");
    echo CJSON::encode(CHtml::listData($sample, 'userid', 'name'));
}
?>

Caso de Ejemplo Real

Así luce un formulario real que le pide al usuario una cedula y la fecha para consultar sus marcajes de horario laboral:

EFilterWidgetEjemplo1.png

Como ves aqui, el empleado de RRHH deberá adivinar la fecha para la cual consultar al empleado, por tanto será util que le proveamos una manera de saber que fechas tiene activas...pueden ser cientos..por tanto el formulario debera pedir el año y el mes al menos y tras presionar "Buscar fechas" se le da una lista de fechas listas para seleccionar.

EFilterWidgetEjemplo2.png

Al poner el año y el mes, se envian estos datos al action, el cual dara una lista de "todas las fechas" en donde tal empleado consultado tiene marcajes, para entonces poder darle una lista al usuario de rrhh de la cual pueda seleccionar de forma mas efectiva.

El diagrama de componentes UML de esta cosa

EFilterWidgetDiagComp.jpg

Se lee asi:

1) El empleado de recursos humanos usa el formulario FormConsultaCliente, el cual cotiene insertado un Widget llamado EFilterWidget que recibe como argumentos "año" y "mes", esperando recibir de el la "fecha_seleccionada".

2) El widget tras accion "Find" del usuario de recursos humanos dispara un evento que envia una consulta ajax al actionFiltrarFechasEmpleado.

3) El action actionFiltrarFechasEmpleado devuelve un JSON ARRAY con los datos para llenar el SELECT de EFilterWidget,

4) El usuario de recursos humanos hace click en una fecha, el widget establecerá automaticamente el control de fecha_seleccionada con el valor seleccionado.