Views Examples: Using Arguments and Relationships April 19, 2010 - - PowerPoint PPT Presentation

views examples using arguments and
SMART_READER_LITE
LIVE PREVIEW

Views Examples: Using Arguments and Relationships April 19, 2010 - - PowerPoint PPT Presentation

Views Examples: Using Arguments and Relationships April 19, 2010 Michelle Lauer Drupal.org: miche Twitter: @bymiche Blog: developedbymiche.com/downloads CP: commonplaces.com/resources CommonPlaces.com Development Co-development & Mentoring


slide-1
SLIDE 1

Views Examples: Using Arguments and Relationships

April 19, 2010 Michelle Lauer Drupal.org: miche Twitter: @bymiche Blog: developedbymiche.com/downloads CP: commonplaces.com/resources

slide-2
SLIDE 2

Marketing

Marketing Strategy & Mentoring User Training & Documentation Traditional & Cloud Hosting Security Services

Support

Application Support Site Maintenance Training & Documentation Traditional & Cloud Hosting Security Services

CommonPlaces.com

Planning

Business Strategy Consulting Information Architecture Performance Optimization Usability & Interface Design Detailed Project Specifications

Development

Co-development & Mentoring Application Integration Modules & Upgrades Open Source Development Visual Design & Theming

CommonPlaces develops integrated

  • pen source

solutions designed to educate, engage, and entertain.

2

slide-3
SLIDE 3

Welcome

You are here because…

  • Want to be able to filter content in different

ways (arguments)

  • Want to be able to display other information

(relationships) I will show you…

  • Systematic way to create ALL views in the GUI
  • What are arguments and how to use them
  • What are relationships and how to use them
  • Why you should export your Views to code

3

slide-4
SLIDE 4

Hang On!

  • Lots of information – FAST!
  • Put your pencil down and absorb
  • Remember the process
  • Remember the big picture
  • Remember the use cases
  • Download the slides
  • Look up the details

4

slide-5
SLIDE 5

Background Information

What is a “site” module?

  • Site- wide customizations
  • hook_form_alter
  • hook_nodeapi
  • hook_menu
  • hook_block
  • hook_token_list, hook_token_values
  • hook_views_default_views

Module Developer’s Guide: http://drupal.org/developing/modules Core module hooks: http://api.drupal.org/api/group/hooks Contributed module hooks: http://drupalcontrib.org/drupal-6-modules

5

slide-6
SLIDE 6

Best Practices

  • Create your own CCK body field
  • Preface the name of your CCK fields with

content type they are used in.

  • Fields that are used in several content

types don’t need the ctype name

  • Follow the same series of steps when you

create each view

  • Create Views and Node paths so each part

is a valid page

  • First filter = Published nodes
  • Export your views to code

6

slide-7
SLIDE 7

7

Example 1 A Glossary of Terms

slide-8
SLIDE 8

Example: A Glossary of Terms

Our goal is to create a way to browse through the instances of the content type glossary_item. When viewing the Glossary page, we can show all the items, but most people would prefer smaller chunks of content, so we will also provide pages for each first letter. When you navigate to a “letter” page, you only see nodes whose title begins with that letter.

8

slide-9
SLIDE 9

Example: A Glossary of Terms

9

slide-10
SLIDE 10

Definition: Arguments

Arguments are parts of the URL of a view that can be used to reduce the result-set.

  • mysite.com/taxonomy/term/89

Arguments in Views are akin to arguments in

  • functions. You are passing a variable to be

used.

  • function mysite_do_something($arg)

10

slide-11
SLIDE 11

Example: A Glossary of Terms

CONTRIBUTED MODULES DOWNLOADED

  • Views
  • Views Exporter
  • Views UI
  • CCK
  • Content
  • Text
  • Pathauto: automatically generates

path aliases

  • Token: placeholders for dynamic text

CORE MODULES ENABLED

  • Path: create custom urls for

nodes CUSTOM MODULE CREATED

  • drupalconsf2010: site-

