Drupal/C3/Table-of-Fields-with-Views/English-timed - Revision history

Pratik kamble at 12:24, 24 March 2017

2017-03-24T12:24:28Z

Pratik kamble at 05:38, 7 October 2016

2016-10-07T05:38:44Z

Sandhya.np14 at 05:23, 8 September 2016

2016-09-08T05:23:28Z

Sandhya.np14 at 08:44, 1 September 2016

2016-09-01T08:44:21Z

Sandhya.np14 at 08:41, 1 September 2016

2016-09-01T08:41:59Z

Show changes

PoojaMoolya: Created page with "{| border =1 | '''Time''' | '''Narration''' |- | 00:01 | Welcome to the Spoken tutorial on''' Table of Fields with Views''' |- | 00:07 | In this tutorial, we will learn to..."

2016-08-30T11:55:31Z

Created page with "{| border =1 | '''Time''' | '''Narration''' |- | 00:01 | Welcome to the Spoken tutorial on''' Table of Fields with Views''' |- | 00:07 | In this tutorial, we will learn to..."

New page

{| border =1
| '''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 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.

* 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''' 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

* 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.

|}

@@ Line 14: / Line 14: @@
 | 00:12
 | To record this tutorial, I am using:
-* '''Ubuntu Linux Operating System'''
+'''Ubuntu Linux Operating System'''
-* '''Drupal 8''' and
+'''Drupal 8''' and
-* '''Firefox''' Web browser.
+'''Firefox''' Web browser.
 |-
@@ Line 520: / Line 520: @@
 | 13:07
 | Spoken Tutorial Project is funded by-
 NMEICT, Ministry of Human Resource Development and
-* NMEICT, Ministry of Human Resource Development and
+NVLI, Ministry of Culture, Government of India.
-* NVLI, Ministry of Culture, Government of India.
 |-

@@ Line 157: / Line 157: @@
 |-
 | 03:54
-|So, we can actually  pull in information from''' User Groups''' that are sponsoring our '''Events'''
+|So, we can actually  pull in information from''' User Groups''' that are sponsoring our '''Events''' and put them in this''' View'''.
 and put them in this''' View'''.
 |-

@@ Line 64: / Line 64: @@
 |-
 | 01:28
-| We will name this as "Upcoming Events". Now change the''' Content of type "All"''' to''' "Events"'''.
+| We will name this as "Upcoming Events". Now change the''' Content of type''' "All" to "Events".
 |-
@@ Line 76: / Line 76: @@
 |-
 | 01:55
-|Put a check on''' Create a page''' and in the''' Display format,''' choose''' Table of fields.'''
+|Put a check on''' Create a page''' and in the''' Display format,''' choose''' "Table" of fields.'''
 |-
@@ Line 88: / Line 88: @@
 |-
 | 02:17
-|Under''' Menu''', we will choose''' Main navigation''' and we will call the''' Link text''' as''' Upcoming Events.'''
+|Under''' Menu''', we will choose "Main navigation" and we will call the''' Link text''' as "Upcoming Events".
 |-
@@ Line 101: / Line 101: @@
 | 02:37
 | Let us go through our 5 questions.
-The''' Display''' is a page.
+The''' Display''' is a "page".
 |-
 | 02:42
-| The''' FORMAT''' is a''' table'''.
+| The''' FORMAT''' is a "table".
 |-
 | 02:45
-| Under''' FIELDS,''' we have''' Title.'''
+| Under''' FIELDS,''' we have "Title".
 |-
 | 02:48
-| 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 170: / Line 170: @@
 |-
 | 04:15
-| Click on''' Add''' and scroll down till you find the''' Event Date field'''.
+| Click on''' Add''' and scroll down till you find the''' Event Date''' field.
 |-
@@ Line 194: / Line 194: @@
 |-
 | 04:47
-|Let’s leave the''' Date format''' as default here; in other words''' medium date.'''
+|Let’s leave the''' Date format''' as default here; in other words "medium date".
 |-
@@ Line 222: / Line 222: @@
 |-
 | 05:25
-|Let’s choose an''' Image style''' of''' Thumbnail.'''
+|Let’s choose an''' Image style''' of "Thumbnail".
 |-
 | 05:30
-|Then under''' Link image to''' dropdown, choose''' Content.'''
+|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'''.
+| In later tutorials, we will learn to create a new''' Image style''' for this''' layout.''' But for now, we will choose "Thumbnail".
 |-
@@ Line 378: / Line 378: @@
 |-
 | 09:17
-|Next we must check the '''SORT CRITERIA.'''
+|Next, we must check the '''SORT CRITERIA.'''
 |-
@@ Line 390: / Line 390: @@
 |-
 | 09:37
-| To change this click on''' Authored on''' and click''' Remove.'''
+| To change this, click on''' Authored on''' and click''' Remove.'''
 |-
@@ Line 438: / Line 438: @@
 |-
 | 10:48
-| Scroll back up. Locate''' FORMAT, Table''' and next to it, click on the word''' Settings'''.
+| 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.'''
+|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.
+|For the''' SEPARATOR''', up here, just put a simple '''line break'''.
 |-