Nancyvarkey at 12:51, 15 July 2016

2016-07-15T12:51:07Z

Priyacst: Created page with "'''Title of Script:''' Displaying Contents using Views '''Keywords:''' Drupal, Video Tutorial, Views, Page, Teasers, Block View, Recently added events {| style="border-spa..."

2016-06-30T14:28:14Z

Created page with "'''Title of Script:''' Displaying Contents using Views '''Keywords:''' Drupal, Video Tutorial, Views, Page, Teasers, Block View, Recently added events {| style="border-spa..."

New page

'''Title of Script:''' Displaying Contents using Views

'''Keywords:''' Drupal, Video Tutorial, Views, Page, Teasers, Block View, Recently added 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:

'''Displaying''' C'''ontents''' using Views
| style="border:1pt solid #000000;padding:0.097cm;"| Welcome to the Spoken tutorial on''' Displaying Contents using 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 about

* Views
* A page with teaser and
* A Simple block view

|-
| 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:1pt solid #000000;padding:0.097cm;"| Slides 4:

'''Views'''

| style="border:1pt solid #000000;padding:0.097cm;"| First let us learn about''' Views'''.

* '''Views''' is used for displaying a collection of similar content
* '''Views''' can be displayed in various formats, such as -
* Tables
* Lists
* Gallery etc.
* It can''' select, order, filter''', and''' present''' our contents, based on the criteria we define
* '''Views''' are essentially''' Reports''' or''' Query Results''' as known in other software

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

'''Example'''

| style="border:1pt solid #000000;padding:0.097cm;"| For example,

If you go to a library and ask the librarian for a stack of books with the following criteria:

* published before 1905
* whose authors last name starts with “M”
* where the book has 100 or more pages and
* the covers are red

|-
| style="border:1pt solid #000000;padding:0.097cm;"|
| style="border:1pt solid #000000;padding:0.097cm;"| You will be sent out of the library for asking that.

But in''' Drupal''', it can be done very easily with''' Views'''.

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

The workflow of '''Views''' is

| style="border:1pt solid #000000;padding:0.097cm;"| We have a simple 5-step process for setting up our '''Views'''.

The workflow of '''Views''' is

* Choose your''' Display'''
* Set your''' Format'''
* Figure out your''' Fields'''
* Apply a''' Filter''' and then
* '''Sort''' the results

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

|}

{| 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;"| Let’s learn to create the standard''' Views''' on a simple''' Drupal site.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:33
| style="border:1pt solid #000000;padding:0.185cm;"| Click on''' Structure''', and then click on''' Views'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:37
| style="border:1pt solid #000000;padding:0.185cm;"| '''Drupal''' has many built-in''' Views'''.

For example - the''' Content View''' allows administrators to administer the content.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:47
| style="border:1pt solid #000000;padding:0.185cm;"| Same thing with''' Custom block library, Files, Frontpage, People, Recent comments, Recent content, Taxonomy terms, Who’s new''' and''' Who’s online.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:59
| style="border:1pt solid #000000;padding:0.185cm;"| These are all''' Views''' that come with''' Drupal,''' which we can update or edit.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:22
| style="border:1pt solid #000000;padding:0.185cm;"| First, we will create a simple page with''' Teasers'''.

It will be a landing page for our''' Events Content type'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:30
| style="border:1pt solid #000000;padding:0.185cm;"| Click''' Add new view''' and let’s name it as''' Events Sponsored'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:37
| style="border:1pt solid #000000;padding:0.185cm;"| Change the''' Content of type''' from''' All''' to''' Events''' and''' sorted by''' as''' Newest first.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:45
| style="border:1pt solid #000000;padding:0.185cm;"| Click''' Create a page.'''

Leave''' Display format''' as''' Unformatted list''' of''' teasers.'''

This is because we’ve already set up the''' Teaser mode''' in our''' Manage display.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 1:55
| style="border:1pt solid #000000;padding:0.185cm;"| Check''' Create a menu link.'''

