Entendiendo las Vistas en Drupal 8

Vistas ofrece una interfaz fácil de usar para seleccionar y mostrar listas de contenido en tu sitio web.

Los ejemplos de cómo utilizar Vistas incluyen:

  • Mostrar los artículos de noticias más recientes publicados en tu sitio web, ordenados en orden descendente por la fecha de publicación.

  • Mostrar una lista de ubicaciones de la empresa como una tabla que se puede ordenar haciendo clic en los títulos del nombre de la ubicación, la ciudad, el estado y el país.

  • Visualización de una galería de fotos.

  • Visualización de una presentación de diapositivas.

  • Visualización de un calendario.

  • Visualización de una lista de publicaciones de blog que se pueden filtrar por asunto.

  • Creación de un feed RSS que muestre el contenido más reciente publicado en tu sitio web.

  • Mostrando casi cualquier tipo de lista que se pueda imaginar, creada a partir del contenido que se almacena en tu sitio web, como una lista, una tabla o un feed RSS.

En el capítulo sobre tipos de contenido creamos el tipo de contenido Evento. Vamos a ponerlo a trabajar mediante la creación de listas de eventos que serán útiles para los visitantes del sitio utilizando el módulo Vistas. Si no has completado el capítulo sobre tipos de contenido ahora sería un excelente momento para volver a ese capítulo y trabajar con el ejemplo para que tengas el contenido necesario para apoyar las actividades futuras.

1. El módulo Vistas

Vistas es un módulo básico de Drupal 8 y está habilitado de forma predeterminada durante la instalación. Para comprobar que Vistas está instalado y habilitado, haz clic en el enlace Administrar en la parte superior de la página y en la opción Extender del submenú. Mediante la función búsqueda de la página Extender, ingresa Vistas en el cuadro de búsqueda. Si el módulo Vistas existe, deberías ver dos módulos listados como se muestra en la figura 9-1. Si una de las casillas de verificación está desmarcada, márcala y haz clic en el botón “Guardar configuración”.

Figura 9-1.

El módulo Vistas es el componente detrás de la escena que maneja la extracción y visualización de contenido de la base de datos. El módulo de interfaz de usuario Vistas, es la interfaz del administrador para crear y configurar vistas.

2. Creando tu primera vista

Con Vistas instalado y habilitado, estamos listos para continuar. Pero una vista sin contenido es sólo una página en blanco, por lo que el primer paso es crear algún contenido. Hemos creado varios artículos antes de este capítulo, así que utilicémoslos como base para nuestra primera incursión en las vistas. Si saltaste los ejercicios anteriores o has eliminado los artículos que habías creado, tómate un momento para crear varios.

Ahora vamos a crear una vista que mostrará una lista de artículos. Haz clic en el enlace Administrar en la parte superior de la página, en el enlace Estructura en el menú secundario y, a continuación, en el vínculo Vistas. Observarás que ya hay varias vistas enumeradas en esta página. Estas son vistas que forman parte del núcleo de Drupal y proporcionan listas de elementos como contenido reciente, comentarios recientes, quién es nuevo, quién está en línea y otros.

Reconocerás la salida de algunas de estas vistas si viste el capítulo 8, ya que éstas son las vistas que generan la salida que se muestra en varios de los bloques que usamos en ese capítulo.

Para agregar una vista, haz clic en el botón “Agregar nueva vista” en la parte superior de la página, que muestra la página para crear una nueva vista (ver figura 9-2). En esta página define lo siguiente:

  • Nombre de la vista: el nombre debe ser único (un nombre que no se ha utilizado por otra vista de tu sitio). Es una buena idea escoger un nombre descriptivo que transmite el propósito de la vista para que otros que buscan en la lista pueda identificar fácilmente la forma de uso. Para la primera vista, usa Artículos Recientes como nombre.

  • Descripción: este es otro campo que puedes utilizar para proporcionar información adicional de la vista. Marca la casilla junto a Descripción e ingresa “Una lista de artículos recientes publicados en el sitio”.

  • Configuración de la vista: este grupo de campos define qué tipo de contenido va a ser representado por la vista. Si haces clic en la lista Mostrar, verás varias opciones como Contenido, Entradas de registro, Archivos, Comentarios, Revisiones de contenido, Términos taxonómicos y Usuarios. El enfoque de nuestra visión es el contenido del artículo, por lo que selecciona Contenido. En el campo “de tipo”, selecciona Artículo, el nombre de nuestro tipo de contenido. El campo “etiquetado con” proporciona la capacidad de limitar los resultados de nuestra vista sólo a los artículos que contienen dichos términos. Saltaremos el campo “etiquetado con” y pasaremos a la opción “ordenado por”. Elige “Sin clasificar” (veremos la clasificación más adelante).

  • Ajustes de la página: Vistas permite crear una lista de contenido y tener esa lista disponible como una página independiente en tu sitio accesible a través de una URL. Para fines de demostración, marca la casilla “Crear una página”. A continuación, debes introducir un título de página (o mantener el valor predeterminado) e introducir una ruta URL para llegar a la lista (o mantener el valor predeterminado). En el formato de visualización, déjalo como una lista no formateada de teasers, y establece los elementos para mostrar en 10 con “Utilizar paginador” marcado. Esto hará una lista de artículos; si hay más de 10 artículos en la lista, aparecerá un paginador en la parte inferior de la lista para permitir al visitante ver todos los artículos, 10 cada vez.

  • Configuración de bloque: vimos los bloques en el capítulo 8, pero para fines de demostración, permitiremos que nuestra vista cree un bloque (un elemento de nivel de página que se puede colocar en cualquier parte de una página) que enumere los últimos tres eventos. Marca el cuadro “Crear un bloque” e introduce un título de bloque (o guarda el valor predeterminado), deja el formato de visualización como una lista de títulos sin formatear (enlazada) y establece los elemento por bloque en 3. Deja la casilla “Utilizar paginador” desmarcada.

