SlideShare a Scribd company logo
V
Engr.Ranel O.Padon
Drupal Apprentice Training
https://github.com/ranelpadon
UNLIMITED
IEWS
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
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
Under the Hood
Under the Hood
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 different 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
fields you want (Title, Images,Author,Location, Price), filter 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
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
Views: CLONING | TABBED MENUS
Views: CLONING | TABBED MENUS
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
Views: CLONING | TABBED MENUS
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
Views: Relationships
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
Views: Relationships
Create Review content type
Views: Relationships
Create Tourist Spot content type
Views: Relationships
*Create 3 Tourist Spots
1.Tourist Spot:
Name:Amanpulo Beach Resort
Review:
Byline: Excellent Service!!
Reviewer: Juday
Rating: 5
Views: Relationships
*Create 3 Tourist Spots
2.Tourist Spot:
Name:Taal Volcano
Review:
Byline: Good View
Reviewer: PNoy
Rating: 4
Views: Relationships
*Create 3 Tourist Spots
3.Tourist Spot:
Name: Chocolate Hills
Review:
Byline: Disappointed!
Reviewer: Mommy D
Rating: 2
Views: Relationships
Create new View
Views: Relationships
Add the Relationships
Views: 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 Island 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
Edit each Tourist Spot, and specify the values:
Taal Volcano
Latitude: 14
Longitude: 121
Island Group: Luzon
Views: Map Display
Edit each Tourist Spot, and specify the values:
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.
Views: Chart Display
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: Chart Display
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
Views: Slideshow Display
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
Views: Slideshow Display
Add a Photos field, then upload the 3 sample photos provided for each
Tourist Spot.
Views: Slideshow Display
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
Views: Export Data as csv, xls, etc
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.
Views: Export Data as csv, xls, etc
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.”

More Related Content

Viewers also liked (20)

ODP
LVEE 2014: Text parsing with Python and PLY
dmbaturin
 
PDF
Text analysis using python
Vijay Ramachandran
 
PDF
PyCon PH 2014 - GeoComputation
Ranel Padon
 
PDF
An Embedded Error Recovery and Debugging Mechanism for Scripting Language Ext...
David Beazley (Dabeaz LLC)
 
PDF
Generator Tricks for Systems Programmers
David Beazley (Dabeaz LLC)
 
PDF
WAD : A Module for Converting Fatal Extension Errors into Python Exceptions
David Beazley (Dabeaz LLC)
 
PDF
Understanding the Python GIL
David Beazley (Dabeaz LLC)
 
PDF
CKEditor Widgets with Drupal
Ranel Padon
 
PDF
SWIG : An Easy to Use Tool for Integrating Scripting Languages with C and C++
David Beazley (Dabeaz LLC)
 
PDF
Generator Tricks for Systems Programmers, v2.0
David Beazley (Dabeaz LLC)
 
PDF
Why Extension Programmers Should Stop Worrying About Parsing and Start Thinki...
David Beazley (Dabeaz LLC)
 
PDF
Python introduction
Marcelo Araujo
 
PDF
Python Programming - X. Exception Handling and Assertions
Ranel Padon
 
PDF
Python for text processing
Xiang Li
 
PDF
Python Programming - VII. Customizing Classes and Operator Overloading
Ranel Padon
 
PDF
Python Programming - III. Controlling the Flow
Ranel Padon
 
PDF
The Synergy of Drupal Hooks/APIs (Custom Module Development with ChartJS)
Ranel Padon
 
PDF
Python Programming - IX. On Randomness
Ranel Padon
 
PDF
Switchable Map APIs with Drupal
Ranel Padon
 
PDF
Python Programming - VIII. Inheritance and Polymorphism
Ranel Padon
 
LVEE 2014: Text parsing with Python and PLY
dmbaturin
 
Text analysis using python
Vijay Ramachandran
 
PyCon PH 2014 - GeoComputation
Ranel Padon
 
An Embedded Error Recovery and Debugging Mechanism for Scripting Language Ext...
David Beazley (Dabeaz LLC)
 
Generator Tricks for Systems Programmers
David Beazley (Dabeaz LLC)
 
WAD : A Module for Converting Fatal Extension Errors into Python Exceptions
David Beazley (Dabeaz LLC)
 
Understanding the Python GIL
David Beazley (Dabeaz LLC)
 
CKEditor Widgets with Drupal
Ranel Padon
 
SWIG : An Easy to Use Tool for Integrating Scripting Languages with C and C++
David Beazley (Dabeaz LLC)
 
Generator Tricks for Systems Programmers, v2.0
David Beazley (Dabeaz LLC)
 
Why Extension Programmers Should Stop Worrying About Parsing and Start Thinki...
David Beazley (Dabeaz LLC)
 
