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

3,349 views

Published on

Unleashing the power of Views Drupal module. Discusses Display Formats (Map, Chart, Slideshow, Data Export), Fields, Basic Filters, Exposed Filters, Contextual Filters, Relationships, Attachment, and so on. Includes numerous sample use cases and recommendations.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,349
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
46
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

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

×