specific customizations

11

slide-12
SLIDE 12

Example: A Glossary of Terms

APPROACH

  • Create Content Type
  • Write Token Code
  • Configure Pathauto
  • Create Content
  • Create View
  • Place Block

CREATE VIEW

  • Filters
  • Fields
  • Sort Criteria
  • Page 1
  • Group By
  • Page 2
  • Arguments
  • Block
  • Arguments

12

slide-13
SLIDE 13

Create Content Type: glossary_item

Remove default “Body” field.

admin/content/types/add

13

slide-14
SLIDE 14

Create Content Type: glossary_item

Add CCK “Body” field.

admin/content/node-type/glossary-item/fields

14

slide-15
SLIDE 15

Write Token: first_letter

hook_token_list

15

slide-16
SLIDE 16

Write Token: first_letter

hook_token_values

16

slide-17
SLIDE 17

Configure Pathauto

Use the token we just created.

admin/build/path/pathauto

17

slide-18
SLIDE 18

Create Content: Glossary Item

Notice the path for Blue

admin/content/node

18

slide-19
SLIDE 19

Create View: Glossary

1. Filters

  • Node: Published = Yes
  • Node: Type = Is one of Glossary Item

2. Fields

  • Node: Title
  • Content: Body

3. Sort Criteria

  • Node: Title asc

4. Page: Landing

  • Path = glossary
  • Group By = Node: Title (length of 1)

5. Page: By Letter

  • Path = glossary/%
  • Arguments = Glossary Mode

6. Block: Letters

  • Arguments = Summary Sorted

19

slide-20
SLIDE 20

Create View: Glossary

1. Filters

  • Node: Published = Yes
  • Node: Type = Is one of Glossary Item

2. Fields

  • Node: Title
  • Content: Body

3. Sort Criteria

  • Node: Title asc

4. Page: Landing

  • Path = glossary
  • Group By = Node: Title (length of 1)

5. Page: By Letter

  • Path = glossary/%
  • Arguments = Glossary Mode

6. Block: Letters

  • Arguments = Summary Sorted

20

slide-21
SLIDE 21

Create View: Glossary

  • 1. Filters - Add

21

slide-22
SLIDE 22

Create View: Glossary

  • 1. Filters - Add

22

slide-23
SLIDE 23

Create View: Glossary

  • 1. Filters – Add – Node: Published

23

slide-24
SLIDE 24

Create View: Glossary

  • 1. Filters – Add – Node: Type

24

slide-25
SLIDE 25

Create View: Glossary

  • 1. Filters

25

slide-26
SLIDE 26

Create View: Glossary

1. Filters

  • Node: Published = Yes
  • Node: Type = Is one of Glossary Item

2. Fields

  • Node: Title
  • Content: Body

3. Sort Criteria

  • Node: Title asc

4. Page: Landing

  • Path = glossary
  • Group By = Node: Title (length of 1)

5. Page: By Letter

  • Path = glossary/%
  • Arguments = Glossary Mode

6. Block: Letters

  • Arguments = Summary Sorted

26

slide-27
SLIDE 27

Create View: Glossary

  • 2. Fields – Add

27

slide-28
SLIDE 28

Create View: Glossary

  • 2. Fields – Add – Node: Title

28

slide-29
SLIDE 29

Create View: Glossary

  • 2. Fields – Add – Node: Title

29

slide-30
SLIDE 30

Create View: Glossary

  • 2. Fields – Add – Content: Body

30

slide-31
SLIDE 31

Create View: Glossary

  • 2. Fields

31

slide-32
SLIDE 32

Create View: Glossary

1. Filters

  • Node: Published = Yes
  • Node: Type = Is one of Glossary Item

2. Fields

  • Node: Title
  • Content: Body

3. Sort Criteria

  • Node: Title asc

4. Page: Landing

  • Path = glossary
  • Group By = Node: Title (length of 1)

