View is on of the most important tools of Drupal, as they provide the functionality of creating, managing and displaying lists of entities. Having a website with a set of entities: nodes, users, taxonomy terms, roles, feeds etc. the website admin can use views to select some of those entities and display them using a specific display format. This format can be an Unformatted List, a Grid, a table, an HTML list or even a customly developed format.
In addition, the view can be provided in the form of a page, a block, a feed etc. and in other words, the admin has the ability to display any kind of entity of his/her website in any possible way. Views are included in the core of Drupal 8.
How to create a view
In order to create a view you first have to visit /admin/structure/views/add. In this page, you first have to give a descriptive name to your view as long as an optional description.
Try to make the names descriptive but at the same time small in terms of characters. Do not forget the fact that, the bigger your website is the more the views you use and for this reason you would want them to be easily found.
After naming the view, you are prompt to choose the view settings, a really important part of the view as you actually choose what will be displayed by the view. The view options are:
- Taxonomy Terms
- Log entries
- Content Revision etc.
Based on the “Show” option you will be prompted to choose the type of the selected entity and whether you want it to be sorted or not.
At this point, it is useful to remind the fact that using a view you can generate different display types: pages, blocks, feeds etc. For this reason, at this point of the view creation you are prompt to choose if you want to create a page or/and a block. For each choice you have a number of choices like the Page Title, the path of the page, the display format, how many items to be displayed, whether you want the page or the block to have a pager or not etc. You shouldn’t worry about those options for now as you can implement them in the next steps too.
By clicking “Save and edit”, you are redirected to the control page of the view.
How to access the control panel and edit the view
As it is visible from the screenshot, this page is divided into 2 parts: the Displays board and the preview.
In the Displays board, you have a list of options which will be explained in depth in the following paragraphs.
The format defines how the view will be displayed. The Format can be modified with two parameters:
- Format: This option is already selected from the creation page where you had to choose between Unformatted List, Grid, table and HTML list. Using the settings you can choose a field by which you will group the returned records.
Important Note: Those 4 options are the default one that you get with the Drupal core. You can always expand your options by using external modules or by creating your own formats.
- Show: This option gives you the ability to choose which part of the entity you want to show, and it has also already been chosen in the previous screen. In the settings of this options you can choose if you want some fields to appear online or even if you want them to have a specific separator between them etc.
In this group of options, you add the fields that you want them to appear one by one. When you click on “Add” in order to add a new field, a pop-up window is opened which includes all the available fields of the website. You can choose whatever field you want but…
As you might have noticed in the previous screen you chose the type of the entity that you want to get. For example if you chose to have content, then you had to choose the content type. Then, if in the fields section you have the option to choose between all the available fields what happens if you choose to add a field that does not exist in the content type you chose in the previous screen? The answer is simple: the field will not be rendered because it is simply not found in the content type that you chose to appear..
After adding a field you are prompted to configure this field and choose whether you want to create a label to appear above the field, whether you want to exclude it from display (yes sometimes we want to use a field for different reasons ex. Filtering or creating a relationship but we dont want it to appear), the formatter of the field etc.
The Filter Criteria provide a set of criteria based on which the entities will be filtered. The criteria, just like the fields can be added one. After selecting the filter, you are prompted to choose some options relative to the choice you made and which are related to the type of filter you chose.
Let’s give a simple example to make it more clear and assume that we have already chosen to show fields of Articles, but we only want articles that were published in 2018 and we want articles published by a specific author. As it is visible, we need to add 2 filters: one that filters articles based the creation date and one that filters based on author field.
- Date filter: It can be added by choosing the “Authored On” filter. By choosing it, we are prompt to choose the operator that we will use. In this case, we want the dates that are greater than or equal to 1-1-2018, as we want all the articles published on 2018
- Author filter: It can be added by using the “Authored By” filter. In the configuration screen we choose “Is one of” as operator and the username of the author.
But in our example we want the results that apply to both cases. In order to adjust the operators that will be applied between the criteria, you need to click on the arrow next to “Add” option and click on “And/Or rearrange”. From the following pop-up window, you can add relations between the criteria. In our case, we would have to add an “and” relation between the two criteria.
As you might have noticed, the filters can also be exposed to the visitors of the website in order to give them the ability to dynamically filter the content results.
Using the Sort Criteria, you can sort the results by one or more fields. The process you need to follow in order to do it is similar to the filter criteria but in this case you need to choose whether you want ascending or descending order.
In this option you can add a Header or/and a Footer to your view. They can be a Message, a Rendered Entity or simply a custom text that you add using the “Text Area” option.
No results behaviour
This is an important setting for your view as it allows you to set a specific behaviour when the view does not return result for the specific criteria you have set. It’s useful to set a behaviour for that because you don’t want the users to be surprised if the view you have set does not return any information.
The pager is a tool that helps you organise the results into subpages and it is extremely useful especially in cases when the results are numerous. For example, when the returned results are 100, you can organise them into 10 pages of 10 results into each page. The options you have are the following:
- Use pager: In this option you choose whether you want to have a pager or not. If you choose that you want to have a page, then you have two options: full pager and mini pager. In the settings page of the pager you can choose the amount of items to be displayed, the number of pages to be displayed and the offset of the pager (number of items to skip every time you use the pager).
- More link: Gives the ability to create a more link which will link to the page view.
How to create a new display
As already mentioned, when you first create a view, you have the option to create a page or/and a block out of this view. The page and the block are displays of a view. A display is a subview created out of a view in order to display the view in a specific way. All the views have by default a Master Display which contains all the options of the view. The options that we previously analysed are by default given to the Master Display of the view. If you create a display out of a view, you actually override the master display in order to provide more specific settings for this specific display.
In order to create a new Display, you have to click on the “+Add” button which is placed next to the “Master” display. When you click on this button, you are prompted to choose the type of display that you want to create. The Options are:
- Attachment: Creates a view that can be attached before or after another view.
- Block: creates a block that can be placed in a region using the blocks control panel /admin/structure/block
- Page: creates a page that renders the content as defined in the view
- Feed: creates a page that provides a feed in RSS format. If you want more formats, you can install them using external modules.
In order to apply a change to a specific Display, the only thing you need do is to choose the Display that you want to apply the change into and then apply the changes that you want. When you apply a change to the Master Display, the change is applied to all the displays of the view.
In Drupal 8, if you only have Master Display and you want to create another Display (ex. block), sometimes when you click on “+Add” and you add a new display, the master display is then replaced by the new one. In order to change this, visit /admin/structure/views/settings and Check the “Always show the master (default) display”
Contextual Filters work similarly to normal filters with the only difference being that value of the filter is sent programmatically to the view. The most used example of filter values sent to a view is through the view path. In this case the parameters that are passed to the view are the elements of the URL.
Let's take again the Article example and let’s assume that we created a block out of the view with the articles and we want to show only the articles of the author that you have visited. Also let's assume that the authors pages follow a pattern like: /author/<author_ID>
In order to achieve that we need to create a contextual filter that uses the <author_ID> as a parameter to the view in order to display only the articles that have this author as an author. To be more specific, what I have to do is add the contextual filter “Authored By:”, which now expects an input parameter. In order to provide the parameter we set the following configurations:
- When the filter value is NOT Available: This is applied when the value is not available in the filter. In this case we want it to provide the <author_ID> from the URL, so we choose “Provide default value” and “Raw value from URL” as the Type. In addition, the <author_ID> is the second component of the URL (the counting starts from 1) so we will choose 2 as Path component. In this way, the view (the block in this case) will receive the <author_ID> of the user as an input.
- When the filter value IS Available: This is applied when the value is available and we want to apply more validations. In this case we don’t want more validations for the user.
Relationships are used to access a referenced field of the content that is displayed. This is easily understandable using a simple example. In the well known example that we use until now, we have chosen to display fields of Articles. With the current configuration, the view has only access to information regarding it’s article and nothing more. Let’s assume that we want in our view to display the birth day of the author (for some reason) which is a user’s field. Since the view does not have access to users’ fields, we need to create a relation that references the author.
In order to do this:
- Click on “Add” button next to the Relationship option.
- Choose Content Author in order to access author’s field for each created content that will be displayed.
- Give a descriptive Administrative title like “author of the article”. In cases that we want a content not to be displayed if the relationship does not exist, we check the “Require this relationship” option. In other words, if we check this option, the articles that do not have an author will not be displayed. This is not the case in our example so we won’t check it.
- Done! The relationship with the article’s author is created and now we can access user’s fields for each displayed article
- What is left to do is to add a field which will be the “Birth day” field from the relationship that we created. Pay attention to choose the field of the relationship and not the field of the user so that the author will be recognised. This can be easily found from the description of each field. That's why in the previous step we highlighted the fact that you need to give a descriptive name: in order to be more visible when displayed in the fields list.
Some of you might have noticed that a view is nothing more than an SQL query and Drupal Views actually offer a graphical interface to construct an SQL query. What actually happens is that when you create a view you are asked to choose the Content Type that you want to display in your view. In the back-end of your application this is translated as the SQL table from which the information will be mined and construct the query. Let's assume the previously mentioned example: we want to create a view that gathers the articles that were published on 2018 and from specific author. We want to display the title and the body of the article sorted by creation_date in descending order. The options are the following: (In the following example the SQL commands might be different as they are simplified for simplicity )
Filter Criteria: We add “Authored on” and “Authored by” options. In SQL, this is translated as WHERE authored_on >= 2018-01-01 AND authored_by == <uid>
Sort Criteria: In the interface we add “Authored On” as a sort criteria. In the back-end, this is translated as ORDER BY authored_on DESC;
Pager: In the interface we choose the amount of elements that we want to be returned. When it comes to SQL commands, this is translated to LIMIT 10 OFFSET 0; in order to return only the first 10.
For more advanced views the complexity of the query increases. To understand better how the a view is translated to an SQL query, you can enable the displaying of the query for your views. To do that, you just have to visit /admin/structure/views/settings and check the “Show the SQL query” option. Your query will then be displayed in the configuration page of each view.