Python introduction
Marcelo Araujo
 
Python Programming - X. Exception Handling and Assertions
Ranel Padon
 
Python for text processing
Xiang Li
 
Python Programming - VII. Customizing Classes and Operator Overloading
Ranel Padon
 
Python Programming - III. Controlling the Flow
Ranel Padon
 
The Synergy of Drupal Hooks/APIs (Custom Module Development with ChartJS)
Ranel Padon
 
Python Programming - IX. On Randomness
Ranel Padon
 
Switchable Map APIs with Drupal
Ranel Padon
 
Python Programming - VIII. Inheritance and Polymorphism
Ranel Padon
 

Similar to Views Unlimited: Unleashing the Power of Drupal's Views Module (20)

PDF
Tips and Tricks for Getting the Most out of Views
Acquia
 
PPT
Views
James Stone
 
PDF
Basic Views
guest1365ce
 
PDF
Views Mini-Course, Part I: An Introduction to Views
Acquia
 
PPTX
Jay Callicott Drupal Views 2.0 Presentation
Mediacurrent
 
PDF
Staying Sane with Drupal NEPHP
Oscar Merida
 
PPT
Intro To Drupal For Museums
David Henry
 
KEY
Views Configuration at Drupal Camp Toronto 2012
Suzanne Dergacheva
 
PDF
Views (Basic)
Dhruvesh Tripathi
 
PPTX
Drupal 7 Building Blocks
Aimee Maree
 
PPTX
Basic site building with drupal 7
Roald Umandal
 
PDF
Drupal Global Training Day by Drupal Mumbai 6th Sep - Drupal Terminologies
DrupalMumbai
 
PDF
Drupal 7 basic setup and contrib modules for a brochure website
Geshan Manandhar
 
PDF
Views Mini-Course, Part III: How to Back Up Your Views Safely
Acquia
 
PDF
Best Practice Checklist for Building a Drupal Website
Acquia
 
PPT
Drupal Views and ImageCache
Trevor Flexhaug
 
PPTX
Drupal For Dummies
Koen Delvaux
 
PPT
[DCTPE2011] Drupal 7 的Fields/Views 運用
Drupal Taiwan
 
PPTX
DrupalCon Denver 2012
Heather Rodriguez
 
DOCX
Creating a licensing database using drupal 7
Amanda Yesilbas
 
Tips and Tricks for Getting the Most out of Views
Acquia
 
Basic Views
guest1365ce
 
Views Mini-Course, Part I: An Introduction to Views
Acquia
 
Jay Callicott Drupal Views 2.0 Presentation
Mediacurrent
 
Staying Sane with Drupal NEPHP
Oscar Merida
 
Intro To Drupal For Museums
David Henry
 
Views Configuration at Drupal Camp Toronto 2012
Suzanne Dergacheva
 
Views (Basic)
Dhruvesh Tripathi
 
Drupal 7 Building Blocks
Aimee Maree
 
Basic site building with drupal 7
Roald Umandal
 
Drupal Global Training Day by Drupal Mumbai 6th Sep - Drupal Terminologies
DrupalMumbai
 
Drupal 7 basic setup and contrib modules for a brochure website
Geshan Manandhar
 
Views Mini-Course, Part III: How to Back Up Your Views Safely
Acquia
 
Best Practice Checklist for Building a Drupal Website
Acquia
 
Drupal Views and ImageCache
Trevor Flexhaug
 
Drupal For Dummies
Koen Delvaux
 
[DCTPE2011] Drupal 7 的Fields/Views 運用
Drupal Taiwan
 
DrupalCon Denver 2012
Heather Rodriguez
 
Creating a licensing database using drupal 7
Amanda Yesilbas
 
Ad

More from Ranel Padon (11)

PDF
Batch Scripting with Drupal (Featuring the EntityFieldQuery API)
Ranel Padon
 
PDF
Python Programming - XIII. GUI Programming
Ranel Padon
 
PDF
Python Programming - XII. File Processing
Ranel Padon
 
PDF
Python Programming - XI. String Manipulation and Regular Expressions
Ranel Padon
 
PDF
Python Programming - VI. Classes and Objects
Ranel Padon
 
PDF
Python Programming - V. Sequences (List and Tuples) and Dictionaries
Ranel Padon
 
