Difference between revisions of "Drupal/C3/Table-of-Fields-with-Views/English-timed"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
(3 intermediate revisions by 2 users not shown)
Line 14: Line 14:
 
| 00:12
 
| 00:12
 
| To record this tutorial, I am using:
 
| To record this tutorial, I am using:
−
* '''Ubuntu Linux Operating System'''
+
'''Ubuntu Linux Operating System'''
−
* '''Drupal 8''' and
+
'''Drupal 8''' and
−
* '''Firefox''' Web browser.
+
'''Firefox''' Web browser.
  
 
|-
 
|-
Line 64: Line 64:
 
|-
 
|-
 
| 01:28
 
| 01:28
−
| We will name this as "Upcoming Events". Now change the''' Content of type "All"''' to''' "Events"'''.
+
| We will name this as "Upcoming Events". Now change the''' Content of type''' "All" to "Events".
  
 
|-
 
|-
Line 76: Line 76:
 
|-
 
|-
 
| 01:55
 
| 01:55
−
|Put a check on''' Create a page''' and in the''' Display format,''' choose''' Table of fields.'''
+
|Put a check on''' Create a page''' and in the''' Display format,''' choose''' "Table" of fields.'''
  
 
|-
 
|-
Line 88: Line 88:
 
|-
 
|-
 
| 02:17
 
| 02:17
−
|Under''' Menu''', we will choose''' Main navigation''' and we will call the''' Link text''' as''' Upcoming Events.'''
+
|Under''' Menu''', we will choose "Main navigation" and we will call the''' Link text''' as "Upcoming Events".
  
 
|-
 
|-
Line 101: Line 101:
 
| 02:37
 
| 02:37
 
| Let us go through our 5 questions.  
 
| Let us go through our 5 questions.  
−
 
+
The''' Display''' is a "page".
−
* The''' Display''' is a page.
+
  
 
|-
 
|-
 
| 02:42
 
| 02:42
−
| The''' FORMAT''' is a''' table'''.
+
| The''' FORMAT''' is a "table".
  
 
|-
 
|-
 
| 02:45
 
| 02:45
−
| Under''' FIELDS,''' we have''' Title.'''
+
| Under''' FIELDS,''' we have "Title".
  
 
|-
 
|-
 
| 02:48
 
| 02:48
−
| In the''' FILTER CRITERIA''' we only want''' Upcoming events,''' so we will need to change that.
+
| In the''' FILTER CRITERIA''' we only want "Upcoming events", so we will need to change that.
  
 
|-
 
|-
Line 158: Line 157:
 
|-
 
|-
 
| 03:54
 
| 03:54
−
|So, we can actually  pull in information from''' User Groups''' that are sponsoring our '''Events'''  
+
|So, we can actually  pull in information from''' User Groups''' that are sponsoring our '''Events''' and put them in this''' View'''.
−
and put them in this''' View'''.
+
  
 
|-
 
|-
Line 171: Line 169:
 
|-
 
|-
 
| 04:15
 
| 04:15
−
| Click on''' Add''' and scroll down till you find the''' Event Date field'''.
+
| Click on''' Add''' and scroll down till you find the''' Event Date''' field.
  
 
|-
 
|-
Line 195: Line 193:
 
|-
 
|-
 
| 04:47
 
| 04:47
−
|Let’s leave the''' Date format''' as default here; in other words''' medium date.'''
+
|Let’s leave the''' Date format''' as default here; in other words "medium date".
  
 
|-
 
|-
Line 223: Line 221:
 
|-
 
|-
 
| 05:25
 
| 05:25
−
|Let’s choose an''' Image style''' of''' Thumbnail.'''
+
|Let’s choose an''' Image style''' of "Thumbnail".
  
 
|-
 
|-
 
| 05:30
 
| 05:30
−
|Then under''' Link image to''' dropdown, choose''' Content.'''
+
|Then, under''' Link image to''' drop-down, choose "Content".
  
 
|-
 
|-
 
| 05:36
 
| 05:36
−
| In later tutorials, we will learn to create a new''' Image style''' for this''' layout.''' But for now, we will choose''' Thumbnail'''.
+
| In later tutorials, we will learn to create a new''' Image style''' for this''' layout.''' But for now, we will choose "Thumbnail".
  
 
|-
 
|-
Line 379: Line 377:
 
|-
 
|-
 
| 09:17
 
| 09:17
−
|Next we must check the '''SORT CRITERIA.'''
+
|Next, we must check the '''SORT CRITERIA.'''
  
 
|-
 
|-
Line 391: Line 389:
 
|-
 
|-
 
| 09:37
 
| 09:37
−
| To change this click on''' Authored on''' and click''' Remove.'''
+
| To change this, click on''' Authored on''' and click''' Remove.'''
  
 
|-
 
|-
Line 439: Line 437:
 
|-
 
|-
 
| 10:48
 
