Drupal/C3/Table-of-Fields-with-Views/English-timed
From Script | Spoken-Tutorial
Revision as of 10:53, 8 September 2016 by Sandhya.np14 (Talk | contribs)
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:
|
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-
|
13:19 | This is Varsha Venkatesh, signing off. Thanks for joining. |