Then under the''' Menu''' drop-down, choose''' Main navigation.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:59
| style="border:1pt solid #000000;padding:0.185cm;"| This will help us to see all the''' Events''' that we have added to our''' site'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 02:04
| style="border:1pt solid #000000;padding:0.185cm;"| Click''' Save and edit.'''

Now we have access to the screen that we mentioned in the introduction.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 02:12
| style="border:1pt solid #000000;padding:0.185cm;"| This screen displays a''' Page,''' whose''' Format''' is an''' Unformatted list''' of''' Teasers.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 2:17
| style="border:1pt solid #000000;padding:0.185cm;"| We don’t need any fields here because we have set up our''' Teaser mode'''.

The''' FILTER CRITERIA''' is''' Published events.'''

And the''' SORT CRITERIA''' is the publication date in descending order.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 02:31
| style="border:1pt solid #000000;padding:0.185cm;"| If we scroll down, we can see a quick preview here.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 02:36
| style="border:1pt solid #000000;padding:0.185cm;"| If you don’t like this, it’s simple to change.

We’ll cover that in another tutorial.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 02:42
| style="border:1pt solid #000000;padding:0.185cm;"| For now, let us click on''' Save.'''

Click on''' Back to site.'''

We have a new tab in the main menu called''' Events,''' with a listing of all of our''' Events.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 02:59
| style="border:1pt solid #000000;padding:0.185cm;"| Here are all the''' Event logos''' with different shapes and sizes.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 03:03
| style="border:1pt solid #000000;padding:0.185cm;"| We have the''' Event Website''' and the''' Event Date.'''

Remember, we can update this in our''' Teaser mode''' for the''' Events Content type,''' if we want to change it.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 03:15
| style="border:1pt solid #000000;padding:0.185cm;"| That’s it! This is the landing page for all of our''' Events.'''

|}

{| 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;"| One of key features in''' Drupal''' is the ability to place information

* in the '''Block regions'''
* or sidebars of our website.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:14
| style="border:1pt solid #000000;padding:0.185cm;"| Previously, if we added a new''' Event''', we would have to

* come out on the''' sidebar''' on every''' page''' that it’s on,
* and update the''' sidebar'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:22
| style="border:1pt solid #000000;padding:0.185cm;"| Now,''' Views''' updates our content automatically.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:28
| style="border:1pt solid #000000;padding:0.185cm;"| Click on''' Structure''' and then on''' Views.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:33
| style="border:1pt solid #000000;padding:0.185cm;"| Since we’re coming back here a lot, let’s add it to our shortcuts by clicking the star.

Now click on''' Add new view.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:42
| style="border:1pt solid #000000;padding:0.185cm;"| In the''' View name''', type''' Recent Events Added'''.

This’ll be a list of the latest''' Events''' we’ve added to our''' site'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:52
| style="border:1pt solid #000000;padding:0.185cm;"| Now, change''' Content of type''' from''' All''' to''' Events.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:56
| style="border:1pt solid #000000;padding:0.185cm;"| Choose''' Create a block'''.

Leave the''' sorted by''' as''' Newest First.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:04
| style="border:1pt solid #000000;padding:0.185cm;"| In''' Block title,''' type''' Recently Added Events''', just to show that we can have a different name and title.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:13
| style="border:1pt solid #000000;padding:0.185cm;"| '''Drupal''' allows us to create different styles of''' Views'''.

We’ll leave this as an''' Unformatted list''' of''' titles''', with''' 5 Items per block'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:23
| style="border:1pt solid #000000;padding:0.185cm;"| Don’t check''' Use a pager.'''

If we do, we will get page numbers like''' '''Page one of three, two of three, etc., at the bottom of our''' block'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:31
| style="border:1pt solid #000000;padding:0.185cm;"| Click''' Save and edit'''.

Let’s look at our preview.

It displays a list of titles of the most recently added''' Events.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:42
| style="border:1pt solid #000000;padding:0.185cm;"| Here, we can see that it displays a''' Block.'''

'''FORMAT''' is an''' Unformatted list.'''

'''FIELDS''' are the''' Title''' fields.

And the''' FILTER CRITERIA''' is the''' Published Events''' in descending order of their publication date.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:55
| style="border:1pt solid #000000;padding:0.185cm;"| Let’s click''' Save'''.

This will not show up anywhere, because we haven’t placed the''' block''' yet.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 02:06
| style="border:1pt solid #000000;padding:0.185cm;"| Click on''' Structure''', and''' Block layout.'''

Let’s place the''' block''' in the''' Sidebar first region.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 02:16
| style="border:1pt solid #000000;padding:0.185cm;"| Click on''' Place block.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 02:20
| style="border:1pt solid #000000;padding:0.185cm;"| When we scroll down, we can see the block called''' Recent Events Added'''.

Click''' Place block'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 02:27
| style="border:1pt solid #000000;padding:0.185cm;"| Since we haven’t learnt about''' blocks''' in detail yet, we will just click''' Save''' for now.

It will show up on every page. We will edit that later.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 02:35
| style="border:1pt solid #000000;padding:0.185cm;"| It’s going to appear in the order after''' Search'''.

Click''' Save blocks'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 02:43
| style="border:1pt solid #000000;padding:0.185cm;"| Click''' Back to site.'''

And we have a new''' block''' on every''' page''' that gives us the most recently added''' Events''' on our''' site'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 02:52
| style="border:1pt solid #000000;padding:0.185cm;"| There’s no need to configure this again.

You can place it wherever you want, and it will always be up-to-date.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 03:02
| style="border:1pt solid #000000;padding:0.185cm;"| So that’s an example of a''' Block view''' using our''' Events Content type''' in publication date order.

With this we come to the end of this tutorial.

|}