| 10:48
−
| Scroll back up. Locate''' FORMAT, Table''' and next to it, click on the word''' Settings'''.
+
| Scroll back up. Locate''' FORMAT > Table''' and next to it, click on the word''' Settings'''.
  
 
|-
 
|-
 
| 10:57
 
| 10:57
−
|In the''' Content Event Logo,''' change the''' COLUMN''' drop-down to''' Title.'''
+
|In the''' Content Event Logo,''' change the''' COLUMN''' drop-down to "Title".
  
 
|-
 
|-
 
| 11:03
 
| 11:03
−
|For the''' SEPARATOR''' up here, just put a simple line break.
+
|For the''' SEPARATOR''', up here, just put a simple '''line break'''.
  
 
|-
 
|-
Line 521: Line 519:
 
| 13:07
 
| 13:07
 
| Spoken Tutorial Project is funded by-
 
| Spoken Tutorial Project is funded by-
−
 
+
NMEICT, Ministry of Human Resource Development and
−
* NMEICT, Ministry of Human Resource Development and
+
NVLI, Ministry of Culture, Government of India.
−
* NVLI, Ministry of Culture
+
−
Government of India.
+
  
 
|-
 
|-

Latest revision as of 17:54, 24 March 2017

Time Narration
00:01 Welcome to the Spoken tutorial on Table of Fields with Views.
00:07 In this tutorial, we will learn to create a table of fields.
00:12 To record this tutorial, I am using:

Ubuntu Linux Operating System Drupal 8 and Firefox Web browser.

00:23 You can use any web browser as per your choice.
00:27 We will now learn what is a Table of fields.
00:31 Suppose, we want to display a list of future events in a table like this.
00:38 Here, a user can see some details of the events and their respective dates.
00:45 The fields shown here are there in the 'Events' Content type.
00:50 Here, we display only some of the fields of some of the events.
00:55 In particular, we display only events that have dates after the current time.
01:02 Such a selected list of contents is also called as Reports or Query Results, in other programs.
01:11 Let us now create a view for a table of fields.
01:16 Now, let us open our website which we created earlier.
01:21 Go to Shortcuts, then Views and click Add new view.
01:28 We will name this as "Upcoming Events". Now change the Content of type "All" to "Events".
01:37 We can do this for any Content type – Log entries, Files, Content revisions, Taxonomy terms, Users, Custom blocks and so on.
01:50 For now, we’ll just leave it sorted by Newest first.
01:55 Put a check on Create a page and in the Display format, choose "Table" of fields.
02:03 We will keep the default value of 10 in Items to display.
02:09 Next, we will put a check on Use a pager and Create a menu link.
02:17 Under Menu, we will choose "Main navigation" and we will call the Link text as "Upcoming Events".
02:28 Our menus are not well organized right now, but we’ll do that soon.
02:34 Click Save and edit.
02:37 Let us go through our 5 questions.

The Display is a "page".