Figura 9-2.

Clica en “Guardar y editar” para proceder. El siguiente paso es configurar tu vista, tal y como se muestra en la figura 9-3.

Figura 9-3.

A primera vista, la forma de definir una vista parece compleja y abrumadora. Afortunadamente, las apariencias engañan.

La primera cosa que verás en la parte superior del formulario de configuración de vista es una lista de visualizaciones. En nuestra vista de ejemplo, tenemos una página y un bloque. Una de las características de gan alcance de Vistas es la posibilidad de tener una sola vista y múltiples visualizaciones. Ejemplos de los tipos de visualizaciones que podríamos usar para artículos recientes incluyen:

  • Una pantalla de página completa que muestra todos los detalles de cada artículo publicado en el sitio.

  • Un bloque que enumera los 5 artículos más recientes, mostrando sólo el título de cada artículo.

  • Otro bloque que enumera los 5 artículos más recientes, mostrando el título y una versión abreviada del cuerpo del artículo.

  • Otro bloque que enumera los 10 artículos más recientes, que muestra el título, la fecha en que se publicó el artículo, el autor que escribió el artículo y una versión abreviada del cuerpo del artículo.

Esta vista individual se puede utilizar para crear varios tipos diferentes de visualizaciones que muestran cada artículo en formatos ligeramente diferentes.

Comenzaremos por definir las dos visualizaciones, Página y Bloque, que fueron creadas automáticamente por Vistas cuando seleccionamos las opciones en la primera pantalla de configuración (ver figura 9-2). Vamos a agregar otras a esa lista de visualizaciones.

2.1. Visalización de Página

Vamos a definir primero la visualización de página.

