Drupal/C3/Table-of-Fields-with-Views/English

Title of Script: Table of Fields with Views

Keywords: Drupal, Video Tutorial, Table, Fields, Table View, Sort, Events

Visual Cue	Narration
Slide 1: Table of Fields with Views	Welcome to the Spoken tutorial on Table of Fields with Views
Slide 2: Learning Objectives	In this tutorial, we will learn to Create a table of fields
Slide 3: System requirement	To record this tutorial, I am using Ubuntu Linux Operating System Drupal 8 and Firefox Web browser You can use any web browser as per your choice.

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

Slide 7: Summary	Let us summarize. In this tutorial we have learnt about Creating tables of fields
Slide 8: Acknowledgement	This video is adapted from Acquia and OSTraining and revised by Spoken Tutorial Project, IIT Bombay.
Slide 9: Acknowledgement	The video at this link summarises the Spoken Tutorial project. Pls download and watch it.
Slide 10: Spoken Tutorial Workshops	The Spoken Tutorial Project Team conducts workshops and gives certificates. For more details, please write to us.
Slide 11: Acknowledgement	Spoken Tutorial Project is funded by NMEICT, Ministry of Human Resource Development and NVLI, Ministry of Culture Government of India.
	This is Varsha Venkatesh signing off. Thanks for joining.

Contributors and Content Editors

Nancyvarkey, Priyacst