5. Page: By Letter

  • Path = glossary/%
  • Arguments = Glossary Mode

6. Block: Letters

  • Arguments = Summary Sorted

32

slide-33
SLIDE 33

Create View: Glossary

  • 3. Sort Criteria – Add

33

slide-34
SLIDE 34

Create View: Glossary

  • 3. Sort Criteria – Add – Node: Title

34

slide-35
SLIDE 35

Create View: Glossary

  • 3. Sort Criteria

35

slide-36
SLIDE 36

Create View: Glossary

1. Filters

  • Node: Published = Yes
  • Node: Type = Is one of Glossary Item

2. Fields

  • Node: Title
  • Content: Body

3. Sort Criteria

  • Node: Title asc

4. Page: Landing

  • Path = glossary
  • Group By = Node: Title (length of 1)

5. Page: By Letter

  • Path = glossary/%
  • Arguments = Glossary Mode

6. Block: Letters

  • Arguments = Summary Sorted

36

slide-37
SLIDE 37

Create View: Glossary

  • 4. Page Display – Add

37

slide-38
SLIDE 38

Create View: Glossary

  • 4. Page Display – Change Name “Page: Landing”

38

slide-39
SLIDE 39

Create View: Glossary

  • 4. Page Display – Add Path “glossary”

39

slide-40
SLIDE 40

Create View: Glossary

  • 4. Page Display – Override Fields

40

slide-41
SLIDE 41

Create View: Glossary

  • 4. Page Display – Add Field – Node: Title

41

slide-42
SLIDE 42

Create View: Glossary

  • 4. Page Display – Override Style Settings – Group By

42

slide-43
SLIDE 43

Create View: Glossary

  • 4. Page Display – Override Style Settings – Group By

43

slide-44
SLIDE 44

Create View: Glossary

  • 4. Page Display – Preview

44

slide-45
SLIDE 45

Create View: Glossary

1. Filters

  • Node: Published = Yes
  • Node: Type = Is one of Glossary Item

2. Fields

  • Node: Title
  • Content: Body

3. Sort Criteria

  • Node: Title asc

4. Page: Landing

  • Path = glossary
  • Group By = Node: Title (length of 1)

5. Page: By Letter

  • Path = glossary/%
  • Arguments = Glossary Mode

6. Block: Letters

  • Arguments = Summary Sorted

45

slide-46
SLIDE 46

Create View: Glossary

  • 5. Page Display – Add

46

slide-47
SLIDE 47

Create View: Glossary

  • 5. Page Display – Change Name “Page: By Letter”

47

slide-48
SLIDE 48

Create View: Glossary

  • 5. Page Display – Add Path “glossary/%”

48

slide-49
SLIDE 49

Create View: Glossary

  • 5. Page Display – Override Arguments

49

slide-50
SLIDE 50

Create View: Glossary

  • 5. Page Display – Add Arguments

50

slide-51
SLIDE 51

Create View: Glossary

  • 5. Page Display – Configure Argument – Node: Title

51

slide-52
SLIDE 52

Create View: Glossary

  • 5. Page Display – Configure Argument – Node: Title

52

slide-53
SLIDE 53

Create View: Glossary

  • 5. Page Display – Preview

53

slide-54
SLIDE 54

Create View: Glossary

1. Filters

  • Node: Published = Yes
  • Node: Type = Is one of Glossary Item

2. Fields

  • Node: Title
  • Content: Body

3. Sort Criteria

  • Node: Title asc

4. Page: Landing

  • Path = glossary
  • Group By = Node: Title (length of 1)

5. Page: By Letter

  • Path = glossary/%
  • Arguments = Glossary Mode

6. Block: Letters

  • Arguments = Summary Sorted

54

slide-55
SLIDE 55

Create View: Glossary

  • 6. Block Display – Add

55

slide-56
SLIDE 56

Create View: Glossary

  • 6. Block Display – Change Name “Block: Letters”

56

slide-57
SLIDE 57

