Gridview: agregar botones al ActionColumn

Buenas!

Hace unos días, como parte de los comentarios de la entrada Relaciones entre entidades: Parte II uno de los compañeros planteaba la duda de ¿Cómo agregar más botones al ActionColumn de un GridView? y, tal y como le contesté, quedó pendiente escribir un post de cómo hacer esto, así que con esta entrada os mostraré un ejemplo práctico de cómo hacer esto.

Para el ejemplo partiré del proyecto “basic” con el que veníamos trabajando en las entradas anteriores y el caso práctico de hoy consistirá en, añadir dos campos más a la clase del modelo User, concretamente web (link al sitio web del usuario) y twitter (link al perfil de twitter del usuario) y mostrarlo en el GridView del listado de usuarios como campos adicionales a los 3 que tenemos ya por defecto (Ver detalles, Editar yEliminar).

actioncolumn1

Entorno de desarrollo

  • OS X Yosemite (10.10.3) – SSOO
  • MAMP (3.2.1) (PHP 5,6,7, MySQL 5.0.11-dev y Apache 2.2.29) – Lenguaje, Servidor y gestor de bases de datos).
  • Sublime Text (3) – Editor de texto
  • Yii Framework (2.0.4) – Framework de desarrollo PHP
  • Composer (1.0-dev) – Gestor de dependencias para PHP

Preparando nuestro modelo:

Lo primero que vamos a hacer es crear las dos columnas nuevas en la tabla user de la BBDD desde nuestro phpMyAdmin:

actioncolumn2

Si habéis seguido las entradas anteriores, concretamente en la que hablé de Gii sabréis que para facilitaros la vida, esta herramienta nos auto-genera el código del proyecto correspondiente a los cambios realizados en la BBDD; de manera que, para ahorraros tiempo podéis utilizarla igual que he hecho yo accediendo a ella desde le navegador: http://localhost/basic/web/index.php?r=gii.

Si vamos al apartado de Model Generator e indicamos la clase del modelo User, vemos que se generan los cambios para User.php donde copiamos y pegamos las dos columnas como parte de las reglas (function rules()) que definen el límite de tamaño del campo:

actioncolumn3

De manera que mi función rules de la clase models/User.php quedaría de la siguiente forma:

actioncolumn4

En la sección CRUD Generator de Gii, obtenemos los cambios para las clases que muestran las vistas de administración:

actioncolumn5

De aquí, para centrarnos en el objetivo de esta entrada: “añadir botones al ActionColumn del GridView del listado de usuarios” he cogido únicamente el código correspondiente al archivo views/User/_form.php, para que podamos hacer una prueba que verifique el funcionamiento de estos campos:

<?= $form->field($model, 'web')->textInput(['maxlength' => true]) ?>

<?= $form->field($model, 'twitter')->textInput(['maxlength' => true]) ?>

Esto es lo que yo he añadido y es suficiente para cumplir nuestro objetivo, pero si queréis podéis añadir el resto de código de esos ficheros para ampliar las funcionalidades del proyecto.

Vamos a comprobar que los campos que hemos añadido funcionan correctamente y vamos a crear un usuario con valores para estos campos:

actioncolumn6

Si tras pulsar “Create” consultamos la información en nuestro phpMyAdmin con la que el usuario ha sido creado (recordad que estos campos no los vamos a mostrar en ningún sitio sino que los vamos a utilizar como links en dos botones del action columns), vemos que efectivamente la información queda almacenada correctamente:

actioncolumn7

Agregando botones al ActionColumn

Vamos con el objetivo del post: añadir nuevos botones al ActionColumn del GridView que muestra el listado de usuarios

Para esto solo hay que modificar el fichero views/User/index.php substituyendo la actual línea de código que cargas los ActionColumns:

['class' => 'yii\grid\ActionColumn'],

Por el siguiente código:

actioncolumn8

De manera que cuando accedamos ahora a la web veremos que se han añadido dos nuevos iconos para aquellos usuarios que tengan definido el campo Twitter y Web. En mi caso quedaría algo así:

actioncolumn9

Y ¿Qué hace el código?

En cuanto al código añadido os comento en detalle su funcionamiento:

Lo primero que hemos hecho al substituir el código original es sobreescribir la plantilla (template) que por defecto Yii carga para mostrar los ActionColumns dentro de un GridView.

Una vez sobreescrita la plantilla tenemos libertad para indicar qué es lo que queremos concretamente modificar de la plantilla original, en este caso los botones con identificador “{twitter}” y “{web}” indicado en el campo ‘template’.

Por último, hago referencia a cada botón dentro del campo ‘buttons’ y digo cómo quiero que se comporte:

'web' => function ($url, $model, $key) {
return $model->web != '' ? Html::a(
'<span class="glyphicon glyphicon-globe"</span>',
$model->web) : '';
},

