Mostrar Thumbnail en la Grilla de nuestro Componente Listing en Magento2

Para poder mostrar un Thumbnail  en la grilla de nuestro componente UI listing  en Magento2 realizaremos los siguientes pasos:

  • Incluiremos una nueva columna a nuestra grilla que será la que muestre el campo imagen. Para eso editamos nuestro fichero listing ubicado en view/adminhtml/ui_component/ e incluimos la nueva columna.
  • Crearemos la clase Thumbnail encargada de manejar los datos para la columna de imagen. Esta la crearemos en Ui/Component/Listing/Column/ y se encargará de preparar los datos para poder interpretarlos en el campo de imagen.

¿Como funciona la clase?

  • Todos las columnas extienden la clase Magento\Ui\Component\Listing\Columns\Column
  • Usando el método prepareDataSource() obtenemos los datos de cada fila para poder filtrar y preparar los datos que serán mostrados en la columna seleccionada.
  • En mi caso necesito deserializar el campo de imagen ya que guarda un array de datos con toda la información de la imagen (nombre, url, tipo, etc ..).
  • A continuación rellenamos el template que se encarga de completar los atributos de la etiqueta <img> en la fila seleccionada de la grilla.

Los Templates del componente UI de magento2 que se utilizan son:

  • module_ui/view/base/web/template/grid/cells/thumbnail.html que se encarga de mostrar la etiqueta imagen y sus atributos.

  • magento/module_ui/view/base/web/template/grid/cells/thumbnail/preview.html que se encarga de mostrar los datos que se mostrarán en el popup de la imagen.

El resultado que obtenemos es el siguiente:

Etiquetado

Deja una respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.