Web Wash: Getting Started with Views in Drupal CMS

To add the block to a Canvas page:

Canvas only surfaces block displays, not page displays. The moment you create the block, it becomes available as a Canvas component, with no extra export or configuration needed.

• Admin pages: the Content and People listings are views.
• Moderation: backend listings run on Views.
• Site templates: many components in the Haven template, such as the projects listing and related articles, are views displayed through Canvas.

A few common customizations turn a plain list into something polished:

Standard



The center column controls how the page behaves. Page settings cover the path, whether the view appears in a menu, and which theme it uses. The most important setting here is permissions.

1. Click Add view.
2. Enter a name, such as “Latest content”.
3. Set the Show dropdown to Content. This is where you choose what to query.
4. Select Create a page and set a path.
5. Click Save and edit.

To surface the page as a tab, configure the view’s menu setting as a menu tab with the Administration parent, keeping the path under admin/content. After clearing the cache, the new tab appears alongside the other content tabs, complete with breadcrumbs.

To exclude a helper field from the output while keeping it available in the view, check Exclude from display. This is how the Link to content field stays usable as a token without rendering on its own.

Avoid the Unrestricted option. It removes the access check on the page, so anyone can reach the view regardless of role. Always keep a permission in place.

• Left: the title, format, fields, filter criteria, and sort criteria.
• Center: page settings, header, footer, no-results behavior, and pager. These depend on the display you select at the top.
• Right: advanced options such as relationships and contextual filters.

When you change a shared field on one display, it changes everywhere. To make a display-specific change, set the setting to Override for that display. Overridden settings appear in italics.

Think of Views as a query builder. It lets you query your content and then display the results any way you want. You do not write SQL. You configure the query through a UI, and Views generates the database query for you.

Managing Fields

In the video above, you’ll learn how to build a Views page, customize fields with image styles and rewrite tokens, expose filters and sorts, configure pagers and infinite scroll, expose a view block as a Canvas component, and create a backend admin page.

• Featured image: rendered through a view mode or a single image style.
• Body: trimmed to a maximum number of characters so each card shows a short excerpt.
• Authored by: the user who created the content.
• Authored on: the created date, formatted however you like.

Managing Formatters and Rewriting Output

The best next step is to open Structure > Views and build a listing of your own.

Boost Your Web Development Skills

• Wrap the title in an H3: under style settings, enable Customize field HTML and choose the element. You can also add custom classes to the field or the label.
• Style a label: change the author label to a strong element so it stands out.
• Merge two fields into one: open a field, choose Rewrite results > Override the output of this field with custom text, and use replacement patterns (tokens) to combine values. For example, merge the author and date onto one line using the {{ uid }} and {{ created }} tokens.
• Add a Read more link: add a Link to content field, output it as a URL, and exclude it from display. Then reference its token from another field’s rewrite, such as a Custom text field.

Rendering Order and Rearranging Fields

For continuous loading, the Views Infinite Scroll module adds an infinite scroll pager. It ships with Drupal CMS.

Enjoy an ad-free experience and access exclusive courses when you join the WebWash Premium Community.

Every field has a formatter, which controls how the value displays to the visitor. Dates get date formats, images get image styles, and entity references get rendered output. You also get a consistent set of options on each field: style settings, rewrite results, and an administrative title.

What makes Views so valuable is its reach.

The remaining center options round out the page:

Exposing Filters and Sorts

A view must have at least one display, such as a page or a block. A single view can hold multiple displays, which is useful when several listings share most of their configuration.

Because this view lists unpublished content, test the page with a logged-out account to confirm anonymous users cannot reach it. Leaving it on View published content would make it publicly accessible and expose those unpublished projects.

• Expose a content type filter: visitors can switch between content types.
• Expose a title filter: visitors get basic keyword search.
• Expose a sort: visitors can flip between ascending and descending order.

Filter and sort criteria live below the fields on the left. You can add more filters, such as content type or a specific taxonomy tag, and add sort criteria, such as authored on, descending.

• Render as a block: place the exposed form in another region.
• Input required: force the visitor to choose a value before any results appear. This is handy for a search page that should stay empty until someone searches.

Views already powers a large part of Drupal CMS, even when you do not notice it:

Once saved, you are redirected to the Views UI. The page is broken up into three areas:

Next, lock it down and add the fields admins need:

Configuring the Page: Path, Permissions, and Pager