{| 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

* Views
* A page with teaser and
* A Simple block view

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

|}

@@ Line 24: / Line 24: @@
 | style="border:1pt solid #000000;padding:0.097cm;"| In this tutorial, we will learn about
-* Views
+* '''Views'''
-* A page with teaser and
+* A page with '''teaser''' and
-* A Simple block view
+* A simple '''block view'''
-−
-−
 |-
@@ Line 35: / Line 33: @@
 System requirement
 | style="border:1pt solid #000000;padding:0.097cm;"| To record this tutorial, I am using
 * '''Ubuntu Linux Operating System'''
@@ Line 58: / Line 55: @@
 * It can''' select, order, filter''', and''' present''' our contents, based on the criteria we define
 * '''Views''' are essentially''' Reports''' or''' Query Results''' as known in other software
 |-
@@ Line 76: / Line 71: @@
 * where the book has 100 or more pages and
 * the covers are red
 |-
@@ Line 103: / Line 96: @@
 * Apply a''' Filter''' and then
 * '''Sort''' the results
 |-
@@ Line 244: / Line 235: @@
 * in the '''Block regions'''
 * or sidebars of our website.
 |-
@@ Line 253: / Line 242: @@
 * come out on the''' sidebar''' on every''' page''' that it’s on,
 * and update the''' sidebar'''.
 |-
@@ Line 403: / Line 390: @@
 In this tutorial we have learnt about
-* Views
+* '''Views'''
-* A page with teaser and
+* A page with '''teaser''' and
-* A Simple block view
+* A simple '''block view'''
-−
-−
 |-
@@ Line 420: / Line 405: @@
 * adapted from Acquia and OSTraining
 * and revised by Spoken Tutorial Project, IIT Bombay.
 |-

Drupal/C2/Displaying-Contents-using-Views/English - Revision history

Nancyvarkey at 12:51, 15 July 2016

Priyacst: Created page with "'''Title of Script:''' Displaying Contents using Views '''Keywords:''' Drupal, Video Tutorial, Views, Page, Teasers, Block View, Recently added events {| style="border-spa..."