views unlimited: unleashing the power of drupal's views module

VEngr. Ranel O. Padon

Drupal Apprentice Training

https://github.com/ranelpadon

UNLIMITEDIEWS

TOPICS

Introduction

Views Components

Formats

Fields

Basic Filters, Exposed Filters, Contextual Filters

Relationships

Attachment

Display Formats: Map, Chart, Slideshow, Data Export

Recommendations

About Me

Full-time Drupal developer for CNN Travel

Part-time Python/Web GIS lecturer in UP.

Involved in computational Java and Python projects before.

Plays competitive football and futsal.

INTRODUCTION

“Views changed my life.”

~Michelle Lauer and Greg Stout

http://travel.cnn.com/

INTRODUCTION

The No.1 module out of 27,000+ modules.

INTRODUCTION

Earl Miles: the Views creator.

Drupal.org: @merlinofchaos

INTRODUCTION

INTRODUCTION

Views is a module that displays a list of data.

One set of data could have many Views. #flexibility

Under the Hood

Views Demystified

Views is essentially a view of data.

For example, if you’re in a bar with your friend (which could be drunk

already), and suddenly a woman entered the room your friend may find

the woman gorgeous/sexy, but you might find it just mediocre/ugly.

Views Demystified

In that case, there are 2 dif ferent Views or perspective: your View and

your friend’s View; while the data (the Woman) is the same for both of

you, it could be portrayed differently.

Views Demystified

In the same way, Views retrieve data from the database, selects the

content types you want (Blog, News, Product, Tourist Spot), the

f ields you want (Title, Images, Author, Location, Price), f i lter them

(filter by category, filter by price), apply some pre-processing

(compute total, aggregate data), sort them (sort by surname, sort by

area, sort by publication date), and finally display them in a format you

want (list, grid, charts, maps, gallery).

Views Demystified

Hence, a same pool of data could be combined and viewed in many

ways. This makes Drupal really powerful!

Views Demystified

Views is the make or break of Drupal. Many people find it to be

intimidating and hard. But essentially, it just answers these 3 questions:

What?

Where?

How?

Views Demystified

What (Content Type, Fields)

Where (Page, Block, Attachment)

How (List, Table, Gallery, Chart, Map)

Views: Let's Get Our Hands Dirty!

Enable: Chaos Tools, Views, and Views UI modules

Create 3 Articles (fill-in their Title, Body, and Tags fields)

Views: SIMPLE LIST

Views: SIMPLE LIST | DISPLAY

Edit View.

Set Display to HTML List.

Save View.

Edit View.

Set Display to Grid and Table.

Utilize the Views' Preview section.

Utilizing the “?” help/hint icons

- if the Advanced Help module is installed

Views: SIMPLE LIST | SORTING

Remove the Post Date sorter.

Add Title Sorter, Set to Ascending.

Check Preview.

Views: SIMPLE LIST | FIELDS

Change Display's Contents to Fields.

Add fields.

Rearrange fields.

Remove fields.

Trim Fields (trim the Body field to 20 characters only).

Views: SIMPLE LIST | EXPOSED FILTERS

Add exposed filter (filter by Tags)

Enable AJAX (to avoid page reloading)

Views: PATH, PERMISSION, PAGERS

Edit Path.

Add Menu Link.

Control the Permission.

Add a Footer message.

Paged Output

Full vs Mini Pager

Exposed Pager

Views: SIMPLE LIST | BLOCK VIEW

Add a new View in the current View

Set the Display Name

Display the view in Block.

'All Displays' vs 'This Block (Override)'

Show Titles Only

Enable the Block

Show that Block in that page only.

Views: SIMPLE LIST | PAGE CLONING

Clone a Page

Set the Display Name