Create View: Glossary

  • 6. Block Display – Override Arguments

57

slide-58
SLIDE 58

Create View: Glossary

  • 6. Block Display – Add Arguments

58

slide-59
SLIDE 59

Create View: Glossary

  • 6. Block Display – Configure Arguments – Node: Title

59

slide-60
SLIDE 60

Create View: Glossary

  • 6. Block Display – Configure Arguments – Node: Title

60

slide-61
SLIDE 61

Create View: Glossary

  • 6. Block Display – Preview

61

slide-62
SLIDE 62

Create View: Glossary

1. Filters

  • Node: Published = Yes
  • Node: Type = Is one of Glossary Item

2. Fields

  • Node: Title
  • Content: Body

3. Sort Criteria

  • Node: Title asc

4. Page: Landing

  • Path = glossary
  • Group By = Node: Title (length of 1)

5. Page: By Letter

  • Path = glossary/%
  • Arguments = Glossary Mode

6. Block: Letters

  • Arguments = Summary Sorted

62

slide-63
SLIDE 63

View: Glossary

mysite.com/glossary

63

slide-64
SLIDE 64

View: Glossary

mysite.com/glossary/b

64

slide-65
SLIDE 65

View: Glossary

mysite.com/glossary/b/blue

65

slide-66
SLIDE 66

Create View: Glossary

Arguments – What did we just do? Page: Landing

  • Added a field of Node: Title
  • Used only the first letter
  • Exclude from display
  • Display settings -> Group by Node: Title
  • Path = glossary

Page: By Letter

  • Added argument of Node: Title
  • Used only the first letter
  • Hide page if no argument
  • Basic Validation (just text)
  • Path = glossary/%

Block

  • Added argument of Node: Title
  • Used only the first letter
  • Summary Sorted if no argument
  • Basic Validation (just text)

66

slide-67
SLIDE 67

67

Example 2 Side Content

slide-68
SLIDE 68

Example: Side Content

Our goal is to show specific related content in the sidebar for specific nodes. The content editor should be able to create as much content as they want and assign the page it should appear on.

68

slide-69
SLIDE 69

View: Side Content

Preview

69

slide-70
SLIDE 70

Definition: Relationships

A relationship allows you to expand the

  • riginal query to include additional objects.

~Matt Tucker, PingVision

Find a common item between 2 different

  • bjects so you can display related

information. If you want to reduce the results and cannot find what you are looking for in “filters”, there is a good chance that it is a “relationship”.

70

slide-71
SLIDE 71

Example: Side Content

CONTRIBUTED MODULES DOWNLOADED

  • Views
  • Views Exporter
  • Views UI
  • CCK
  • Content
  • Option Widgets
  • Node Reference: allows nodes to

be related

  • Text
  • Node Relationships: “Create and

Reference” feature

  • Modal Frame API: pops up the

node add

  • jQuery UI (plus library)
  • Back Reference: maintain 1-1

relationships between all shared instances of a nodereference field

CUSTOM MODULE CREATED

  • drupalconsf2010: site-

specific customizations

71

slide-72
SLIDE 72

Example: Side Content

APPROACH

  • Create Content Type
  • Create Content
  • Create View
  • Filters
  • Fields
  • Arguments
  • Relationships
  • Block
  • Place Block

CREATE VIEW

  • Filters
  • Fields
  • Arguments
  • Relationships
  • Block

72

slide-73
SLIDE 73

Create Content Type: side_content

Remove default “Body” field.

admin/content/types/add

73

slide-74
SLIDE 74

Create Content Type: side_content

Add CCK “Body” field.

admin/content/node-type/side-content/fields

74

slide-75
SLIDE 75

Create Content Type: side_content

Add CCK Node Reference field.

admin/content/node-type/side-content/fields

75

slide-76
SLIDE 76

Create Content Type: side_content

Add CCK Node Reference field.

admin/content/node-type/side-content/fields

76

slide-77
SLIDE 77

