How to use views in Drupal 8
Blog

How to use views in Drupal 8

The most installed module in Drupal “Views” is now available as the core modules of Drupal 8. Now you don’t have to search for the latest version of views separately.

For the 1st timer, Views allows you to generate dynamic query using easy to use UI. That's the simple explanation, but it doesn't give the module the credit it deserves.

For instance, you can create a page (/latest-news) which displays all the latest content by bundle type and sorted by posted date. Using the module, you can display content in a block, table or formatted structure.

In this article, we'll continue building our new site by adding up few more custom views. We'll create a view page to showcase news on homepage, and a "Recent News" block.

So, Let’s Begin with View page creation.

Step 1: Go to Manage >> Structure >> Views >> click on +Add new view

admin_structure_page

 

add_a_view


Step 2: Clicking on +Add new view redirects to “Add new view” page.
The page has View Basic information fieldset that contain View name and Description.

Section 2 has VIEW SETTING which has option to  show, type, and sorted by.
Where, Show means what would you like to Display, Comment, Log entries, Files, Content, Content revision, Taxonomy Terms, Users, Link Count, Custom block revision or Custom block.

Of type holds bundle type either Article, Basic page, custom content type or All.
Sorted by - How do you wants to sort? Sorting by Newest first, Oldest first, or by title; these are the initial level sorting options. Later on you will get more and more sorting criteria e.g.: by author name.

creating_view

The Addition of new view also carries PAGE SETTINGS & BLOCK SETTINGS.
Once you check on “Create a page”, this will open up page configuration section which, includes page title, page path, Display format, item to be displayed, with three additional option.

  • use a pager.
  • create a menu link &
  • include an RSS feed.   
view_page_settings

Checking the block setting Will allow you to create a “view block”. This section has option to update Block title, Block Display settings, items per block with pagination option.

view_block_settings

Once you are done with filling up these fields value. click on save and edit button. i’m creating view page and view block both in in this example.

view_page_with_view_block_info

Step 3: Once you have saved the view page data, page will be redirected to view Display configuration section having page and block UI.

Just like Drupal 7 views contrib module, Drupal 8 views also has similar UI.

As we can see here view has multiple configuration.

Title : set the title for view page.
Format: How data has to be displayed on the site.
Fields: what are  fields you would like to display.
Filter criteria: allow filter by type as well as option to  expose the same.
Sort criteria:  sorting of field date ascending or descending manner.
page Settings: set the page path, assign to menu if required, view permission.
Header: custom header for the view page.
Footer: custom footer for the view page.
No Result Behaviour: In case if view query fetches no data or empty set, we can set option to override and display custom message to user e.g. no search result available, please try again.
Pager: allow site to create pagination on view page.
Advanced: As the label suggest, this section has advanced  options like CONTEXTUAL FILTERS , RELATIONSHIPS, EXPOSED FORM, OTHER etc.         

You can check my previous blog post on how to use contextual filters in Drupal 8 for mode details.

views_contextual_filter

Now, let’s start with view page configuration.

We will add a filter to display only content from news.  

To add a filter go to FILTER CRITERIA section and click on Add button. This will show pop up box, where you can search by Type or search by name. As we are filtering based on content type this can be done in two ways -

  1.  Select Content in Type dropdown and search for Type.
  2.  Write type in Search box and select appropriate.

Select the checkbox next to Type and click on Apply (all displays).
 

view_filter

Once Type is selected, you will be redirected to configuration page where there is option of “Expose this filter to visitors, to allow them to change it”. Under the content types you can select single or multiple bundle selection option and also have Operator. Once you have set the configuration click on Apply (all displays).

views_filter_criteria


Moving to SORT CRITERIA, click on Add button. I am filtering content based on news posted date in Desc order.

  • Under Type drop down select content.
  • Search for Authored on and click on Apply (all displays).
views_sort_criteria

The below page shows configuration for filtering option e.g. Exposing this sorting criteria to the end users, sorting order either ASC or DESC and Granularity.

view_sort_configuration

Next go to PAGE SETTINGS. Here we we can set the page url path.

 

views_page_path

We can set the menu and assign this to specific category. Menu could be either part of admin menu, footer, navigation or tool menu. 

views_menu_page

Access has setting of permission, roles and none. This is helpful if you want to restrict or display specific page view to specific role or add a permission.

views_access_restriction

Once you have selected Role click on settings link. In my case I want to display this page only to Authenticated user. Anonymous user will get the custom configured message. Do not forget to click on Apply button.

views_access_role_option

Moving to “NO RESULTS BEHAVIOR”, select Global from “Type” filter. Check on Text area and Apply (all displays) button. Fill up content data and click on Apply (all displays) again.

views_no_result_behaviour_text_area

Now it’s time to display specific no of content on latest-news page. Go to PAGER >> Full click on settings link. This will redirect us to pager setting page.

views_pager_selection

Pager settings page has item per page, offset, Pager ID, Pager link labels, exposed options etc.

views_pager_option

We can add custom text for first / previous / next / Last page.

views_pager_link_label

There is additional Exposed Option to control selected option

Allow end user to control selected display options for the view.

views_exposed_control_option

Once you have done with view configuration click on save and review the page. Lets check our page now at localhost/drupal-8.0.2/latest-news

views_listing_page

Try changing the content type in views check the page if there is no content available. It would show custom message you have added earlier in views.

As we have restricted this view page for Anonymous user. if you visit you view page without login, you will get Access Denied page.

views_access_denaied_page

So, we are done with Basic Drupal 8 views configuration.


Step 4: Next we will cover Drupal 8 views Block. Go back to our view configuration page and click on Block.
Similar to views page it has all the configuration. I am adding block name as “latest news block” and saving the view.

block_admin_description

Now assign this “latest news block” view block to any region. Visit Manage >> Structure >>  Block layout

I’m assigning my view block to sidebar second. Search for latest news block and click on place block.

place_block

Now it’s time to configure block. configured item per block. visibility based on content type, page roles, and also it’s provide region and views machine name and click on save block.

configure_block

In case block view doesn’t have any data, it should display custom message.

block_listing_with_no_content

Attached is the screenshot for our views block assign to sidebar region to display only on page.

 block_with_content

 

Download the Drupal Guide
Enter your email address to receive the guide.
get in touch