Display All contents (don't set the edit to All Displays!)

Edit Path (/articles-full)

Connect the Block to the new Page

Set the More Link (Display 2 contents only) in the Block

Advanced >> Link Display: check Full Articles Page

Views: CLONING | TABBED MENUS

Clone the Articles Views in admin/structure/views

Set the Page View's Path as /articles-parent

Clone the parent Page, Re-order Views Displays

Set Path as /articles-parent/tab1

Menu Settings:

Title: Tab 1

Type: Default Menu Tab

Parent Menu Item: Normal Menu Item

Menu: Main Menu


Go to the other Page Display

Set Path as /articles-parent/tab2

Menu Settings:

Title: Tab 2

Type: Menu Tab

Menu: Main Menu

Weight: 1


For easier and more powerful tabbing needs,

See the Quick Tabs module:

https://www.drupal.org/project/quicktabs

Views: Destination with Reviews

Relationships between Tourist Spot and Review content types.

The Review's table has been merged to the Tourist Spot's table to

connect and retrieve information.

Views: Relationships

For merging information across tables. In SQL, it's the JOIN operation.

Usually used if you want to access deeper information from two or

more content types, including users or taxonomy terms' comprehensive

object/table information.

Activate these modules for this exercise:

Entity API

Entity Reference

Inline Entity Form


Create Review content type

Title field: Byline

Reviewer: Text

Rating: List (Integer)

Create Tourist Spot content type

Destination Name: Text

Review: Entity Reference

Widget: Inline Entity Form


Create Review content type


Create Tourist Spot content type


*Create 3 Tourist Spots

1. Tourist Spot:

Name: Amanpulo Beach Resort

Review:

Byline: Excellent Service!!

Reviewer: Juday

Rating: 5



2. Tourist Spot:

Name: Taal Volcano

Review:

Byline: Good View

Reviewer: PNoy

Rating: 4



3. Tourist Spot:

Name: Chocolate Hills

Review:

Byline: Disappointed!

Reviewer: Mommy D

Rating: 2


Create new View


Add the Relationships


Adjust the Fields

Views: Contextual Filters

Usually used for creating related contents/block/info for each individual

page.

Views: Contextual Filters

Add a new Block display, then set the Nid as a contextual filter

(Arguments in Drupal 6)

Views: Map Display

We need fields for holding

location information.

These field will be used by Views

for displaying contents in a map.

Views: Map Display

Activate Modules:

Libraries

GeoPHP, Geofield

Leaflet, Leaflet Views, Leaflet More Maps

Put the "leaflet" JS library in sites/all/libraries,

so that you will have site/all/libraries/leaflet/leaflet.js file

Views: Map Display

Add an Is land Group Taxonomy Vocabulary, then add the Luzon,

Visayas, and Mindanao terms.

Views: Map Display

Add Location field and Island Group field in Tourist Spot

Views: Map Display

Edit each Tourist Spot, and specify the values:

Amanpulo Beach Resort

Latitude: 11

Longitude: 121

Island Group: Luzon

Views: Map Display


Taal Volcano

Latitude: 14

Longitude: 121

Island Group: Luzon

Views: Map Display


Chocolate Hills

Latitude: 9.8

Longitude: 124.2

Island Group: Visayas

Views: Map Display

Add Location field and Island Group field in Tourist Spot

Views: OpenLayers

Implement a similar view using the OpenLayers module.

https://www.drupal.org/project/openlayers

Follow this guideline:

https://www.drupal.org/node/1481374

For a comprehensive discussion of mapping with Drupal:

http://www.slideshare.net/ranelpadon/of-nodes-and-maps

Views: Chart Display

We need a charting library

to visualize Views data.

Charts utilizes the

Views' Aggregation

and Count operations.


Activate Modules:

Libraries

Visualization

Put the "highcharts" JS library in sites/all/libraries,

so that you will have site/all/libraries/highcharts/js/highcharts.js file

Views: Google Chart Tools

Implement a similar view using the Views Chart Tools module.

https://www.drupal.org/project/views_chart_tools

Follow this guideline:

https://www.drupal.org/node/1675788

Views: Slideshow Display

We need an slideshow plugin for

cycling the contents/fields

https://www.drupal.org/project/views_chart_tools


Activate Modules:

Libraries

Views Slideshow, Views Slideshow Cycle

Put the "jquery.cycle" JS library in sites/all/libraries,

so that you will have a

site/all/libraries/jquery.cycle/jquery.cycle.all.min.js


Add a Photos field, then upload the 3 sample photos provided for each

Tourist Spot.

Views: Flex Slider

Try also the responsive and nifty FlexSlider module:

https://www.drupal.org/project/flexslider

Views: Export Data as csv, xls, etc

Activate Module:

Views Data Export


Essential idea:

1. Set the Display Format to XLS, CSV, etc.

2. Set the export Path.

3. Set the view that it will be attached to.

Exercise: Highlighted Content

Create a new Block display in the left sidebar. The first content should

display its Title and Photo, the rest, display their Titles only.

Challenge Exercise:

OpenLayers with

Exposed Filters

What's More?

1. Views PDF

2. Entity Views Attachment (EVA)

3. Nodequeue

4. EFQ Views

5. Views Accelerator

6. and so on (explore Views-related modules in Drupal.org)

“Views changed my life..”

“..and it is about to change yours.”

views unlimited: unleashing the power of drupal's views module

Technology

js file views

island group

map display

tourist spot

simple list

tabbed menus

121 island

content types