Difference between revisions of "Drupal/C3/Table-of-Fields-with-Views/English-timed"
From Script | Spoken-Tutorial
PoojaMoolya (Talk | contribs) (Created page with "{| border =1 | '''Time''' | '''Narration''' |- | 00:01 | Welcome to the Spoken tutorial on''' Table of Fields with Views''' |- | 00:07 | In this tutorial, we will learn to...") |
|||
(4 intermediate revisions by 2 users not shown) | |||
Line 5: | Line 5: | ||
|- | |- | ||
| 00:01 | | 00:01 | ||
− | | Welcome to the Spoken tutorial on''' Table of Fields with Views''' | + | | Welcome to the '''Spoken tutorial''' on''' Table of Fields with Views'''. |
|- | |- | ||
| 00:07 | | 00:07 | ||
− | | In this tutorial, we will learn to | + | | In this tutorial, we will learn to create a '''table''' of '''fields'''. |
|- | |- | ||
| 00:12 | | 00:12 | ||
− | | To record this tutorial, I am using | + | | To record this tutorial, I am using: |
− | + | '''Ubuntu Linux Operating System''' | |
− | + | '''Drupal 8''' and | |
− | + | '''Firefox''' Web browser. | |
− | + | ||
|- | |- | ||
Line 25: | Line 24: | ||
|- | |- | ||
| 00:27 | | 00:27 | ||
− | | We will now learn what is a''' Table | + | | We will now learn what is a''' Table''' of fields. |
|- | |- | ||
| 00:31 | | 00:31 | ||
− | |Suppose we want to display a list of future events in a '''table''' like this. | + | |Suppose, we want to display a list of future events in a '''table''' like this. |
|- | |- | ||
Line 37: | Line 36: | ||
|- | |- | ||
| 00:45 | | 00:45 | ||
− | |The fields shown here are there in the '''Events Content type'''. | + | |The fields shown here are there in the ''''Events' Content type'''. |
|- | |- | ||
| 00:50 | | 00:50 | ||
− | |Here we display only some of the | + | |Here, we display only some of the fields of some of the events. |
|- | |- | ||
Line 49: | Line 48: | ||
|- | |- | ||
| 01:02 | | 01:02 | ||
− | |Such a selected list of | + | |Such a selected list of contents is also called as '''Reports '''or '''Query Results, '''in other programs. |
|- | |- | ||
Line 57: | Line 56: | ||
|- | |- | ||
| 01:16 | | 01:16 | ||
− | | Now let us open our website which we created earlier. | + | | Now, let us open our website which we created earlier. |
|- | |- | ||
Line 65: | Line 64: | ||
|- | |- | ||
| 01:28 | | 01:28 | ||
− | | We will name this as | + | | We will name this as "Upcoming Events". Now change the''' Content of type''' "All" to "Events". |
|- | |- | ||
Line 77: | 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 89: | Line 88: | ||
|- | |- | ||
| 02:17 | | 02:17 | ||
− | |Under''' Menu''', we will choose | + | |Under''' Menu''', we will choose "Main navigation" and we will call the''' Link text''' as "Upcoming Events". |
|- | |- | ||
|02:28 | |02:28 | ||
− | | Our | + | | Our menus are not well organized right now, but we’ll do that soon. |
|- | |- | ||
Line 102: | 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". | |
− | + | ||
|- | |- | ||
| 02:42 | | 02:42 | ||
− | | The''' FORMAT''' is a | + | | The''' FORMAT''' is a "table". |
|- | |- | ||
| 02:45 | | 02:45 | ||
− | | Under''' FIELDS,''' we have | + | | Under''' FIELDS,''' we have "Title". |
|- | |- | ||
| 02:48 | | 02:48 | ||
− | | In the''' FILTER CRITERIA''' we only want | + | | In the''' FILTER CRITERIA''' we only want "Upcoming events", so we will need to change that. |
|- | |- | ||
Line 127: | Line 125: | ||
|- | |- | ||
| 03:06 | | 03:06 | ||
− | | In the middle here, we have our''' PAGE SETTINGS'''. | + | | In the middle, here, we have our''' PAGE SETTINGS'''. |
|- | |- | ||
Line 143: | Line 141: | ||
|- | |- | ||
| 03:31 | | 03:31 | ||
− | | We can specify how many items get shown on a''' page''' | + | | We can specify how many items get shown on a''' page''' |
|- | |- | ||
| 03:36 | | 03:36 | ||
− | | | + | |and whether there’s a''' pager''' at the bottom or not with the '''Read More link '''at the bottom of ''' View.''' |
|- | |- | ||
Line 159: | 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 172: | Line 169: | ||
|- | |- | ||
| 04:15 | | 04:15 | ||
− | | Click on''' Add''' and scroll down till you find the''' Event Date | + | | Click on''' Add''' and scroll down till you find the''' Event Date''' field. |
|- | |- | ||
| 04:21 | | 04:21 | ||
− | |I label my | + | |I label my fields very carefully using the''' Content type name.''' |
|- | |- | ||
Line 188: | Line 185: | ||
|- | |- | ||
| 04:37 | | 04:37 | ||
− | |Here we will choose some of the settings. | + | |Here, we will choose some of the settings. |
|- | |- | ||
Line 196: | Line 193: | ||
|- | |- | ||
| 04:47 | | 04:47 | ||
− | |Let’s leave the''' Date format''' as default here; in other words | + | |Let’s leave the''' Date format''' as default here; in other words "medium date". |
|- | |- | ||
Line 208: | Line 205: | ||
|- | |- | ||
| 05:02 | | 05:02 | ||
− | | So now we have 2 | + | | So, now we have 2 '''column'''s -''' TITLE''' and''' EVENT DATE'''. |
|- | |- | ||
|05:08 | |05:08 | ||
− | | Let’s add our next field | + | | Let’s add our next field. Click''' Add''' and this time scroll down until you find''' Event Logo'''. |
|- | |- | ||
Line 224: | Line 221: | ||
|- | |- | ||
| 05:25 | | 05:25 | ||
− | |Let’s choose an''' Image style''' of | + | |Let’s choose an''' Image style''' of "Thumbnail". |
|- | |- | ||
| 05:30 | | 05:30 | ||
− | |Then under''' Link image to''' | + | |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 | + | | In later tutorials, we will learn to create a new''' Image style''' for this''' layout.''' But for now, we will choose "Thumbnail". |
|- | |- | ||
| 05:45 | | 05:45 | ||
− | | Click''' Apply.''' Now, in the preview, we should see the''' thumbnails''' that have been generated by''' devel,''' for each''' Event.''' | + | | Click''' Apply.''' Now, in the '''preview''', we should see the''' thumbnails''' that have been generated by''' devel,''' for each''' Event.''' |
|- | |- | ||
Line 252: | Line 249: | ||
|- | |- | ||
| 06:18 | | 06:18 | ||
− | |Notice that now we can set up 2 | + | |Notice that now we can set up 2 fields at once in''' Views''' and each one will have its own '''Settings''' screen. |
|- | |- | ||
Line 272: | Line 269: | ||
|- | |- | ||
| 06:49 | | 06:49 | ||
− | | Let’s check. Our''' Display''' is a''' Page''' | + | | Let’s check. Our''' Display''' is a''' Page'''. |
|- | |- | ||
| 06:53 | | 06:53 | ||
− | |Our''' FORMAT''' is a''' Table''' | + | |Our''' FORMAT''' is a''' Table'''. |
|- | |- | ||
| 06:56 | | 06:56 | ||
− | |Our''' FIELDS''' are set | + | |Our''' FIELDS''' are set. |
|- | |- | ||
Line 292: | Line 289: | ||
|- | |- | ||
| 07:08 | | 07:08 | ||
− | |Scroll down till you find''' Event Date.''' Then, choose the''' Event Date''' | + | |Scroll down till you find''' Event Date.''' Then, choose the''' Event Date''' and click''' Apply.''' |
|- | |- | ||
Line 300: | Line 297: | ||
|- | |- | ||
| 07:20 | | 07:20 | ||
− | |Under''' Operator''' | + | |Under''' Operator''' drop-down, we will select "Is greater than or equal to". |
|- | |- | ||
Line 308: | Line 305: | ||
|- | |- | ||
| 07:32 | | 07:32 | ||
− | |We would then have to put in a new date everyday. But we could choose | + | |We would then have to put in a new date everyday. But we could choose "An offset of the current time..." |
|- | |- | ||
| 07:40 | | 07:40 | ||
− | |And in the''' Value | + | |And, in the''' Value''' field, type the word “now”. |
|- | |- | ||
| 07:45 | | 07:45 | ||
− | |This means only those events after the current time will be displayed. | + | |This means, only those events after the current time will be displayed. |
|- | |- | ||
Line 324: | Line 321: | ||
|- | |- | ||
| 07:59 | | 07:59 | ||
− | |So the user will only see the future events. | + | |So, the user will only see the future events. |
|- | |- | ||
Line 336: | Line 333: | ||
|- | |- | ||
| 08:13 | | 08:13 | ||
− | |So, let’s manually update some of our events | + | |So, let’s manually update some of our events to make sure our''' View''' works correctly. |
|- | |- | ||
Line 344: | Line 341: | ||
|- | |- | ||
| 08:25 | | 08:25 | ||
− | | Go to '''Content'''. Filter by '''Events Type'''. | + | | Go to '''Content'''. '''Filter''' by '''Events Type'''. |
|- | |- | ||
Line 356: | Line 353: | ||
|- | |- | ||
| 08:42 | | 08:42 | ||
− | | Pause the tutorial and update about 6 or 7 events. | + | | Pause the tutorial and '''update''' about 6 or 7 events. |
|- | |- | ||
Line 368: | Line 365: | ||
|- | |- | ||
| 09:01 | | 09:01 | ||
− | |We will now go back to editing the view where we left off. | + | |We will now go back to editing the '''view''' where we left off. |
|- | |- | ||
Line 380: | Line 377: | ||
|- | |- | ||
| 09:17 | | 09:17 | ||
− | |Next we must check the '''SORT CRITERIA.''' | + | |Next, we must check the '''SORT CRITERIA.''' |
|- | |- | ||
Line 388: | Line 385: | ||
|- | |- | ||
| 09:30 | | 09:30 | ||
− | |For '''Events''' it is useful to have the '''Event Date''' in ascending order. | + | |For '''Events''', it is useful to have the '''Event Date''' in ascending order. |
|- | |- | ||
| 09:37 | | 09:37 | ||
− | | To change this click on''' Authored on''' | + | | To change this, click on''' Authored on''' and click''' Remove.''' |
|- | |- | ||
| 09:44 | | 09:44 | ||
− | | Click''' Add''' | + | | Click''' Add''' and once again scroll down until you find''' Event Date'''. |
|- | |- | ||
Line 428: | Line 425: | ||
|- | |- | ||
| 10:27 | | 10:27 | ||
− | | So there is one more thing that we are going to do with this particular''' View.''' | + | | So, there is one more thing that we are going to do with this particular''' View.''' |
|- | |- | ||
| 10:32 | | 10:32 | ||
− | |Let’s combine the''' TITLE''' and''' Logo''' | + | |Let’s combine the''' TITLE''' and''' Logo''' '''column'''s and then let’s make the''' TITLE''' and''' EVENT DATE''' sortable. |
|- | |- | ||
Line 440: | Line 437: | ||
|- | |- | ||
| 10:48 | | 10:48 | ||
− | | Scroll back up. Locate''' FORMAT | + | | 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''' | + | |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 456: | Line 453: | ||
|- | |- | ||
| 11:17 | | 11:17 | ||
− | | So now our''' Title''' and''' logo''' are in the same column | + | | So, now our''' Title''' and''' logo''' are in the same column and both''' TITLE''' and''' EVENT DATE''' are now sortable. |
|- | |- | ||
Line 464: | Line 461: | ||
|- | |- | ||
| 11:31 | | 11:31 | ||
− | |Click on the word | + | |Click on the word "Title" and in the''' Label''', change the word "Title" to "Event Name". |
Then click''' Apply'''. | Then click''' Apply'''. | ||
Line 473: | Line 470: | ||
|- | |- | ||
| 11:48 | | 11:48 | ||
− | | In later tutorials, we will learn to change the size of our | + | | In later tutorials, we will learn to change the size of our logos to make this a little bit nicer. |
|- | |- | ||
| 11:55 | | 11:55 | ||
− | | For now, click''' Save''' | + | | For now, click''' Save''' and let’s test our''' View.''' |
|- | |- | ||
Line 505: | Line 502: | ||
|- | |- | ||
| 12:26 | | 12:26 | ||
− | |In this tutorial we have learnt about | + | |In this tutorial, we have learnt about creating '''tables''' of '''fields'''. |
|- | |- | ||
| 12:41 | | 12:41 | ||
− | | This video is adapted from Acquia and OSTraining and revised by Spoken Tutorial Project, IIT Bombay. | + | | This video is adapted from '''Acquia''' and '''OSTraining''' and revised by '''Spoken Tutorial Project, IIT Bombay'''. |
|- | |- | ||
| 12:51 | | 12:51 | ||
− | | The video at this link | + | | The video at this link summarizes the Spoken Tutorial project. Please download and watch it. |
|- | |- | ||
| 12:58 | | 12:58 | ||
− | | The Spoken Tutorial Project | + | | The Spoken Tutorial Project team conducts workshops and gives certificates. For more details, please write to us. |
|- | |- | ||
| 13:07 | | 13:07 | ||
− | | Spoken Tutorial Project is funded by | + | | Spoken Tutorial Project is funded by- |
− | + | NMEICT, Ministry of Human Resource Development and | |
− | + | NVLI, Ministry of Culture, Government of India. | |
− | + | ||
− | + | ||
− | Government of India. | + | |
|- | |- | ||
| 13:19 | | 13:19 | ||
− | | This is Varsha Venkatesh signing off. Thanks for joining. | + | | This is Varsha Venkatesh, signing off. Thanks for joining. |
|} | |} |
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. |