Haz clic en el botón Página que aparece debajo de Visualización para configurar la pantalla Página. En esta página se mostrará el artículo completo, que incluye el título, el cuerpo, el autor del artículo y la fecha y hora de su publicación. Trabajemos de arriba a abajo, de izquierda a derecha a través de los parámetros de configuración que necesitamos configurar para que esta página muestre lo que queremos:

  1. Cambia el “Nombre de visualización” de “Página” a algo un poco más descriptivo, algo como “Todos los artículos”. Para cambiar el valor, clic “Página” al correcto nombre de visualización y en el formulario pop-up introduce el nuevo valor en el campo “Nombre administrativo”, luego clica el botón Aplicar. Verás que se muestra el nuevo valor en el área de visualizaciones del formularo de edición de vistas, en el campo “Nombre de visualización”, en la columna de la izquierda.

  2. En la sección Título, cambia el título de la vista. Este valor se muestra en la parte superior de la salida generada por Vistas para esta visualización. Vamos a cambiarlo a “Todos los artículos”. Haz clic en “Artículos recientes” y selecciona “Esta página (modificación)” en “Para lista de selección”. Esto significa que los cambios que estamos haciendo a este valor sólo se aplicarán a esta visualización de la vista específica. Si dejas el valor ajustado en “Todas las visualizaciones”, todas mostrarán este nuevo título. Dado que vamos a tener diferentes visualizaciones para diferentes propósitos, “Todos los artículos” es probablemente una mala elección.

  3. En la sección Formato tenemos la opción de generar una lista con diferentes formatos de salida. Haz clic en el valor “Lista sin formato” para ver una lista de opciones de salida:

    • Cuadrícula: la salida se muestra en filas y columnas; en nuestro ejemplo, cada artículo rellenaría una columna en una fila de la cuadrícula. Esta es una gran opción para mostrar fotos en una galería de fotos.

    • Lista HTML: la salida se muestra como una lista ordenada o una lista desordenada. En nuestro ejemplo, cada artículo aparecería como <li> dentro de una etiqueta <ol></ol> o <ul></ul>. Si no estás familiarizado con las etiquetas HTML, consulta el gran tutorial de www.w3schools.com/html o recoge uno de los grandes libros introductorios sobre desarrollo de HTML en www.apress.com.

    • Tabla: la salida se muestra como una tabla HTML, donde cada campo se muestra en una columna. Una taba es genial cuando se desea proporcionar a los visitantes la posibilidad de ordenar la salida de una vista por los valores dentro de una columna.

    • Lista sin formato: la salida se muestra como una lista, pero a diferencia de la lista HTML, no hay etiquetas <ul>, <ol> o <li>.

    Para nuestro ejemplo, dejaremos el valor establecido en “Lista sin formato”. Recuerda seleccionar “Esta página (modificar)” en Para lista de selección al cambiar el valor a algo distinto de “Lista sin formato”. Si haces clic en Configuración a la derecha de “Lista sin formato” verás las opciones de configuración disponibles para ese tipo de lista. Cada una de las opciones tiene su propio conjunto de parámetros que puedes establecer.

  1. El parámetro Mostrar en la sección Formato define cómo queremos manejar el contenido que vamos a mostrar. Las dos opciones más comunes son Contenido y Campos:

    • Contenido: muestra la entidad completa que se está seeleccionando y mostrando. En el caso de los artículos, se mostraría el artículo completo.

    • Campos: te permite mostrar campos específicos de la entidad que estás procesando. En nuestro ejemplo, estamos seleccionando y mostrando artículos. Nosotros podríamos tener una Visualización de Vista donde sólo queremos mostrar el título del artículo y la fecha publicada. Mediante la opción Campos, podemos especificar qué campos se van a mostrar y el orden en que se mostrarán esos campos en la página. Para nuestro ejemplo, seleccionaremos Contenido y mostraremos el contenido en Teasers, una versión abreviada del artículo que muestra los primeros 600 caracteres. Cuando definimos la vista establecimos la página para que se mostrara el contenido en modo teaser, por lo que los valores de Show ya están definidos para nosotros. Si quisiéramos que todo el artículo fuese representado por la vista, haríamos clic en la palabra Teaser y seleccionaremos “Predeterminado” en la lista de modos de vista. Para fines de demostración, deja el modo de visualización establecido en Teaser.

  1. En nuestro ejemplo, los parámetros de configuración “Campos” no se muestran porque vamos a mostrar el artículo completo. Veremos los campos más adelante en este capítulo cuando creemos visualizaciones de bloque.

  2. Criterios de filtro es la siguiente sección a configurar. Puedes restringir qué contenido se representa en la vista agregando criterios de filtro a la visualización de la vista. En la primera pantalla de configuración cuando creamos la vista (ver figura 9-2), seleccionamos la opción Configuración de vista para mostrar sólo Articulos. Seleccionando Artículos establecemos un filtro para mostrar sólo los tipos de contenido del artículo. Además, Vistas también crea un filtro adicional para el contenido que se publica (vs. No publicado). Podemos agregar otros criterios de filtro a nuestras Vistas; por ejemplo, en el caso de artículos, es posible que desees una vista que sólo muestre los artículos que se han publicado en los últimos 30 días. Podemos restringir la salida de la vista agregando criterios de filtro a cualquiera de los valores almacenados en un elemento de contenido. Para fines de demostración, dejaremos solo los criterios de filtro. Veremos la adición de criterios de filtro más adelante en este capítulo cuando creemos visualizaciones de bloques.

  3. La sección Criterios de clasificación proporciona la posibilidad de especificar el orden del contenido de la lista. De forma predeterminada, los valores renderizados se clasificarán en orden ascendente por ID de nodo (el identificador único asignado a cada elemento de contenido por Drupal). Normalmente, desearás establecer los criterios de clasificación por Título, en las listas que desees ordenar alfabéticamente o por Fecha en que se publicó el contenido en los artículos más recientes en la parte superior de la lista.

    Añadamos un criterio de ordenación al título haciendo clic en el botón Añadir a la derecha de la etiqueta Clasificar criterios. Después de hacer clic en Agregar, verás una lista completa de todos los campos que están definidos para tu sitio. Queremos filtrar la lista sólo en campos con “Título” en su nombre. Para ello, ingresa “Título” en el campo de búsqueda y selecciona “Contenido: título” en la lista de campos. En la lista revisada de campos, desplázate hacia abajo hasta encontrar Contenido: Título. Marca la casilla de verificación para ese campo y cambia el valor de la lista para seleccionar en la parte superior del formulario a “Esta página (modificar)” y, a continuación, haz clic en “Aplicar (esta visualización)”. La siguiente pantalla te permite establecer el orden, ascendente o descendente, así como mostrar esta opción a los visitantes del sitio.

    Dejaremos la casilla de verificación “Mostrar” desmarcada para nuestra página de ejemplo, y queremos que los títulos aparezcan en orden alfabético ascendente. Haz clic en “Aplicar (esta visualización)” para continuar. Desplázate hasta la parte inferior de la pantalla y ahora debes ver cómo se mostrará la salida en la página.

    En la segunda columna de opciones de configuración (ver figura 9-3) comenzaremos definiendo los ajustes de página para nuestro ejemplo.

  4. Cada visualización de Vista que es definida como Página debe tener una URL única, especificada en el campo Ruta. Para nuestro ejemplo, utilicemos “/all-articles” como URL. Haz clic en “Sin ruta definida” y en el formulario “La ruta de menú o la URL de esta Vista” escriba todos los artículos en el campo de texto de la ruta. Haz clic en Aplicar para continuar.

  5. El campo Menú nos da la opción de agregar nuestra página de visualización de vista a un menú.

    Para fines de demostración, lo agregaremos al menú “Navegación principal”. Haz clic en el parámetro “No menú” y clica en la opción “Entrada de menú normal”. En la página de configuración para agregar la entrada de menú, ingresa un título, una descripción y selecciona “Navegación principal” como el menú en que se mostrará este elemento. Para los sitios en construcción puedes agregar una página de Vista a un menú distinto del menú “Navegación principal”. Haz clic en Aplicar después de introducir los valores en el formulario.

  6. Vistas proporciona la capacidad de restringir quién puede ver la salida generada por esta pantalla de visualización. Puedes establecer las restricciones de acceso a:

    • Ninguno: cualquiera puede ver la salida.

    • Permiso: el visitante debe ser asignado a un rol que tenga permisos para ver la salida.

    • Rol: el visitante debe ser asignado a un rol específico para ver la salida.

    De forma predeterminada, el valor se establece en Permisos, donde el permiso predeterminado es que el visitante debe tener la capacidad de ver contenido en el sitio (ver figura 9-3). En la mayoría de los casos, los valores predeterminados son apropiados. Para nuestra página de ejemplo, los dejaremos establecidos en los valores predeterminados, en que sólo los visitantes que tengan la capacidad de ver contenido podrán ver la salida de la vista.

  1. El ajuste Encabezado te permite agregar varias cosas a la parte superior de tu vista. Por ejmplo, puedes proporcionar un párrafo introductorio que describa el contenido generado por la vista, o un bloque que hayas definido en tu sitio, la salida de otra vista o varios otros elementos. Haz clic en el botón Agregar y selecciona de la lista de opciones. La opción más común es agregar un párrafo introductorio; para ello, haz clic en la opción “Global: área de texto”, selecciona la opción “Esta página (modificar)” en “Para lista de selección” en la parte superior de la vista. Si deseas que el texto del encabezado se muestre aunque no haya resultados para tu vista, marca la casilla “Mostrar inlcuso si la vista no tiene resultados” y haz clic en “Aplicar (esta visualización)”.

  2. La configuración del pie de página, similar al encabezado, te permite agregar un pie de página a la salida de una vista. Sigue los mismos pasos que se indican en el paso anterior para insertar un pie de página en la parte inferior de la vista.

  3. Si tu vista no devuelve ningún contenido, por ejemplo, no hay artículos publicados en tu sitio, puede alertar al visitante de que no existe contenido al mostrar un mensaje a través de la configuración de “Comportamiento de ningún resultado”. El proceso para crear el mensaje es el mismo que para crear el encabezado y el pie de página. Sigue las instrucciones del paso anterior para agregar un mensaje cuando no se encuentren resultados.

  4. Si tu vista devuelve una larga lista de elementos, considera utilizar un paginador en la parte inferior de la vista y restringir el número de resultados que se muestran en un momento dado.

    Por ejemplo, una vista puede devolver 100 elementos de contenido. En lugar de mostrar los 100 en una lista larga, puedes usar una página para mostrar 10 elementos a la vez, con un paginador en la parte inferior de la vista para navegar por la lista de contenido. La opción de configuración del paginador también proporciona la capacidad de enumerar un número específico de elementos (ej. tres artículos más recientes) o lista de todos los elementos que se ajustan a los criterios de filtro establecidos en la columna anterior.

    En la tercera columna (ver figura 9-3) hay varias opciones de configuración avanzadas, dos de las cuales veremos ahora. Para mostrar las opciones haz clic en Avanzado.

  5. Filtros contextuales es una potente opción de configuración que te permite utilizar los valores pasados en la URL para filtrar el contenido que devuelve la vista. Por ejemplo, es posible que desees limitar los artículos devueltos por nuestra vista a sólo los artículos etiquetados para una categoría específica. Si nuestro tipo de contenido de artículo tiene el vocabulario taxonómico “Evento” como un campo que los editores pueden utilizar para especificar a qué categoría está asociado un artículo, podemos utilizar los valores pasados en la URL para filtrar qué artículos se muestran. Al seleccionar un filtro contextual de “Tiene el ID de término taxonómico” y establecer el tipo de contenido en Artículo, el vocabulario a “Categoría” y el tipo de filtro a “Nombre de término convertido en ID de término”, ahora puedes actualizar el valor de ruta a all-articles%, donde % representa un valor que se pasará a la vista a través de la URL. El beneficio es que podemos tener una vista que puede mostrar cualquier artículo etiquetado por cualquier categoría en nuestro vocabulario taxonómico. Esta única vista puede hacer una lista de artículos sobre Drupal usando una URL como /all-articles/drupal, o todos los artículos sobre dinosaurios usando /all-articles/dinosaurs, o cualquier otro término en nuestro tipo de vocabulario de categoría.

    ¡Asombroso! Pero por simplicidad, no utilicemos filtros contextuales en nuestro ejemplo.

  6. Las relaciones se utilizan en los casos en que es necesario extraer contenido de dos tipos de contenido diferentes para satisfacer los requisitos de una vista específica. Por ejemplo, puedes tener un tipo de contenido para “Lugar de encuentro” que enumere la dirección, las horas de operación y las opciones de accesibilidad. En lugar de escribir esa información en cada evento que sucede en ese lugar, puedes crear una relación entre el tipo de contenido “Evento” y el tipo de contenido “Lugar de encuentro” para combinar la información almacenada en ambos tipos de contenido. Una vez que hayas creado la relación, los campos de ambos tipos de contenido estarán disponibles para mostrarlos en tu vista. Como lo estamos manteniendo sencillo, dejaremos de lado las relaciones ahora.