02:42 The FORMAT is a "table".
02:45 Under FIELDS, we have "Title".
02:48 In the FILTER CRITERIA we only want "Upcoming events", so we will need to change that.
02:55 SORT CRITERIA is wrong because we want to order it on the Event date and not the Published date.
03:03 To start off, let’s click Save.
03:06 In the middle, here, we have our PAGE SETTINGS.
03:10 We have the Path, the Menu, the Access Permission and now everybody will have access to the landing page.
03:20 We can add a HEADER or a FOOTER by clicking on the Add buttons here.
03:27 We can add what to do if there are no results.
03:31 We can specify how many items get shown on a page
03:36 and whether there’s a pager at the bottom or not with the Read More link at the bottom of View.
03:44 Under the ADVANCED tab, are things that we will not cover in this tutorial.
03:50 We’ve already connected Events and User Groups.
03:54 So, we can actually pull in information from User Groups that are sponsoring our Events and put them in this View.
04:03 This is done by using the RELATIONSHIPS and CONTEXT that we created.
04:10 Now, let us go and add the fields that we need in our table.
04:15 Click on Add and scroll down till you find the Event Date field.
04:21 I label my fields very carefully using the Content type name.
04:27 So, I can find them easily in Views later on.
04:32 Put a check mark on Event Date and click Apply.
04:37 Here, we will choose some of the settings.
04:41 For now, Create a label and Place a colon options are checked.
04:47 Let’s leave the Date format as default here; in other words "medium date".
04:53 Don’t worry about any of those right now.
04:57 And lastly, click Apply all displays button.
05:02 So, now we have 2 columns - TITLE and EVENT DATE.
05:08 Let’s add our next field. Click Add and this time scroll down until you find Event Logo.
05:17 Select it and click Apply.
05:21 This time uncheck Create a label option.
05:25 Let’s choose an Image style of "Thumbnail".
05:30 Then, under Link image to drop-down, choose "Content".
05:36 In later tutorials, we will learn to create a new Image style for this layout. But for now, we will choose "Thumbnail".
05:45 Click Apply. Now, in the preview, we should see the thumbnails that have been generated by devel, for each Event.
05:55 Let’s go back and click on Add again. This time, scroll down and choose more than one field at a time.
06:04 Choose Event Topics and Event Website. And then click on Apply all displays button.
06:13 On the next page, leave everything as it is and click Apply.
06:18 Notice that now we can set up 2 fields at once in Views and each one will have its own Settings screen.
06:27 Once again, click on Apply all displays.'
06:32 Now we have EVENT TOPICS and EVENT WEBSITE.
06:37 We have our title, date, topics and website. Let’s click on Save.
06:45 It’s a good habit to save your work frequently.
06:49 Let’s check. Our Display is a Page.
06:53 Our FORMAT is a Table.
06:56 Our FIELDS are set.
06:59 The FILTER CRITERIA and SORT CRITERIA are still wrong.
07:04 To add a FILTER CRITERIA, click Add button.
07:08 Scroll down till you find Event Date. Then, choose the Event Date and click Apply.
07:17 This screen is very important.
07:20 Under Operator drop-down, we will select "Is greater than or equal to".
07:26 Under Value type, if we put in today’s date, that would be inconvenient.
07:32 We would then have to put in a new date everyday. But we could choose "An offset of the current time..."
07:40 And, in the Value field, type the word “now”.
07:45 This means, only those events after the current time will be displayed.
07:51 The current time is not the time we are creating this. It is the time when the user is viewing it.
07:59 So, the user will only see the future events.
08:03 Click on Apply.
08:05 As we can see, the dummy contents generated by devel didn’t give us any future dates.
08:13 So, let’s manually update some of our events to make sure our View works correctly.
08:20 Find some events and change the Event Date to something in the future.
08:25 Go to Content. Filter by Events Type.
08:31 Choose any event and click on Edit. Then change the date to a future day.
08:39 Let's click on Save.
08:42 Pause the tutorial and update about 6 or 7 events.
08:49 When you’re done, come back to the tutorial.
08:53 Go to Shortcuts. Click on Views. Find Upcoming Events. Click on Edit.
09:01 We will now go back to editing the view where we left off.
09:06 Scroll down to see the preview.
09:10 We are now filtering correctly with our Event Date being greater than or equal to now.
09:17 Next, we must check the SORT CRITERIA.
09:22 By default, Drupal sorts the content by the date of authoring in decreasing order.
09:30 For Events, it is useful to have the Event Date in ascending order.
09:37 To change this, click on Authored on and click Remove.
09:44 Click Add and once again scroll down until you find Event Date.
09:51 Click Apply.
09:53 Now, under Order, select Sort ascending. That sorts our events from today onwards.
10:03 Click Apply.
10:05 Now we have updated our Events and set the Sort Criteria correctly.
10:11 We should be able to see a listing that looks something like this.
10:16 All the events that are coming up in the future, are listed in EVENT DATE order.
10:23 Make sure you click Save, before we move on.
10:27 So, there is one more thing that we are going to do with this particular View.
10:32 Let’s combine the TITLE and Logo columns and then let’s make the TITLE and EVENT DATE sortable.
10:41 When we do this, a user can click on the TITLE and it will sort by that feature.
10:48 Scroll back up. Locate FORMAT > Table and next to it, click on the word Settings.
10:57 In the Content Event Logo, change the COLUMN drop-down to "Title".
11:03 For the SEPARATOR, up here, just put a simple line break.
11:08 Make Title and Event Date columns SORTABLE in Ascending order and click Apply.
11:17 So, now our Title and logo are in the same column and both TITLE and EVENT DATE are now sortable.
11:26 Let’s change that word Title to Event Name.
11:31 Click on the word "Title" and in the Label, change the word "Title" to "Event Name".

Then click Apply.

11:40 Scroll down to the preview area. Our Event Name and logo and date are all set.
11:48 In later tutorials, we will learn to change the size of our logos to make this a little bit nicer.
11:55 For now, click Save and let’s test our View.
11:59 Click on Back to site to go to the Homepage.
12:03 Click on Upcoming Events.
12:06 You should see a table nicely laying out the events that are coming up only in the future.
12:13 You can also see that you can sort by Event Name and Event Date.
12:20 With this, we have completed our first Table View.
12:24 Let us summarize.
12:26 In this tutorial, we have learnt about creating tables of fields.
12:41 This video is adapted from Acquia and OSTraining and revised by Spoken Tutorial Project, IIT Bombay.
12:51 The video at this link summarizes the Spoken Tutorial project. Please download and watch it.
12:58 The Spoken Tutorial Project team conducts workshops and gives certificates. For more details, please write to us.
13:07 Spoken Tutorial Project is funded by-

NMEICT, Ministry of Human Resource Development and NVLI, Ministry of Culture, Government of India.

13:19 This is Varsha Venkatesh, signing off. Thanks for joining.

Contributors and Content Editors

PoojaMoolya, Pratik kamble, Sandhya.np14

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Drupal/C3/Table-of-Fields-with-Views/English-timed&oldid=34144"