View source for 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'''



{| style="border-spacing:0;"
| style="border:1pt solid #000000;padding:0.097cm;"| <center>Visual Cue</center>
| style="border:1pt solid #000000;padding:0.097cm;"| <center>Narration</center>

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 1:

Table of Fields with Views
| style="border:1pt solid #000000;padding:0.097cm;"| Welcome to the Spoken tutorial on''' Table of Fields with Views'''

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 2:

Learning Objectives



| style="border:1pt solid #000000;padding:0.097cm;"| In this tutorial, we will learn to

* Create a '''table''' of '''fields'''

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 3:

System requirement
| style="border:1pt solid #000000;padding:0.097cm;"| 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.

|}

{| style="border-spacing:0;"
| style="border:1pt solid #000000;padding:0.185cm;"| '''Time'''
| style="border:1pt solid #000000;padding:0.185cm;"| '''Narration'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:05
| style="border:1pt solid #000000;padding:0.185cm;"| 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'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:19
| style="border:1pt solid #000000;padding:0.185cm;"| Now let us open our website which we created earlier.


Go to''' Shortcuts''', then''' Views''' and click''' Add new view'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:25
| style="border:1pt solid #000000;padding:0.185cm;"| 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.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:47
| style="border:1pt solid #000000;padding:0.185cm;"| 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.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:00
| style="border:1pt solid #000000;padding:0.185cm;"| 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.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:10
| style="border:1pt solid #000000;padding:0.185cm;"| Our''' menus''' are not well organized right now, but we’ll do that soon.

|-
| 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;"| 01:21
| style="border:1pt solid #000000;padding:0.185cm;"| 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.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:42
| style="border:1pt solid #000000;padding:0.185cm;"| '''SORT CRITERIA''' is wrong because we want to order it on the''' Event date''' and not the''' Published date'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:51
| style="border:1pt solid #000000;padding:0.185cm;"| To start off, let’s click''' Save'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:57
| style="border:1pt solid #000000;padding:0.185cm;"| 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.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 02:14
| style="border:1pt solid #000000;padding:0.185cm;"| 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.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 02:24
| style="border:1pt solid #000000;padding:0.185cm;"| 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.

|-
| 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;"| 02:51
| 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.'''


So, I can find them easily in''' Views''' later on.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 03:06
| style="border:1pt solid #000000;padding:0.185cm;"| Put a check mark on''' Event Date''' and click''' Apply'''.


Here we will choose some of the settings.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 03:12
| style="border:1pt solid #000000;padding:0.185cm;"| 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'''<nowiki> Apply [all displays]</nowiki>''' button.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 03:29
| style="border:1pt solid #000000;padding:0.185cm;"| So now we have 2 columns -''' TITLE''' and''' EVENT DATE'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 03:36
| style="border:1pt solid #000000;padding:0.185cm;"| Let’s add our next field, click''' Add.'''


And this time scroll down until you find''' Event Logo'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 03:49
| style="border:1pt solid #000000;padding:0.185cm;"| Select it and click''' Apply'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 03:51
| style="border:1pt solid #000000;padding:0.185cm;"| This time uncheck''' Create a label''' option.


Let’s choose an''' Image style''' of''' Thumbnail.'''


Then under''' Link image to''' dropdown, choose''' Content.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 04:02
| style="border:1pt solid #000000;padding:0.185cm;"| In later tutorials, we will learn to create a new''' Image style''' for this''' layout.'''


But for now, we will choose''' Thumbnail'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 04:08
| style="border:1pt solid #000000;padding:0.185cm;"| Click''' Apply.'''


Now, in the preview, we should see the''' thumbnails''' that have been generated by''' devel,''' for each''' Event.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 04:16
| style="border:1pt solid #000000;padding:0.185cm;"| Let’s go back and click on''' Add''' again.


This time, scroll down and choose more than one '''field''' at a time.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 04:26
| style="border:1pt solid #000000;padding:0.185cm;"| Choose''' Event Topics''' and''' Event Website'''.


And then click on'''<nowiki> Apply [all displays]</nowiki>''' button.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 04:33
| style="border:1pt solid #000000;padding:0.185cm;"| 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.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 04:47
| style="border:1pt solid #000000;padding:0.185cm;"| Once again, click on'''<nowiki> Apply [all displays].</nowiki>'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 04:51
| style="border:1pt solid #000000;padding:0.185cm;"| 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.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 05:08
| style="border:1pt solid #000000;padding:0.185cm;"| 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.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 05:20
| style="border:1pt solid #000000;padding:0.185cm;"| To add a''' FILTER CRITERIA,''' click ''' Add''' button.


Scroll down till you find''' Event Date.'''


Then, choose the''' Event Date''', and click''' Apply.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 05:30
| style="border:1pt solid #000000;padding:0.185cm;"| This screen is very important.