En este punto estamos listos para probar nuestra vista. Asegúrate de hacer clic en “Guardar” antes de continuar. Después de guardar, vuelve a la página principal del sitio y debes ver el enlace “Todos los artículos” en el menú de navegación principal (si estás utilizando el tema Bartik, debería aparecer como una pestaña en la pantalla). Haz clic en el enlace (o pestaña) “Todos los artículos” y verás los frutos de tu trabajo (ver figura 9-4).

Figura 9-4.

2.2. Visualización de bloque

Con la lista completa de la página de artículos bajo nuestra correa, vamos a revisar la pantalla de bloque. Vuelve a la página de administración de Vistas, a Administrar ➤ Estructura ➤ Vistas. Localiza la vista Artículos recientes y haz clic en el enlace Editar de la columna Operaciones. Ahora deberías ver la página de configuración de la vista Artículos recientes (ver figura 9-3).

El primer paso en el proceso es hacer clic en Bloque en la lista de visualización. Deberías poder encontrarlo directamente a la derecha del botón Página de todos los artículos. Al hacer clic en el botón Bloquear se muestran todos los parámetros de configuración del bloque. Vamos a actualizar la pantalla para mostrar sólo los tres títulos de los artículos más recientes, ordenados en orden de fecha de publicación, descendentes para que el artículo más reciente aparezca en la parte superior de la página. Comencemos el proceso actualizando el nombre de nuestra pantalla de Bloque a algo más descriptivo, luego necesitamos hacer los cambios en la visualización misma:

  1. En la primera columna, junto a “Nombre para mostrar”, haz clic en Bloque y cambia el valor del campo “Nombre administrativo” por “Bloque de artículos recientes”.

  2. Deja el título como artículos recientes, ya que todavía se aplica a lo que vamos a mostrar.

  3. Deja el formato como “Lista sin formato”, ya que todavía queremos que los artículos aparezcan como una lista.

  4. Cambia el valor de la opción Mostrar a Campos, ya que sólo queremos mostrar el título de los artículos en nuestra lista.

  5. En la sección Campos, deja el elemento que se mostrará como título. Si no dice Título, haz clic en el botón Añadir para esa sección y busca Título, agregándolo a la visualización.

  6. En la sección Criterios de filtrado, deja establecidos el estado de publicación de contenido y los criterios de tipo de contenido, mostrando solo el contenido publicado (Sí) y sólo el contenido del tipo Artículo.

  7. En la sección Criterios de clasificación, haz clic en el botón Agregar y busca Fecha. Verás “Contenido: Fecha de publicación” en la lista de opciones. Marca la casilla junto a este campo, cambia la opción a “Este bloque (modificar)” y haz clic en el botón “Aplicar (esta visualización)” en la parte inferior del formulario. En el siguiente formulario que aparece, selecciona “Ordenar descendente”, ya que queremos que los artículos más recientes aparezcan en la parte superior de la lista y los artículos más antiguos en la parte inferior. Aplica ese cambio también.

  8. El último cambio que debemos hacer es limitar el número de artículos que aparecerán en la lista a tres. En la segunda columna de las opciones de configuración, comprueba que el valor de “Usar paginador” esté configurado en “Mostrar un número especificado de elementos” a 3 elementos. Ese fue el valor que especificamos cuando inicialmente establecimos la vista.

