Views es un modulo que nos sirve para mostrar contenidos que provienen de nuestra base de datos, con diferentes formatos, filtros, estilos, orden, cantidad. Son basicamente una Query SQL. En este post vamos a explicar los conceptos de manera practica y con ejemplos sobre como funcionan las Views y como crearlas.

Explicacion de Views con un caso real. Banner promocional navideño en nuestro ecommerce

Somos los administradores de un ecommerce, donde se venden productos de ropa. Esta llegando navidad y nos solicitan agregar un banner promocional en la pagina principal de nuestro sitio, para promocionar remeras que salgan menos de $100.

Si no supieramos como funciona Views podriamos resolver esta tarea agregando el contenido de manera manual, editando el html en nuestro banner y listo. Deberiamos ir a nuestros productos, buscar las remeras que salgan menos de $100 y agregarlas en nuestra pagina principal.

Que pasa si hay una rebaja de utlimo momento y nos solicitan actualizar los precios de las remeras? Deberiamos cambiar el precio en nuestros productos y ademas cambiarlo en el banner que habiamos creado. Y si en vez de remeras solamente, debemos agregar pantalones tambien? Deberiamos tomar los pasos anteriores otra vez, y hacer todos los cambios de manera manual… Lo que empieza a convertirse en mucho trabajo. Aca es donde la magia de Views nos va a ayudar.

En vez de crear un banner y editarlo manualmente cada vez que hay un cambio, vamos a usar Views para poder crear nuestro banner. Por lo que nuestra View va a tener las siguientes caracteristicas:
– Nuestra View debe Mostrar Contenido de tipo Productos.
– Nuestra View debe Mostrar Productos que tengan la categoria Remera.
– Nuestra View debe Mostrar Productos con precio menor a $100.
– Agregar un limite para que solo se muestren hasta 6 productos.
– Crear un bloque para luego insertarlo en la pagina principal.
– Insertar nuestro bloque en la pagina principal.

De esta manera vamos a poder hacer cambios a nuestros productos y automaticamente nuestra View se actualizara.

Ahora que tenemos un poco mas de contexto con respecto a Views vamos a ver como se componen y como crearlas.

Componentes de una view

Seccion	Explicacion
1. Displays	Nos permite crear multiples views que tengan similitudes entre si, de manera que si actualizamos una, impacte en las otras.
2. Title	El titulo de nuestra view.
3. Format	Como se muestra nuestra view. Tenemos varias opciones: Grid, HTML List, Leaflet Map, Responsive Grid, Table, Unformatted List.
4. Fields	Los campos que se van a ver en nuestra view, la informacion que estamos exponiendo.
5. Filter criteria	Los filtros que apliquemos a nuestra consulta a la base de datos
6. Sort criteria	La manera en la que ordenamos nuestra informacion.
7. Access	Quienes pueden acceder o no a nuestra view y/o contenido.
8. Header	Cabecera de la view. Contenido que aparece arriba de antes de nuestra view, pueden ser bloques texto, otra view, etc.
9. Footer	Pie de la view. Contenido que aparece abajo de antes de nuestra view, pueden ser bloques texto, otra view, etc.
10. No results behavior	Como se va a mostrar nuestra view cuando no haya resultados.
11. Pager	Nos permite definir cuantos elementos se muestran en nuestra view, agregar paginadores.
12. Advanced	Podemos cambiar el machine name, usar ajax, cambiar las configuraciones de la query, etc.

Como crear views

En mi sitio tengo eventos. Los cuales tienen fecha, lugar, nombre del evento y descripcion. Nuestro objetivo va a ser mostrar los 3 eventos futuros que tengan la fecha mas lejana con respecto a la actual y agregarlos en nuestro sitio web a modo de banner publicitario.

Queremos obtener algo asi:
– Evento 1 – Fecha – Lugar
– Evento 2 – Fecha – Lugar
– Evento 3 – Fecha – Lugar

Para eso vamos a crear una view, que tenga las siguientes caracteristicas:
– Mi view va a mostrar contenido de tipo Event.
– Mi view va a mostrar solamente 3 events.
– Mi view va a ordenar estos eventos utilizando su fecha y los va a ordernar desde el que tenga fecha futura hacia fecha pasada.
– Luego esta view la vamos a agregar a modo de bloque en nuestro banner superior.

Empecemos:

Vamos a Structure -> Views -> [+ Add View]

En View name le puse My Events View.

View Settings -> Show: Content of type: Event

Click en [ Save and edit ]

Nuestra pantalla deberia de lucir similar a esto:

Asi se ve la interfaz de nuestra view una vez creada:

Agregando Fields a nuestra view

Si movemos nuestra barra de scroll hacia abajo, vamos a poder ver una vista previa de nuestra view. Ahora mismo nuestra view se ve de la siguiente manera:

Porque se ve asi? Ahora mismo, hay seleccionado un solo Field y por eso se ve solamente el titulo de mis eventos.

En la view que estoy creando quiero poder ver la fecha de mi evento, por lo tanto, voy a agregar un nuevo field que muestre la fecha del evento.

Para eso hago click en Add en la ventana de Add Fields.

Una ventana emergente con todos los fields que se pueden agregar en mi view aparece en mi pantalla y en el cuadro de busqueda escribo Date y elijo el que dice Appears in: event.

Ahora hago click en Add and configure fields y luego hago click en Apply.

Ahora tenemos un nuevo field llamado Content: Date.

Como podemos ver, ahora mi view nos muestra la fecha del evento.