PDF
Python Programming - IV. Program Components (Functions, Classes, Modules, Pac...
Ranel Padon
 
PDF
Python Programming - II. The Basics
Ranel Padon
 
PDF
Python Programming - I. Introduction
Ranel Padon
 
PDF
Of Nodes and Maps (Web Mapping with Drupal - Part II)
Ranel Padon
 
PDF
Web Mapping with Drupal
Ranel Padon
 
Batch Scripting with Drupal (Featuring the EntityFieldQuery API)
Ranel Padon
 
Python Programming - XIII. GUI Programming
Ranel Padon
 
Python Programming - XII. File Processing
Ranel Padon
 
Python Programming - XI. String Manipulation and Regular Expressions
Ranel Padon
 
Python Programming - VI. Classes and Objects
Ranel Padon
 
Python Programming - V. Sequences (List and Tuples) and Dictionaries
Ranel Padon
 
Python Programming - IV. Program Components (Functions, Classes, Modules, Pac...
Ranel Padon
 
Python Programming - II. The Basics
Ranel Padon
 
Python Programming - I. Introduction
Ranel Padon
 
Of Nodes and Maps (Web Mapping with Drupal - Part II)
Ranel Padon
 
Web Mapping with Drupal
Ranel Padon
 
Ad

Recently uploaded (20)

PDF
Peak of Data & AI Encore - Real-Time Insights & Scalable Editing with ArcGIS
Safe Software
 
PPTX
AI in Daily Life: How Artificial Intelligence Helps Us Every Day
vanshrpatil7
 
PDF
Build with AI and GDG Cloud Bydgoszcz- ADK .pdf
jaroslawgajewski1
 
PPTX
What-is-the-World-Wide-Web -- Introduction
tonifi9488
 
PDF
MASTERDECK GRAPHSUMMIT SYDNEY (Public).pdf
Neo4j
 
PDF
State-Dependent Conformal Perception Bounds for Neuro-Symbolic Verification
Ivan Ruchkin
 
PDF
NewMind AI Weekly Chronicles – July’25, Week III
NewMind AI
 
PDF
Brief History of Internet - Early Days of Internet
sutharharshit158
 
PPTX
AI Code Generation Risks (Ramkumar Dilli, CIO, Myridius)
Priyanka Aash
 
PDF
The Future of Artificial Intelligence (AI)
Mukul
 
PPTX
Introduction to Flutter by Ayush Desai.pptx
ayushdesai204
 
PPTX
AVL ( audio, visuals or led ), technology.
Rajeshwri Panchal
 
PDF
A Strategic Analysis of the MVNO Wave in Emerging Markets.pdf
IPLOOK Networks
 
PDF
CIFDAQ's Market Wrap : Bears Back in Control?
CIFDAQ
 
PPTX
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
PDF
GDG Cloud Munich - Intro - Luiz Carneiro - #BuildWithAI - July - Abdel.pdf
Luiz Carneiro
 
PDF
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
PDF
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
PPTX
OA presentation.pptx OA presentation.pptx
pateldhruv002338
 
PPTX
Agile Chennai 18-19 July 2025 | Workshop - Enhancing Agile Collaboration with...
AgileNetwork
 
Peak of Data & AI Encore - Real-Time Insights & Scalable Editing with ArcGIS
Safe Software
 
AI in Daily Life: How Artificial Intelligence Helps Us Every Day
vanshrpatil7
 
Build with AI and GDG Cloud Bydgoszcz- ADK .pdf
jaroslawgajewski1
 
What-is-the-World-Wide-Web -- Introduction
tonifi9488
 
MASTERDECK GRAPHSUMMIT SYDNEY (Public).pdf
Neo4j
 
State-Dependent Conformal Perception Bounds for Neuro-Symbolic Verification
Ivan Ruchkin
 
NewMind AI Weekly Chronicles – July’25, Week III
NewMind AI
 
Brief History of Internet - Early Days of Internet
sutharharshit158
 
AI Code Generation Risks (Ramkumar Dilli, CIO, Myridius)
Priyanka Aash
 
The Future of Artificial Intelligence (AI)
Mukul
 
Introduction to Flutter by Ayush Desai.pptx
ayushdesai204
 
AVL ( audio, visuals or led ), technology.
Rajeshwri Panchal
 
A Strategic Analysis of the MVNO Wave in Emerging Markets.pdf
IPLOOK Networks
 
CIFDAQ's Market Wrap : Bears Back in Control?
CIFDAQ
 
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
GDG Cloud Munich - Intro - Luiz Carneiro - #BuildWithAI - July - Abdel.pdf
Luiz Carneiro
 
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
OA presentation.pptx OA presentation.pptx
pateldhruv002338
 
Agile Chennai 18-19 July 2025 | Workshop - Enhancing Agile Collaboration with...
AgileNetwork
 

Views Unlimited: Unleashing the Power of Drupal's Views Module

  • 1. V Engr.Ranel O.Padon Drupal Apprentice Training https://github.com/ranelpadon UNLIMITED IEWS
  • 2. TOPICS Introduction Views Components Formats Fields Basic Filters, Exposed Filters, Contextual Filters Relationships Attachment Display Formats: Map, Chart, Slideshow,Data Export Recommendations
  • 3. 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.
  • 4. INTRODUCTION “Views changed my life.” ~Michelle Lauer and Greg Stout
  • 5. INTRODUCTION The No.1 module out of 27,000+ modules.
  • 6. INTRODUCTION Earl Miles: the Views creator. Drupal.org: @merlinofchaos
  • 8. INTRODUCTION Views is a module that displays a list of data. One set of data could have many Views. #flexibility
  • 13. 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.
  • 14. Views Demystified In that case, there are 2 different 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.
  • 15. Views Demystified In the same way,Views retrieve data from the database, selects the content types you want (Blog, News, Product,Tourist Spot), the fields you want (Title, Images,Author,Location, Price), filter 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).
  • 16. Views Demystified Hence, a same pool of data could be combined and viewed in many ways.This makes Drupal really powerful!
  • 17. 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?
  • 18. Views Demystified What (Content Type, Fields) Where (Page, Block,Attachment) How (List,Table, Gallery,Chart, Map)
  • 19. 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)
  • 23. 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
  • 24. Views: SIMPLE LIST | SORTING Remove the Post Date sorter. Add Title Sorter,Set to Ascending. Check Preview.
  • 25. 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).
  • 26. Views: SIMPLE LIST | EXPOSED FILTERS Add exposed filter (filter by Tags) Enable AJAX (to avoid page reloading)
  • 27. Views: PATH, PERMISSION, PAGERS Edit Path. Add Menu Link. Control the Permission. Add a Footer message. Paged Output Full vs Mini Pager Exposed Pager
  • 28. 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.
  • 29. 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
  • 30. 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
  • 31. Views: CLONING | TABBED MENUS
  • 32. Views: CLONING | TABBED MENUS 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
  • 33. Views: CLONING | TABBED MENUS For easier and more powerful tabbing needs, See the Quick Tabs module: https://www.drupal.org/project/quicktabs
  • 34. 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.
  • 35. 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
  • 36. Views: Relationships 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
  • 39. Views: Relationships *Create 3 Tourist Spots 1.Tourist Spot: Name:Amanpulo Beach Resort Review: Byline: Excellent Service!! Reviewer: Juday Rating: 5
  • 40. Views: Relationships *Create 3 Tourist Spots 2.Tourist Spot: Name:Taal Volcano Review: Byline: Good View Reviewer: PNoy Rating: 4
  • 41. Views: Relationships *Create 3 Tourist Spots 3.Tourist Spot: Name: Chocolate Hills Review: Byline: Disappointed! Reviewer: Mommy D Rating: 2
  • 45. Views: Contextual Filters Usually used for creating related contents/block/info for each individual page.
  • 46. Views: Contextual Filters Add a new Block display,then set the Nid as a contextual filter (Arguments in Drupal 6)
  • 47. Views: Map Display We need fields for holding location information. These field will be used by Views for displaying contents in a map.
  • 48. 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
  • 49. Views: Map Display Add an Island Group Taxonomy Vocabulary,then add the Luzon, Visayas, and Mindanao terms.
  • 50. Views: Map Display Add Location field and Island Group field in Tourist Spot
  • 51. Views: Map Display Edit each Tourist Spot, and specify the values: Amanpulo Beach Resort Latitude: 11 Longitude: 121 Island Group: Luzon
  • 52. Views: Map Display Edit each Tourist Spot, and specify the values: Taal Volcano Latitude: 14 Longitude: 121 Island Group: Luzon
  • 53. Views: Map Display Edit each Tourist Spot, and specify the values: Chocolate Hills Latitude: 9.8 Longitude: 124.2 Island Group:Visayas
  • 54. Views: Map Display Add Location field and Island Group field in Tourist Spot
  • 55. 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
  • 56. Views: Chart Display We need a charting library to visualize Views data. Charts utilizes the Views' Aggregation and Count operations.
  • 57. Views: Chart Display 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
  • 59. 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
  • 60. Views: Slideshow Display We need an slideshow plugin for cycling the contents/fields
  • 61. Views: Slideshow Display 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
  • 62. Views: Slideshow Display Add a Photos field, then upload the 3 sample photos provided for each Tourist Spot.
  • 64. Views: Flex Slider Try also the responsive and nifty FlexSlider module: https://www.drupal.org/project/flexslider
  • 65. Views: Export Data as csv, xls, etc Activate Module: Views Data Export
  • 66. Views: Export Data as csv, xls, etc 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.
  • 67. Views: Export Data as csv, xls, etc
  • 68. 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.
  • 70. 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)
  • 71. “Views changed my life..”
  • 72. “..and it is about to change yours.”