Haz clic en Guardar y ya estás listo para colocar el bloque que acabas de crear en una página de tu sitio.

Para colocar el bloque creado por tu vista en una página, dirígete a la página Estructura y haz clic en el enlace “Diseño de bloque”. En la página “Diseño de bloque”, en la columna “Colocar bloques”, debes ver la vista que acabas de crear en la sección Listas (Vistas) ver figura 9-5.

Figura 9-5.

Haz clic en los artículos recientes: enlace Bloque de artículos recientes y asignalo a una región.

Después guarda el bloque y regresa a la página principal de tu sitio. Deberías ver la lista de artículos que creaste a través del bloque que usa Vistas (ver figura 9-6).

Figura 9-6.

2.3. Filtrando

En el ejemplo anterior, filtramos la salida de nuestra vista según el tipo de contenido y el estado de publicación.

Esos son filtros típicos en la mayoría de las vistas, pero ¿qué pasa si deseas restringir la salida de la vista maś allá del tipo de contenido y el estado? Vamos a usar el etiquetado como un ejemplo de demostrar el poder de filtrado de vistas.

En esta sección vamos a añadir algunas etiquetas a los artículos de ejemplo en el sitio web de demostración.

Edita varios de tus artículos y, en el campo Etiquetas, escribe varias palabras clave, separadas por comas, que describan el contenido de cada artículo. Utiliza palabras similares en al menos dos de tus artículos para que podamos usar esos artículos en los próximos ejemplos. Para buscar artículos que desees actualizar, haz clic en el enlace Contenido del menú Administración y, en la lista, haz clic en el botón Editar para agregar etiquetas a los artículos existentes. Después de agregar las etiquetas, vuelve a la página Artículos recientes que creamos en las secciones anteriores y observa que las etiquetas que agregaste ahora se muestran debajo del teaser de cada artículo (ver figura 9-7).