Edit Content Type: page

Add CCK Back Reference field.

admin/content/node-type/page/fields

77

slide-78
SLIDE 78

Edit Content Type: page

Add CCK Back Reference field.

admin/content/node-type/side-content/fields

78

slide-79
SLIDE 79

Edit Content Type: page

Configure Node Relationships

admin/content/node-type/page/relationships/noderef

79

slide-80
SLIDE 80

Create Content: page

Result of Node Relationships Configuration

node/add/page

80

slide-81
SLIDE 81

Create Content: page

Result of Node Relationships Configuration

node/add/page

81

slide-82
SLIDE 82

Create Content

Page & Side Content

admin/content/node

82

slide-83
SLIDE 83

Create View: Side Content

1. Filters

  • Node: Published = Yes
  • Node: Type = Is one of Side Content

2. Fields

  • Node: Title
  • Content: Body

3. Arguments

  • Node ID of Page = sidecontent_parent

4. Relationships

  • Node ID of Page = sidecontent_parent

5. Block: Show Children

83

slide-84
SLIDE 84

Create View: Side Content

1. Filters

  • Node: Published = Yes
  • Node: Type = Is one of Side Content

2. Fields

  • Node: Title
  • Content: Body

3. Arguments

  • Node ID of Page = sidecontent_parent

4. Relationships

  • Node ID of Page = sidecontent_parent

5. Block: Show Children

84

slide-85
SLIDE 85

Create View: Side Content

  • 1. Filters - Add

85

slide-86
SLIDE 86

Create View: Side Content

1. Filters

  • Node: Published = Yes
  • Node: Type = Is one of Side Content

2. Fields

  • Node: Title
  • Content: Body

3. Arguments

  • Node ID of Page = sidecontent_parent

4. Relationships

  • Node ID of Page = sidecontent_parent

5. Block: Show Children

86

slide-87
SLIDE 87

Create View: Side Content

  • 2. Fields – Add

87

slide-88
SLIDE 88

Create View: Side Content

1. Filters

  • Node: Published = Yes
  • Node: Type = Is one of Side Content

2. Fields

  • Node: Title
  • Content: Body

3. Arguments

  • Node ID of Page = sidecontent_parent

4. Relationships

  • Node ID of Page = sidecontent_parent

5. Block: Show Children

88

slide-89
SLIDE 89

Create View: Side Content

  • 3. Arguments – Add

89

slide-90
SLIDE 90

Create View: Side Content

  • 3. Arguments – Add

90

slide-91
SLIDE 91

Create View: Side Content

  • 3. Arguments – Add

91

slide-92
SLIDE 92

Create View: Side Content

  • 3. Arguments – Add

92

slide-93
SLIDE 93

Create View: Side Content

Arguments - What did we just do? If we are displaying a block of content (related nodes) on a page, the only information we have available to us is node id of the page we are on. We created an argument that is the node id of the page we are viewing AND equal to the value in the node reference of the side content. Page nid argument = Side Content node reference field nid (field_sidecontent_parent)

93

slide-94
SLIDE 94

Create View: Side Content

1. Filters

  • Node: Published = Yes
  • Node: Type = Is one of Side Content

2. Fields

  • Node: Title
  • Content: Body

3. Arguments

  • Node ID of Page = sidecontent_parent

4. Relationships

  • Node ID of Page = sidecontent_parent

5. Block: Show Children

94

slide-95
SLIDE 95

Create View: Side Content

  • 4. Relationships – Add

95

slide-96
SLIDE 96

Create View: Side Content

  • 4. Relationships – Add

96

slide-97
SLIDE 97

Create View: Side Content

  • 4. Relationships – Add

97

slide-98
SLIDE 98

Create View: Side Content

Relationships- What did we just do? On a page, only show content where the page nid = the node reference (parent) nid in the side_content Page nid argument = Side Content node reference field nid (field_sidecontent_parent)

98

slide-99
SLIDE 99

Create View: Side Content

