Difference between revisions of "Drupal/C3/Table-of-Fields-with-Views/English"
(Created page with "'''Title of Script:''' Table of Fields with Views '''Keywords: Drupal, Video Tutorial, Table, Fields, Table View, Sort, Events''' {| style="border-spacing:0;" | style="bor...") |
|||
(One intermediate revision by one other user not shown) | |||
Line 24: | Line 24: | ||
| style="border:1pt solid #000000;padding:0.097cm;"| In this tutorial, we will learn to | | style="border:1pt solid #000000;padding:0.097cm;"| In this tutorial, we will learn to | ||
− | * Create a table of fields | + | * Create a '''table''' of '''fields''' |
− | + | ||
− | + | ||
|- | |- | ||
Line 52: | Line 50: | ||
− | 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 58: | Line 56: | ||
− | The fields shown here are there in the '''Events | + | The fields shown here are there in the '''Events Content type'''. |
− | Here we display only some of the fields of some of the events. | + | Here we display only some of the '''fields''' of some of the events. |
Line 70: | Line 68: | ||
− | Let us now create a '''view '''for a table of fields. | + | Let us now create a '''view '''for a '''table''' of '''fields'''. |
|- | |- | ||
Line 120: | Line 118: | ||
|- | |- | ||
| style="border:1pt solid #000000;padding:0.185cm;"| 01:15 | | style="border:1pt solid #000000;padding:0.185cm;"| 01:15 | ||
− | | style="border:1pt solid #000000;padding:0.185cm;"| Click''' Save and edit''' | + | | style="border:1pt solid #000000;padding:0.185cm;"| Click''' Save and edit'''. |
|- | |- | ||
| style="border:1pt solid #000000;padding:0.185cm;"| 01:21 | | style="border:1pt solid #000000;padding:0.185cm;"| 01:21 | ||
| style="border:1pt solid #000000;padding:0.185cm;"| Let us go through our 5 questions. | | style="border:1pt solid #000000;padding:0.185cm;"| Let us go through our 5 questions. | ||
− | |||
* The''' Display''' is a page. | * The''' Display''' is a page. | ||
Line 131: | Line 128: | ||
* Under''' FIELDS,''' we have''' Title.''' | * Under''' FIELDS,''' we have''' Title.''' | ||
* In the''' FILTER CRITERIA''' we only want''' Upcoming events,''' so we will need to change that. | * In the''' FILTER CRITERIA''' we only want''' Upcoming events,''' so we will need to change that. | ||
− | |||
− | |||
|- | |- | ||
Line 147: | Line 142: | ||
− | We have the''' Path''', the''' Menu,''' the''' Access Permission''' | + | We have the''' Path''', the''' Menu,''' the''' Access Permission'''. |
+ | |||
+ | |||
+ | And now everybody will have access to the landing page. | ||
Line 160: | Line 158: | ||
− | And whether there’s a''' pager''' at the bottom or not with the '''Read More link '''at the bottom of | + | And whether there’s a''' pager''' at the bottom or not with the '''Read More link '''at the bottom of ''' View.''' |
|- | |- | ||
Line 179: | Line 177: | ||
|- | |- | ||
| style="border:1pt solid #000000;padding:0.185cm;"| 02:46 | | style="border:1pt solid #000000;padding:0.185cm;"| 02:46 | ||
− | | style="border:1pt solid #000000;padding:0.185cm;"| Now, let us go and add the fields that we need in our''' table'''. | + | | style="border:1pt solid #000000;padding:0.185cm;"| Now, let us go and add the '''fields''' that we need in our''' table'''. |
|- | |- | ||
| style="border:1pt solid #000000;padding:0.185cm;"| 02:51 | | style="border:1pt solid #000000;padding:0.185cm;"| 02:51 | ||
− | | style="border:1pt solid #000000;padding:0.185cm;"| Click on''' Add''' and scroll down till you find the''' Event Date''' | + | | style="border:1pt solid #000000;padding:0.185cm;"| Click on''' Add''' and scroll down till you find the''' Event Date field'''. |
− | I label my fields very carefully using the''' Content type name.''' | + | I label my '''fields''' very carefully using the''' Content type name.''' |
Line 234: | Line 232: | ||
− | Then under''' Link image''' | + | Then under''' Link image to''' dropdown, choose''' Content.''' |
|- | |- | ||
Line 255: | Line 253: | ||
− | This time, scroll down and choose more than one field at a time. | + | This time, scroll down and choose more than one '''field''' at a time. |
|- | |- | ||
Line 269: | Line 267: | ||
− | Notice that now we can set up 2 fields at once in''' Views''' | + | Notice that now we can set up 2 '''fields''' at once in''' Views'''. |
+ | |||
+ | |||
+ | And each one will have its own '''Settings''' screen. | ||
|- | |- | ||
Line 293: | Line 294: | ||
* Our''' FIELDS''' are set | * Our''' FIELDS''' are set | ||
* The''' FILTER CRITERIA''' and''' SORT CRITERIA''' are still wrong. | * The''' FILTER CRITERIA''' and''' SORT CRITERIA''' are still wrong. | ||
− | |||
− | |||
|- | |- | ||
| style="border:1pt solid #000000;padding:0.185cm;"| 05:20 | | style="border:1pt solid #000000;padding:0.185cm;"| 05:20 | ||
− | | style="border:1pt solid #000000;padding:0.185cm;"| To add a''' FILTER CRITERIA,''' click | + | | style="border:1pt solid #000000;padding:0.185cm;"| To add a''' FILTER CRITERIA,''' click ''' Add''' button. |
− | Scroll down till you find''' Event Date | + | Scroll down till you find''' Event Date.''' |
Line 311: | Line 310: | ||
− | Under''' Operator''' dropdown, we will select''' Is greater than or equal to''' | + | Under''' Operator''' dropdown, we will select''' Is greater than or equal to'''. |
|- | |- | ||
Line 321: | Line 320: | ||
− | But we could choose''' An offset of the current time. | + | But we could choose''' An offset of the current time.''' |
− | And in the''' Value''' | + | And in the''' Value field,''' type the word “'''now”'''. |
Line 344: | Line 343: | ||
|- | |- | ||
| style="border:1pt solid #000000;padding:0.185cm;"| 05:54 | | style="border:1pt solid #000000;padding:0.185cm;"| 05:54 | ||
− | | style="border:1pt solid #000000;padding:0.185cm;"| As we can see, | + | | style="border:1pt solid #000000;padding:0.185cm;"| As we can see, the dummy contents generated by '''devel''' didn’t give us any future dates. |
Line 358: | Line 357: | ||
− | Filter by '''Events''' | + | Filter by '''Events Type'''. |
Line 365: | Line 364: | ||
Then change the date to a future day. | Then change the date to a future day. | ||
+ | |||
+ | Let's click on '''Save'''. | ||
|- | |- | ||
Line 370: | Line 371: | ||
| style="border:1pt solid #000000;padding:0.185cm;"| Pause the tutorial and update about 6 or 7 events. When you’re done, come back to the tutorial. | | style="border:1pt solid #000000;padding:0.185cm;"| Pause the tutorial and update about 6 or 7 events. When you’re done, come back to the tutorial. | ||
+ | |- | ||
+ | | style="border:1pt solid #000000;padding:0.185cm;"| | ||
+ | | style="border:1pt solid #000000;padding:0.185cm;"| Go to '''Shortcuts'''. Click on '''Views'''. | ||
− | + | Find '''Upcoming Events'''. Click on '''Edit.''' | |
Line 387: | Line 391: | ||
− | By default | + | By default, '''Drupal''' sorts the content by the date of authoring in decreasing order. |
Line 495: | Line 499: | ||
− | You should see a table nicely laying out the events that are coming up only in the future. | + | You should see a '''table''' nicely laying out the events that are coming up only in the future. |
|- | |- | ||
Line 518: | Line 522: | ||
In this tutorial we have learnt about | In this tutorial we have learnt about | ||
− | * Creating tables of fields | + | * Creating '''tables''' of '''fields''' |
− | + | ||
− | + | ||
|- | |- | ||
Line 533: | Line 535: | ||
* adapted from Acquia and OSTraining | * adapted from Acquia and OSTraining | ||
* and revised by Spoken Tutorial Project, IIT Bombay. | * and revised by Spoken Tutorial Project, IIT Bombay. | ||
− | |||
− | |||
|- | |- | ||
Line 552: | Line 552: | ||
Spoken Tutorial Workshops | Spoken Tutorial Workshops | ||
− | |||
− | |||
− | |||
| style="border:1pt solid #000000;padding:0.097cm;"| The Spoken Tutorial Project Team conducts workshops and gives certificates. | | style="border:1pt solid #000000;padding:0.097cm;"| The Spoken Tutorial Project Team conducts workshops and gives certificates. | ||
Latest revision as of 16:58, 22 July 2016
Title of Script: Table of Fields with Views
Keywords: Drupal, Video Tutorial, Table, Fields, Table View, Sort, Events
|
|
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
|
Slide 3:
System requirement |
To record this tutorial, I am using
You can use any web browser as per your choice. |
Time | Narration |
00:05 | We will now learn what is a Table of fields.
|
00:19 | Now let us open our website which we created earlier.
|
00:25 | We will name this as Upcoming Events.
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.
|
01:00 | Next, we will put a check on Use a pager and Create a menu link.
|
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.
|
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.
|
02:14 | We can specify how many items get shown on a page.
|
02:24 | Under the ADVANCED tab, are things that we will not cover in this tutorial.
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.
|
03:06 | Put a check mark on Event Date and click Apply.
|
03:12 | For now, Create a label and Place a colon options are checked.
|
03:29 | So now we have 2 columns - TITLE and EVENT DATE. |
03:36 | Let’s add our next field, click Add.
|
03:49 | Select it and click Apply. |
03:51 | This time uncheck Create a label option.
|
04:02 | In later tutorials, we will learn to create a new Image style for this layout.
|
04:08 | Click Apply.
|
04:16 | Let’s go back and click on Add again.
|
04:26 | Choose Event Topics and Event Website.
|
04:33 | On the next page, leave everything as it is and click Apply.
|
04:47 | Once again, click on Apply [all displays]. |
04:51 | Now we have EVENT TOPICS and EVENT WEBSITE.
|
05:08 | Let’s check.
|
05:20 | To add a FILTER CRITERIA, click Add button.
|
05:30 | This screen is very important.
|
05:37 | Under Value type, if we put in today’s date, that would be inconvenient.
|
05:51 | Click on Apply. |
05:54 | As we can see, the dummy contents generated by devel didn’t give us any future dates.
|
06:03 | Let us find some events and change the Event Date to something in the future. |
06:10 | Go to Content.
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.
| |
06:28 | We are now filtering correctly with our Event Date being greater than or equal to now.
|
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.
|
07:07 | Now we have updated our Events and set the Sort Criteria correctly.
|
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.
|
07:43 | Scroll back up.
|
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.
|
08:27 | Scroll down to the preview area.
|
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.
|
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.
|
Slide 8:
Acknowledgement
|
This video is
|
Slide 9:
Acknowledgement
|
The video at this link summarises the Spoken Tutorial project.
|
Slide 10:
Spoken Tutorial Workshops |
The Spoken Tutorial Project Team conducts workshops and gives certificates.
|
Slide 11:
Acknowledgement
|
Spoken Tutorial Project is funded by
Government of India. |
This is Varsha Venkatesh signing off.
|