Figura 9-7.

Como demostración rápida del poder de la taxonomía, las etiquetas y las vistas, haz clic en una de las etiquetas que introdujiste y Drupal mostrará una lista de todo el contenido etiquetado en tu sitio con ese término. Detrás de las escenas, Drupal está usando Vistas para generar esta lista. Pero vamos a dar un paso más allá y permitir a los usuarios filtrar el contenido que se representa desde nuestra vista de Todos los artículos mediante la introducción de una etiqueta.

Vuelve a la página de administración de Vistas haciendo clic en el enlace Vistas en la página Estructura. Localiza la vista Artículos recientes en la que hemos estado trabajando y haz clic en el botón Editar. Haz clic en el botón Mostrar la página Todos los artículos en el área de visualizaciones de la página de configuración de vista. Agrega un filtro nuevo para las etiquetas haciendo clic en el botón Agregar en la sección Criterios de filtro. Busca el campo Etiquetas introduciendo “Etiquetas” en el cuadro Buscar, arriba del formulario “Agregar criterios de filtro” y marca la casilla correspondiente al campo “Contenido: Etiquetas (field_tags)”. Cambia la opción a “Esta página (reemplazar)” para que el filtro se aplique sólo a la visualización de la página “Todos los artículos” y haz clic en “Aplicar (esta visualización)”.

El siguiente paso en el proceso es seleccionar el tipo de interfaz que deseamos proporcionar, ya sea una lista desplegable de términos para seleccionar o un campo Autocompletar donde el usuario escriba la palabra clave que desea buscar. El campo desplegable mostrará al usuario qué términos están disponibles, mientras que el enfoque de autocompletar requiere que el usuario sepa qué términos desea buscar. La opción depende de la experiencia de usuario que desees. Para fines de demostración, selecciona Desplegable y haz clic en el botón “Aplicar y continuar”. El siguiente paso en el proceso es configurar el filtro y cómo funcionará.