What is the difference between the argument and relationship we just created? Argument = We want to use information from the url and how we want to use it Relationship = Only show content where the information from the url matches Page nid argument = Side Content node reference field nid (field_sidecontent_parent)

99

slide-100
SLIDE 100

Create View: Side Content

1. Filters

  • Node: Published = Yes
  • Node: Type = Is one of Side Content

2. Fields

  • Node: Title
  • Content: Body

3. Arguments

  • Node ID of Page = sidecontent_parent

4. Relationships

  • Node ID of Page = sidecontent_parent

5. Block: Show Children

100

slide-101
SLIDE 101

Create View: Side Content

  • 5. Block Display – Add

101

slide-102
SLIDE 102

Create View: Side Content

1. Filters

  • Node: Published = Yes
  • Node: Type = Is one of Side Content

2. Fields

  • Node: Title
  • Content: Body

3. Arguments

  • Node ID of Page = sidecontent_parent

4. Relationships

  • Node ID of Page = sidecontent_parent

5. Block: Show Children

102

slide-103
SLIDE 103

View: Side Content

Preview

103

slide-104
SLIDE 104

Export Views – Why?

  • Increase site portability
  • The view is in code, as opposed to in

the database, so you can easily move it anywhere, like from a development environment to production

  • Increase error tracking, enable “undo”
  • You can use source control on

anything in code

104

slide-105
SLIDE 105

Export Views

admin/build/views 3 States of Views NORMAL Only in the database OVERRIDDEN Original in code, current in the database DEFAULT Only in code

105

slide-106
SLIDE 106

Export Views

Exported View code for mymodule/views/side_content.inc

106

slide-107
SLIDE 107

Export Views

Exported View code in mymodule/views/side_content.inc

<?php [paste export here] $views[$view->name] = $view;

107

slide-108
SLIDE 108

Export Views

Exported View code in mymodule/mymodule.module

108

slide-109
SLIDE 109

Export Views

admin/build/views/tools admin/build/views admin/build/views

http://developedbymiche.com/blog/2009/09/20/drupalcon-paris-2009-staging-drupal

  • -slide 27

109

slide-110
SLIDE 110

Additional Resources

  • Views 1 Arguments Documentation:

http://drupal.org/node/54455

  • Arguments & Relationships

Example:

http://drupal.org/node/289738

  • Arguments Video:

http://gotdrupal.com/videos/drupal- views-arguments

  • Relationships Tutorial:

http://drupaleasy.com/blogs/ultimike/2 009/07/using-viewsrelationships- arguments-attachments

  • Relationships Video:

http://drewish.com/node/127

  • Relationships Video:

http://gotdrupal.com/videos/drupal-views-relationships

110

slide-111
SLIDE 111

Credits

Development:

  • Mike Machnik – commonplaces.com

Images: Calvin & Hobbes by Bill Watterson

  • Fast: http://www.greenideasblog.com/molars/archives/2006/07/no_open_flame_b.html
  • Arguments: http://www.weavingnetworks.com/2009/05/walking-their-mile-their-

way.html

  • Relationships: http://dailygumboot.ca/2009/11/build-relationships-build-community-

hugs-and-other-acts-of-kindness/

  • Side Content: http://reedsolomon.blogspot.com/2007/10/calvin-hobbes.html
  • Background Information, Export Views, Resources:

http://forum.mininova.org/lofiversion/index.php?t235033603.html

Other Images:

  • Glossary: http://thehyperblogger.com/blog/blog-marketing-a-definition-or-two/
  • Magnifying Glass: http://margotmystic.wordpress.com/2008/09/20/palmistry-use-a-

magnifying-glass-medical-stigmata-lines/

Content

  • http://www.wikipedia.org

111

slide-112
SLIDE 112

Questions?

Michelle Lauer Drupal.org: miche Twitter: @bymiche Blog: developedbymiche.com/downloads CP: commonplaces.com/resources Free stickers available!

112