Drupal/C3/Table-of-Fields-with-Views/English-timed
From Script | Spoken-Tutorial
Revision as of 17:25, 30 August 2016 by PoojaMoolya (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 content 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.
|
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 dropdown, 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 dropdown, 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 dropdown 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 summarises 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
Government of India. |
13:19 | This is Varsha Venkatesh signing off. Thanks for joining. |