Queremos permitir que los usuarios seleccionen los términos para filtrar, por lo que vamos a exponer el filtro al usuario para que puedan controlar qué contenido se muestra en la vista. Para ello, marca la casilla de verificación “Exponer este filtro a los visitantes para permitir que lo cambien”, deja el parámetro “Tipo de filtro para exponer” en “Filtro individual” y cambia la etiqueta por “Seleccione una o más etiquetas”. Deja el operador establecido en “Es uno de”, lo que significa que los valores que queremos que el usuario selecciones son sólo las etiquetas que existen dentro de los artículos en el sitio. También marca la casilla de verificación “Permitir selecciones múltiples” para permitir que el visitante seleccione más de una etiqueta para buscar. Haz clic en el botón Aplicar para continuar el proceso (ver figura 9-8) y el botón Guardar para guardar los cambios realizados en la vista.

Figura 9-8.

Vuelve a la página Todos los artículos haciendo clic en el enlace Todos los artículos del menú principal o visita la URL /recent-articles en tu sitio. Verás tu filtro expuesto en la parte superior de la lista de artículos.

Selecciona una o más etiquetas y haz clic en el botón Aplicar para ver el nuevo filtro en acción (ver figura 9-9). ¡Asombroso! Y solo acabas de rascar la superficie de lo que Vistas puede hacer por ti.

Figura 9-9.

3. Salida de vista avanzada

Crear listas de teasers y campos de contenido es el uso más común de Vistas, pero si te detuvieras allí te perderías muchas de las poderosas capacidades disponibles a través de Vistas. En esta sección demostraremos los escenarios comunes que encontramos durante la construcción de sitios Drupal.

3.1. Creación de feeds RSS

Uno de los usos comunes de Vistas es crear fuentes RSS. Un feed RSS es un formato estándar de la industria para publicar contenido que puede ser consumido por aplicaciones como lectores de noticias o por otros sistemas como otro sitio Drupal. Mientras que los canales RSS no son tan populares como lo fueron una vez durante el apogeo de los lectores de noticias en línea, todavía hay casos en los que el uso de feeds RSS tiene sentido, como la provisión de feeds de contenido a otros sitios.

Tomemos la vista Artículos recientes y creemos un feed RSS para todos los artículos. Para comenzar, vuelve a la página Vistas haciendo clic en el enlace Administrar del menú de administración, seguido por el enlace Estructura y, finalmente, en el enlace Vistas de la página Estructura.

Encuentra la vista Artículos recientes y haz clic en Editar de esa vista. Vamos a crear una nueva visualización para el feed RSS haciendo clic en el botón Añadir en la sección visualización de la página. En la lista de opciones, elige Feed. El siguiente paso es introducir una URL a la que se accede al feed. En la segunda columna de la sección “Configuración de feed” haz clic en el enlace “No hay ruta definida” para ingresar una URL. Para propósitos de demostración, ingresaré la URL rss/all-articles. Podría haber utilizado cualquier URL, pero me resulta más fácil de prefijar todas las URL de mi feed con rss para que sea evidente lo que hace la URL. Completa el proceso haciendo clic en el botón Aplicar para guardar los cambios en la URL y, a continuación, en el botón Guardar en la parte inferior del formulario para guardar las actualizaciones en la vista. Ahora tienes un feed RSS que otros sitios pueden usar para consumir artículos de tu sitio. La visita a esa URL muestra la salida del feed (ver figura 9-10).

Figura 9-10.

3.2. Creando tablas

Mostrar contenido como listas funciona bien en la mayoría de los casos, pero es probable que encuentres escenarios donde el contenido de la lista en un formato de tabla sea más representativo de cómo los usuarios prefieren ver el contenido. Para fines de demostración, vuelve al formulario de edición de la vista Artículos recientes para crear una nueva presentación que procese los campos de los artículos en formato de hoja de cálculo. Haz clic en el botón Agregar en el área Visualización y selecciona Bloque como tipo de visualización. Cambia el “Nombre para mostrar” como hiciste anteriormente, esta vez a “Tabla de artículos”. Haz clic en “Lista sin formato” en la sección Formato, cambiando el tipo de salida que se renderizará a Tabla y recuerda cambiar la opción “Por opción” arriba de la página a “Este bloque (reemplazar)” antes de hacer clic en “Aplicar (esta visualización)”. La siguiente visualización que aparece presenta las opciones de estilo que puedes establecer para tu nueva tabla (ver figura 9-11).

Figura 9-11.

La opción de este formulario que más utilizarás es Ordenable. En este momento nuestra tabla sólo tiene una sola columna, el campo Título del artículo, pero tenemos la capacidad de agregar otros campos después de completar este paso, y tal vez queramos que una o más de esas columnas sean clasificables por el usuario final. Para ordenar la columna, el usuario hace clic en el título de esa columna y Vistas ordena automáticamente la tabla basándose en un orden ascendente (o, si el usuario vuelve a hacer clic en el título, orden descendente). Haz clic en la casilla de verificación Ordenable para la columna Título; volveremos a este formulario después de añadir otras columnas en los próximos pasos.