Como se puede ver en este gif, nuestra view esta mostrando la fecha y el titulo de cada evento.

Cuando añadimos un nuevo field lo que hacemos es mostrar informacion, traer informacion de nuestro contenido (en este caso nuestro evento) y mostrarlo en nuestra view.

• Podemos tener un field con informacion de contacto del representante del evento y podriamos mostrarlo tambien.
• Podriamos tener un field con informacion de la localizacion del evento, y agregarlo tambien en nuestra view.
• Podriamos tener un field con una foto de nuestro evento. Y muchos ejemplos mas…

Ahora bien, vamos a agregar un nuevo field llamado Location y luego pasar a una nueva seccion en este post.

Hacemos igual que antes, solo que ahora escribimos Location y elegimos el que se llama Location address.

Y nuestra view se ve de la siguiente manera:

Solamente tengo dos eventos que tienen Location. Por el momento voy a hacer que ese field se quede pero que no se muestre.

Para eso hago click en el field activo la opcion Exclude from display y le doy a Apply.

Ahora nuevamente, nuestro evento se ve como se veia antes:

Limitando la cantidad de contenido que muestra nuestra view, agregando filters

Filter Criteria nos sirve para restringir los contenidos que mostramos en pantalla. Nos permite agregar filtros para definir los contenidos que queramos mostrar.

Ahora mismo los unicos filters que tenemos activados son:

Content: Published (= Yes)
Content: Content type (= Event)

Basicamente significa que estamos filtrando contenido que este publicado y ademas contenido del tipo Event.

Queremos solamente ver los eventos futuros por lo que vamos a agregar un filter de tipo Date y decirle que traiga solamente los eventos que tengan su fecha mayor o igual a la fecha actual.

Para eso hacemos lo siguiente:
1. En la seccion de Filter Criteria hacemos click en Add.
2. En la caja de busqueda escribimos Date.
3. Elegimos el que dice Date – Start. Ya que vamos a estar comparando la fecha actual, con la fecha de inicio del evento.
4. Hacemos click en Add and configure filter criteria.
5. Ahora nos deberia aparecer la pantalla para configurar como queremos filtrar.
6. En Operator elegir Is greater than.
7. En Value Type elegimos An offset from the current time such as “+1 day” or “-2 hours -30 minutes” y en el campo de abajo escribimos now.
8. Cliqueamos en Apply.

Y listo, podemos ver como se muestran solamente los eventos futuros en nuestra view:

Y si quisieramos agregar un buscador en nuestra view? De manera que el usuario pueda escribir el nombre del evento y que se filtre?

Para poder agregar un buscador a nuestra view seguimos los siguientes pasos:

1. En la seccion Filter Criteria hacemos click en Add.
2. En el buscador escribimos Title.
3. Elegimos el que dice Title Content.
4. Hacemos click en Add and configure filter criteria.
5. En donde dice Expose this filter to visitors, to allow them to change it lo activamos.
6. En Operator elegimos Contains y en Value lo dejamos vacio.
7. Hacemos click en Apply.
8. Listo! Ahora nuestro filtro se ve y las personas lo pueden cambiar.

Agregar nuestra view como bloque en el footer de nuestro sitio

Digamos que queremos agregar nuestra view en el sigiuente lugar:

Para eso vamos a Structure -> Block Layout y en la seccion Footer Top vamos a hacer click donde dice [ Place Block ]

Elegimos nuestra view.

Una vez agregada, vamos a hacer click en Save Block.

Hemos agregado nuestra view a nuestro footer. Ahora mismo se muestran 4 eventos asi que lo voy a limitar a 3 eventos solamente. Tambien voy a cambiar el nombre del titulo ya que ahora mismo es simplemente Title.

Para eso hacemos click en el lapiz que aparece arriba a la derecha del cuadro de dialogo de nuestro bloque. Y hacemos click en Edit View.

En nuestro editor de views hacemos click en donde dice None a la derecha de Title.

Escribimos el nombre del titulo que tendra el bloque, lo voy a nombrar Upcoming Events.

Hacemos click en Apply.

Ahora para limitar solamente a 3 eventos vamos a utilizar la seccion Pager.

Donde dice Use Pager elegimos Display a specified number of items y hacemos click en Apply.

Ahora nos aparecera una nueva pantalla, en el cuadro de dialogo que dice Items to display escribimos 3 y cliqueamos en Apply.

Voy a remover el filtro Content: Title (exposed) para que no se vea en nuestra view ya que no quiero que tenga un buscador de eventos.

Despues de todo esto hacemos click en Save.

Asi es como se ve nuestra view, con su titulo cambiado y solamente 3 eventos:

Conclusion

Hicimos una view que muestra los eventos mas futuros que existen. Muestra solamente 3 eventos. Logramos colocarlo en nuestro footer. Vimos como se configuraba un filtro, y como se agregan mas campos para que nuestra view muestre mas o menos informacion.

Podemos usar views para exportar nuestro contenido, creando una view con formato CSV. Podemos crear tablas.

Views nos sirve para poder re utilizar las views que vayamos creando. De manera que si tengo un banner promocional navideño de remeras, puedo usar el mismo banner y hacer que sea de pantalones, camisas. Puedo crear otra view que sea banner promocional con imagenes y sin titulo. Otra vista con imagenes y sin precio. Hay muchos ejemplos. Lo poderoso es poder hacerlo desde la interfaz grafica de Drupal y poder reutilizar views ya creadas.

Informacion extra

https://www.drupal.org/docs/8/core/modules/views