Under''' Operator''' dropdown, we will select''' Is greater than or equal to'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 05:37
| style="border:1pt solid #000000;padding:0.185cm;"| 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.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 05:51
| style="border:1pt solid #000000;padding:0.185cm;"| Click on''' Apply'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 05:54
| 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.


So, let’s manually update some of our events, to make sure our''' View''' works correctly.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 06:03
| style="border:1pt solid #000000;padding:0.185cm;"| Let us find some events and change the''' Event Date''' to something in the future.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 06:10
| style="border:1pt solid #000000;padding:0.185cm;"| 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'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 06:14
| 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.'''


We will now go back to editing the view where we left off.


Scroll down to see the preview.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 06:28
| style="border:1pt solid #000000;padding:0.185cm;"| 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.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 06:42
| style="border:1pt solid #000000;padding:0.185cm;"| To change this click on''' Authored on''', and click''' Remove.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 06:48
| style="border:1pt solid #000000;padding:0.185cm;"| Click''' Add''', and once again scroll down until you find''' Event Date'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 06:58
| style="border:1pt solid #000000;padding:0.185cm;"| Click''' Apply.'''


Now, under''' Order''', select''' Sort ascending'''. That sorts our events from today onwards.


Click''' Apply'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 07:07
| style="border:1pt solid #000000;padding:0.185cm;"| 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.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 07:14
| style="border:1pt solid #000000;padding:0.185cm;"| All the events that are coming up in the future, are listed in''' EVENT DATE''' order.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 07:24
| style="border:1pt solid #000000;padding:0.185cm;"| Make sure you click''' Save''', before we move on.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 07:29
| style="border:1pt solid #000000;padding:0.185cm;"| 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.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 07:43
| style="border:1pt solid #000000;padding:0.185cm;"| 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.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 07:57
| style="border:1pt solid #000000;padding:0.185cm;"| Make''' Title''' and''' Event Date''' columns''' SORTABLE''' in''' Ascending order''' and click''' Apply'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 08:05
| style="border:1pt solid #000000;padding:0.185cm;"| So now our''' Title''' and''' logo''' are in the same column, and both''' TITLE''' and''' EVENT DATE''' are now sortable.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 08:13
| style="border:1pt solid #000000;padding:0.185cm;"| 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'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 08:27
| style="border:1pt solid #000000;padding:0.185cm;"| Scroll down to the preview area.


Our''' Event Name''' and''' logo''' and''' date''' are all set.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 08:32
| style="border:1pt solid #000000;padding:0.185cm;"| In later tutorials, we will learn to change the size of our''' logos''' to make this a little bit nicer.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 08:39
| style="border:1pt solid #000000;padding:0.185cm;"| For now, click''' Save''', and let’s test our''' View.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 08:45
| style="border:1pt solid #000000;padding:0.185cm;"| 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.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 08:57
| style="border:1pt solid #000000;padding:0.185cm;"| You can also see that you can sort by''' Event Name''' and''' Event Date'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 09:04
| style="border:1pt solid #000000;padding:0.185cm;"| With this, we have completed our first''' Table View.'''

|}

{| style="border-spacing:0;"
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 7:

Summary


| style="border:1pt solid #000000;padding:0.097cm;"| Let us summarize.


In this tutorial we have learnt about

* Creating '''tables''' of '''fields'''

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 8:

Acknowledgement



| style="border:1pt solid #000000;padding:0.097cm;"| This video is

* adapted from Acquia and OSTraining
* and revised by Spoken Tutorial Project, IIT Bombay.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 9:

Acknowledgement



| style="border:1pt solid #000000;padding:0.097cm;"| The video at this link summarises the Spoken Tutorial project.


Pls download and watch it.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 10:

Spoken Tutorial Workshops
| style="border:1pt solid #000000;padding:0.097cm;"| The Spoken Tutorial Project Team conducts workshops and gives certificates.


For more details, please write to us.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 11:

Acknowledgement



| style="border:1pt solid #000000;padding:0.097cm;"| Spoken Tutorial Project is funded by

* NMEICT, Ministry of Human Resource Development and
* NVLI, Ministry of Culture

Government of India.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| 
| style="border:1pt solid #000000;padding:0.097cm;"| This is Varsha Venkatesh signing off.


Thanks for joining.

|}