Debajo de la lista de campos encontrarás una lista de selección titulada “Agrupar el campo n.º 1”. Puedes agrupar la salida renderizada en la tabla, agrupándola como elementos en tu tabla en diferentes secciones simplemente seleccionando el campo que deseas ordenar y los resultados del grupo. Por ejemplo, si tenías una lista de propiedades para la venta, podrías agrupar la salida de esa tabla por código postal o por ciudad. Todas las propiedades que comparten un código postal aparecerían como una sección aparte de la tabla.

Para fines de demostración, deja la opción establecida en Ninguna.

Hay opciones de estilo adicionales, pero en la mayoría de los casos, dejar los valores predeterminados es suficiente. Haz clic en Aplicar para completar este paso del proceso.

Una tabla con una sola columna es bastante aburrida, realmente nada más que una simple lista. Así que para condimentar la tabla vamos a agregar dos campos adicionales, uno para la fecha en que se creó el artículo, y otro para las etiquetas asociadas con el artículo.

Agregaremos cada campo como una columna separada. Para agregar los campos, haz clic en Añadir en la sección Campos de la página (ver figura 9-3), que muestra la lista de todos los campos disponibles para mostrar en nuestra vista. Para simplificar la búsqueda de los campos que deseamos, ingresa “Creado” en el cuadro de búsqueda en la parte superior de la lista de campos y en la lista de resultados que se muestra, marca la casilla junto al campo “Contenido: Autorizado”.

Selecciona la opción “Para” de “Este bloque (reemplazar)” para evitar que este campo se agregue a todas las otras vistas de visualización que hemos creado y, a continuación, haz clic en “Aplicar (esta visualización)”. La siguiente pantalla proporciona opciones para configurar cómo se renderizará el campo “Autorizado”, incluyendo la etiqueta que se muestra para ese campo, opciones de estilo CSS, qué hacer cuando no hay un valor presente para un artículo determinado y otras opciones.

Deja todos los valores establecidos en sus valores predeterminados para las opciones restantes y haz clic en Aplicar.

4. Módulos de complementos de vistas

El propio módulo Vistas es una poderosa herramienta para renderizar contenido en tu sitio. Cuando combinas Vistas con otros módulos especializados, obtienes un nuevo nivel de capacidades potentes. Hay varios módulos de complementos para Vistas que “debes tener” y es posible que desees considerar a medida que construyes tu sitio. Aquí están algunos de mis favoritos:

  • Diapositivas de Vistas (www.drupal.org/project/views_slideshow): este módulo proporciona una interfaz simple de usar para crear vistas que muestren contenido como una presentación de diapositivas. Hay una serie de módulos de presentación de diapositivas para las vistas, pero esto pasa a ser uno de los más fáciles de usar.

  • Calendario (www.drupal.org/project/calendar): ¿necesitas mostrar eventos en un calendario? Este es el módulo que necesitas. Te proporciona un rico conjunto de herramientas para crear y mostrar cualquier contenido que contenga un campo de fecha y valores de fecha en un calendario (día, semana, mes, año). Es uno de los módulos imprescindibles en todos mis sitios.

  • Jcarousel (www.drupal.org/project/jcarousel): la mayoría de mis proyectos implican alguna forma de mostrar contenido en un carrusel. Este módulo facilita la creación de una lista de elementos de contenido y los convierte en un carrusel.

  • Vistas arrastrables (www.drupal.org/project/draggableviews): ¿deseas proporcionar una interfaz administrativa que permita a los editores de contenido reorganizar los elementos que aparecen en una vista? Este módulo proporciona una simple interfaz de arrastrar y soltar para reorganizar elementos en tu vista.

  • Gmap (www.drupal.org/project/gmap): ¿Quieres hacer que el contenido tenga información geográfica (dirección) en un mapa? Este módulo integra Google Maps con Vistas para proporcionar una solución fácil de usar para procesar elementos de contenido en un mapa.

  • Exportación de datos de Vista (www.drupal.org/project/views_data_export): ¿Deseas exportar contenido de tu sitio a un archivo CSV, hoja de cálculo, documento de Word, archivo de texto o XML? Este módulo proporciona la capacidad de hacer precisamente eso.

También hay módulos adicionales para las Vistas que no veremos en esta sección. Visita www.drupal.org/project/project_module y haz clic en el enlace Vistas en las categorías enumeradas en la columna de la derecha. En el momento de redactar este documento, hay 756 módulos aportados para Vistas!

Navega por la lista (recuerda mirar para ver si hay una versión de Drupal 8 de los módulos que te puedan interesar). La gente ha creado muchas capacidades sorprendentes para Vistas.