En este caso, mostrando un link (Html::a) cuando el campo NO sea vacío y definiendo un aspecto para ese link que, por seguir la estética que propone Yii, se trata de un icono de los que el framework Bootstrap proporciona (glyphicon-globe y glyphicon-picture) y de los que podéis encontrar modelos aquí.

¿De dónde sacamos esos iconos?

El cómo di con estos iconos fue bastante sencillo: como tampoco intentaba buscar ninguna imagen concreta y quería buscar iconos que siguiesen la estética actual, simplemente inspeccione uno de los iconos que ya existía con la herramienta de inspección de código del navegador (en mi caso Google Chrome) y ví que los links se generaban con una etiqueta <span class=”glyphicon …”/> que era la que definía la imagen del link.

actioncolumn10

A continuación busqué esta clase en Google (“glyphicon glyphicon-eye-open” para el caso de la imagen más arriba) y vi que la primera entrada y la segunda ya hacían referencia al juego de iconos del framework.

Y eso es todo por hoy! Recordad que podéis encontrar el código del proyecto con esta última modificación en este repositorio.

Un saludo!

Acerca de vicmonmena

Just trying to contribute with my code to make this world easier
Esta entrada fue publicada en Desarrollo web, yii y etiquetada , , , , , . Guarda el enlace permanente.

3 respuestas a Gridview: agregar botones al ActionColumn

  1. mauroblim dijo:

    hola una vez mas, vengo con otras dudas y espero no ser molestia. no se como usar el composer, lo tengo todo instalado pero a la vez de usarlo para actualizar los paquetes o instalar nuevos me da una informacion de tokens hiden que no se que ponerlo, y si es posible como instalar los las extensiones manualmente, se que es bien probable que sea mucho mas dificil y lento el proceso pero es algo que tengo que saber dado a la situacion en la que me encuentro, estoy en cuba y el acceso al internet es muy limitado aparte de lento, entonces me aparecen problemas donde se suponen que no tienen que haber. y otra cosa es que no se como mostrar en el index o view de una pagina un nombre de una relacion de otras tablas, dejeme explicarme mejor:
    supongamos que tenemos 3 tablas (continente, pais y ciudades)
    en ciudades guardo la id de la ciudad, las ciudades y la id de paises
    en paises la id, los nombres de los paises y la id de continentes
    y en continentes la id del continente y el nombre del continente
    y quiero mostrar en el view o index de ciudades el nombre del continente que tengo en paises, pero en paises lo que tengo no es el nombre del continente, es el id del continente, que se haga desde la relacion con paises y no desde continentes que si me aparece el nombre pero no el de la relacion sino un nombre cualquiera que parece ser que lo coge por la id (autoincremental).
    Saludos a todos

    • vicmonmena dijo:

      Hola mauroblim

      Disculpa la tardanza. ¿Puedes dar más detalles sobre el problema con composer? Tal vez escribiendo los pasos que sigues y el mensaje del error concreto puedo echarte una mano.

      En cuanto a la instalación de dependencias, normalmente cuando vas a instalar una extensión de yii suelen indicarte el comando que debes ejecutar, por ejemplo: para la extensión “Kartik – GridView tienes esta guía: http://demos.krajee.com/grid

      De cualquier forma, lo más aconsejable es consultar la documentación de la herramienta: https://getcomposer.org/doc/00-intro.md

      Sobre las relaciones, creo que te refieres a lo que explico en el post “Relaciones entre entidades: Parte II” https://vicmonmena.wordpress.com/2015/07/18/relaciones-entre-entidades-parte-ii/ ; no obstante, si no has seguido los pasos del post Relaciones entre entidades: Parte I es aconsejable para que entiendas algunas cosas que se explican en la segunda parte.

      Espero haberte ayudado,

      Un saludo.

      • lo del composer dice para introducir el hiden token, pero lo que mas problemas me da es que lo uso desde una conexión lenta y con proxy, lo tengo todo configurado pero a la hora de actualizar o instalar un paquete hace casi todo el proceso y cuando parece que se acabó, me pide que introduzca el token (hiden), que me parece que es porque no he configurado el Github, ya lo tengo instalado pero no se como configuralo bien, para usarlo.

        Lo de instalar manualmente las extensiones me refería a instalarla offline, sin el composer, pero veo que no me queda mas remedio que luchar con el composer y aprendérmelo.

        Lo de las relaciones hice un pequeño proyecto para ver si con el me puede entender, el punto es mostrar en la view e index de ciudades el nombre del continente que pertenece el pais de la ciudad en cuestion, lo puedo hacer que muestre el id, pero ese no es mi punto.

        Espero que no sea demasiada molestia, pero creo que con lo de las relaciones y aprender a usar el composer para instalar las extensiones, las dudas serán mas especificas y maduras. abajo delo el link del priyecto. Especial Saludos

        https://drive.google.com/open?id=0B1Sy_aoHbczpVVBqSUhsWlpqS1k

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s