The author’s username and picture live on the user entity, which you cannot reach from the content tables directly. To get there, add a relationship to the user, which is an inner join.

Setting Permissions Safely

Views can do more than list nodes. To show information about the author of the current page:

Views is a query builder that powers content listings, people pages, admin screens, and Canvas components across Drupal CMS.

Get lifetime access to all live streams ad-free and a private site builder forum. Click here to join.

Header, Footer, and Pager

If a token does not show in the replacement patterns list, rearrange your fields so the source field comes first. Use the field dropdown and choose Rearrange to reorder fields.

• Header and footer: add content around the results, including a result summary such as “Displaying 1 of 10”.
• No results behavior: add a text area with a message like “No results returned” for empty searches.
• Pager: choose a mini pager, a full pager, display all items, or a fixed number of items. A fixed count is ideal for blocks that show, for example, the latest five items.

You can duplicate the view or add the block display to the existing view. Multiple displays share configuration, so you tweak only what differs between them.

Add this view as a block to the blog content template (full content) in Canvas, then style it with a group component, a heading, and an icon.

1. Select the Infinite Scroll pager.
2. Enable Automatically load content.
3. Turn on AJAX in the advanced options so new items load as the visitor scrolls.

A multi-select element makes it easy to lose track of what is selected, especially with many options. Better Exposed Filters lets you render the same filter as checkboxes or radio buttons instead, which is far easier to use.

Using a View Block as a Canvas Component

To build it:

You can also expose filters to the visitor so they can switch them on or off and choose their own value. Check the Expose this filter to visitors, to allow them to change it checkbox, and the filter becomes a form control on the page:

Views is one of the most important modules in Drupal. After the field system, it is the tool you reach for most often as a site builder. You use it to build content listings, create blocks, power admin screens, and feed components into Drupal Canvas.

If you are building a backend admin page, do not leave it on View published content, or anyone can reach it. Use a more specific permission and always test the page.

• Override the fields: show only the title.
• Override the pager: show five items.
• Switch the format: use an HTML list.

For better filter controls, install Better Exposed Filters, which ships with Drupal CMS.

1. Edit the page in Canvas.
2. Double-click the footer region.
3. Choose your view from the components list.
4. Add a heading component above it.

Exposed forms have a few useful options:

Building an Author Block with Relationships

Once you understand fields, formatters, exposed filters, and displays, you can build almost any listing you need.

1. Create a second view and choose Content.
2. Add a contextual filter on the ID.
3. Set the contextual filter to get the value from the URL.

The Views UI can feel like a lot at first, but it rewards the time you spend learning it.

For a footer block, you might:

Keep in mind that long infinite-scroll pages can make the footer hard to reach. While you are in the advanced options, give the view a meaningful machine name. This matters when you load views programmatically.

Finally, change the format to suit the layout. Switching from an unformatted list to a Responsive grid with a sensible minimum column width gives you a clean card grid in a couple of clicks.

Creating a Backend Admin Page

To set it up:

With the format set to Unformatted list and Show set to Fields, you add the data you want to display. Click Add and pick from the Content category. A few fields make a good starting set:

1. Create a view and choose Content.
2. Create a page with a path under admin/content, such as admin/content/projects.
3. Use the Table format.
4. Enable the administration theme.

Tokens follow rendering order. A field can only reference fields that appear above it.

• Permission: set it to Access the content overview page to match Drupal’s own content listing.
• Fields: add the fields you want, plus an Operations links field for edit and delete actions.
• Published filter: expose it so admins can switch between published and unpublished content. Set the exposed filter to allow Any so it does not force a selection.

Once you save the view, you cannot change the base content you are querying. In this case, that is Content. Everything else, such as the display type and the sort, can change later.

The contextual filter passes the node ID of the current page into the query.

Wrapping Up

To create a view:

Add Better Exposed Filters for friendlier filter controls and Views Infinite Scroll for continuous loading, and you have a flexible toolkit for displaying content in Drupal CMS.

Require the relationship, since every node has an author, and a new User category appears in the available fields. Add the username and the user picture with a small image style.

The Show dropdown is the most important setting. Content is the most common option, but you can also query content revisions, users, and other fieldable entities.

By default, a view is assigned the View published content permission. This permission allows anonymous users to access all published content.

Rewrite text can hold Twig code, including if statements, but use it sparingly since logic buried in a view is hard to track down later. If you do add dynamic output, document it using the field’s administrative title.

It also gives you control over labels and other display options.