Difference between revisions of "Drupal/C3/Table-of-Fields-with-Views/English-timed"
From Script | Spoken-Tutorial
Sandhya.np14 (Talk | contribs) |
|||
| 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''' | |
| − | + | '''Drupal 8''' and | |
| − | + | '''Firefox''' Web browser. | |
|- | |- | ||
| Line 520: | Line 520: | ||
| 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. | |
| − | + | ||
|- | |- | ||
Revision as of 11:08, 7 October 2016
| 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. |
