# Chapter 9: Creating Listings with Views # Concept: Uses of Views ## Prerequisite knowledge * [Concept: Modular Content](/link/692) * [Concept: Content Entities and Fields](/link/691) ## What is a view? A _view_ is a listing of content on a website. The core Views module handles the display of views, and the core Views UI module allows you to create and edit them in the administrative interface. When you define views, you are interested in taking data from your website and displaying it to the user. ## What types of data can be displayed using views? You can create views to output practically any content entity that is stored in the system. For example, you can create the following lists for the farmers market site: * Lists of vendors * Lists of recipes * Lists of the most recent content on the site * Lists of users on the site ## What are the ways data can be output using views? A listing created by a view can be in any of the following forms: * Table with sortable fields * Grid layouts * Teasers or pictures that link to articles * Blocks * JSON output * RSS feeds * Calendars * On-screen slideshows ## Related topics * [Concept: The Parts of a View](/link/750) * [Creating a Content List View](/link/751) # Concept: The Parts of a View ## Prerequisite knowledge * [Concept: Content Entities and Fields](/link/691) * [Concept: Modular Content](/link/692) * [Concept: Uses of Views](/link/749) * [Concept: Paths, Aliases, and URLs](/link/712) * [Concept: Blocks](/link/745) ## What are the parts of a view? When you are editing a view in the administrative interface, you will see the following parts (or sections), which allow you to specify what data to output, in what order, and in what format: - **Display:** Each view can have one or more displays, each of which produces one type of output. Options for display types include: Page;; Makes output at a particular URL, for the main page content at that URL. Block;; Makes output in a block, which can be placed on pages. Feed;; Makes an RSS or another type of feed. Attachment;; Makes output that you can attach to another display. - **Format:** Depending on the display type, you can choose to output your data in a table, grid, HTML list, or another format. Some formats also give you a second choice that lets you output either rendered entities or fields; other formats do not give you this choice (for example, if you use a table format, you must always use fields). - **Fields:** Depending on the format choice, you may be able to choose which content fields are output. For example, if you were making a view of recipe content items, in a block display you might show only the recipe names, while in a full page display you might also show an image field because you have more space. - **Filter criteria:** Filters limit the data to be output, based on criteria such as whether the content has been published or not, the type of content, or a field value. For instance, to make a view of recipe content items, you would need to filter to the Recipe content type, and to published recipes. Filters can also be _exposed_, which means that users will have a form where they can choose their own filter values. You might use this on a Recipe page to let users filter for recipes with certain ingredients. - **Sort criteria:** Defines the order to present the output, which can be based on any content field. - **Contextual filters:** Contextual filters are like regular filters, except that the values come from the _context_ of the view display, such as the full URL of the page being displayed, the current date or time, or some other value that can be detected by the view calculation. - **Relationships:** Relationships allow you to expand what is displayed in your view, by relating the base content being displayed to other content entities. Relationships are created using fields on the base content that relate it to the other content; one example is that all regular content items have an author field, which references the user account of the person who authored the content. Once you have created a relationship, you can display fields from the referenced entity in the view. ## Related topics [Creating a Content List View](/link/751) # Creating a Content List View ## Goal Create a page listing vendors that will be automatically updated whenever a vendor is added, deleted, or updated on the site. ## Prerequisite knowledge * [Concept: Uses of Views](/link/749) * [Concept: The Parts of a View](/link/750) ## Site prerequisites * The core Views and Views UI modules must be installed. These are installed for you when you install with the core Standard installation profile. * The Vendor content type must exist, with URL and Main image fields. Your site must have a couple of Vendor content items. See [Adding a Content Type](/link/720), [Adding Basic Fields to a Content Type](/link/722), and [Creating a Content Item](/link/713). * The _Medium (220x220)_ image style must be defined. This is created on your site when you install the core Image module (installed with the core Standard installation profile) but can be recreated if deleted. See [Setting Up an Image Style](/link/732). ## Steps 1. In the _Manage_ administrative menu, navigate to _Structure_ > _Views_ > _Add view_ (_admin/structure/views/add_). The _Add view_ wizard appears. 1. Fill in the fields as shown below.
Field name Explanation Example value
View basic information > View name Name of the view that will be visible in the administration pages Vendors
View settings > Show Type of information listed in the view Content
View settings > of type Specify content type Vendor
View settings > sorted by List order Title
Page settings > Create a page Create a page that displays the view Checked
Page settings > Page title Title show above the view Vendors
Page settings > Path Address of the page vendors
Page settings > Page display settings > Display format Type of list Table
Page settings > Items to display Number of items visible on the page 10
Page settings > Use a pager Split up the list in several pages if there are more items Checked
Page settings > Create a menu link Add the view page to the menu Checked
Page settings > Menu > Type Type of menu item to create Normal menu entry
Page settings > Menu > Menu link title Label of the link in the menu Vendors
Page settings > Menu > Parent Menu in which to add the link Main navigation
Add new view wizard 1. Click _Save and edit_. The view configuration page appears. 1. Under _Fields_, click _Add_ from the dropdown button. The _Add fields_ pop-up appears. 1. Enter the word "image" in the search field. 1. Check Main image in the table. 1. Click _Apply_. The _Configure field: Content: Main Image_ pop-up appears. 1. Fill in the fields as shown below.
Field name Explanation Example value
Create a label Add a label before the field value Unchecked
Image style The format of the image Medium (220x220)
Link image to Add a link to the content item Content
1. Click _Apply_. The view configuration page appears. 1. Under _Fields_, click _Add_ from the dropdown button. The _Add fields_ pop-up appears. 1. Enter the word "body" in the search field. 1. Select _Body_ in the table. 1. Click _Apply_. The _Configure field: Content: Body_ pop-up appears. 1. Fill in the fields as shown below.
Field name Explanation Example value
Create a label Add a label before the field value Unchecked
Formatter The presentation of the field value Summary or trimmed
Trimmed limit: The number of maximum characters shown 120
1. Click _Apply_. The view configuration page appears. 1. Under _Fields_, click _Content: Title (Title)_. The _Configure field: Content: Title_ pop-up appears. 1. Uncheck _Create a label_. This will remove the label that was created by the wizard. 1. Click _Apply_. The view configuration page appears. 1. Under _Fields_, click _Rearrange_ in the dropdown button. The _Rearrange fields_ pop-up appears. 1. Drag the cross bar handles of fields to put them into the right order: Image, Title, Body. As an alternative to dragging, you can click the _Show row weights_ link at the top of the table and enter numerical weights (fields with lower or more negative weights will be shown first). 1. Click _Apply_. The view configuration page appears. 1. Optionally, click _Update preview_ for a preview. 1. Click _Save_. ![Vendors view configuration page](https://docs.cocobook.com/uploads/images/gallery/2026-10/views-create-view.png) 1. Navigate to the homepage and click Vendors from the main navigation to see the result. ![Vendors view output](https://docs.cocobook.com/uploads/images/gallery/2026-10/views-create-view-output.png) ## Expand your understanding The link to the view in the main navigation will probably not be in the right place. Change the order of the menu links in the main navigation. See [Changing the Order of Navigation](/link/718). ## Videos [Creating a Content List View](https://www.youtube.com/watch?v=aw02gXlte9I) # Duplicating a View ## Goal Create a page listing recipes by duplicating the existing Vendors view. Modify the page so that the recipes are displayed in a grid and can be filtered by ingredients. ## Prerequisite knowledge * [Concept: Uses of Views](/link/749) * [Concept: The Parts of a View](/link/750) * [Creating a Content List View](/link/751) ## Site prerequisites * The Vendor and Recipe content types must exist; both must have Main image fields, and the Recipe content type must have an Ingredients field. Your site must also have a couple of Recipe content items. See [Adding a Content Type](/link/720), [Adding Basic Fields to a Content Type](/link/722), [Setting Up a Taxonomy](/link/725), [Changing Content Entry Forms](/link/728), and [Creating a Content Item](/link/713). * The Vendors view must exist. See [Creating a Content List View](/link/751). ## Steps 1. In the _Manage_ administrative menu, navigate to _Structure_ > _Views_ (_admin/structure/views_). Find the view "Vendors" and click _Duplicate_ in its dropdown button. (Note that the names of views that came with your installation profile are shown in English on this page; see [Concept: User Interface, Configuration, and Content translation](/link/695) for an explanation.) Duplicate existing view 1. Name the duplicate "Recipes" and click _Duplicate_. The view configuration page appears. 1. To change the title of the view page to "Recipes", click Vendors in the _Title_ field under _Title_. The _Page: The title of this view_ pop-up appears. Enter "Recipes". Click _Apply_. Change view title 1. To change from a table to a grid format, click _Table_ in the _Format_ field under _Format_. The _Page: How should this view be styled_ pop-up appears. Check _Grid_ and click _Apply_. The _Page: Style options_ pop-up appears. Retain the default values and click _Apply_. 1. To retain only the title and image fields for the Recipes view, click _Content: Body_ under _Fields_. Click _Remove_ in the pop-up that appears. 1. To change the content type filter to use the Recipe content type, click _Content: Type (=Vendor)_ under _Filter criteria_. In the _Configure filter criterion: Content: Type_ pop-up, check Recipe and uncheck Vendor. Click _Apply_. 1. To add a further filter that is exposed to visitors, click _Add_ in the dropdown button under _Filter criteria_. Search for "ingredients" and check "Ingredients (field_ingredients)". Click _Add and configure filter criteria_. 1. The appearing pop-up offers extra settings on vocabulary and selection type. Click _Apply and continue_. The next pop-up allows you to expose this filter to visitors. Fill in the fields as shown below, and click _Apply_.
Field name Explanation Example value
Expose this filter to visitors, to allow them to change it Allow visitors to filter and search Checked
Required Whether a value has to be provided or not Unchecked
Label Label shown for this filter on the view page Find recipes using...
![Expose filter](https://docs.cocobook.com/uploads/images/gallery/2026-10/views-duplicate-expose.png) 1. To change the _Path_ label field to "Recipes", click "/vendors" in the _Path_ field under _Page settings_. In the pop-up that appears, enter the path "recipes" and click _Apply_. Note that when editing a view, you enter paths without the leading "/", unlike on other administrative pages (such as when providing a path to a content item page). 1. To change the menu link title, click "Normal: Vendors" in the _Menu_ field under _Page settings_. In the pop-up that appears, change the title to "Recipes" and click _Apply_. 1. In order to use Ajax (see [Ajax entry in the Glossary](/link/789#bkmrk-ajax)) to make filtering and paging faster for users, under _Advanced_ > _Other_, click _No_ in the _Use AJAX_ field. Check _Use AJAX_ in the pop-up that appears, and click _Apply_. 1. Click _Save_ to save the view. 1. Go back to the home page and click Recipes in the navigation to view the new Recipes page. Recipes view ## Expand your understanding The link to the view in the main navigation will probably not be in the right place. Change the order of the menu links in the main navigation. See [Changing the Order of Navigation](/link/718). ## Related concepts * [Planning your Content Structure](/link/693) * [Ajax entry in the Glossary](/link/789#bkmrk-ajax) ## Videos [Duplicating a View](https://www.youtube.com/watch?v=N0mkt8Q1Yv4) # Adding a Block Display to a View ## Goal Add a block display to the Recipes view to display the most recent recipes in a sidebar, and change its configuration without changing the existing Recipes page view. ## Prerequisite knowledge * [Concept: Uses of Views](/link/749) * [Concept: The Parts of a View](/link/750) * [Creating a Content List View](/link/751) ## Site prerequisites * The Recipe content type must exist, it must have a Main image field, and your site must have a couple of Recipe content items. See [Adding a Content Type](/link/720), [Adding Basic Fields to a Content Type](/link/722), [Changing Content Entry Forms](/link/728), and [Creating a Content Item](/link/713). * The _Thumbnail (100x100)_ image style must be defined. This is created on your site when you install the core Image module (installed with the core Standard installation profile) but can be recreated if deleted. See [Setting Up an Image Style](/link/732). * The Recipes view must exist. See [Creating a Content List View](/link/751) and [Duplicating a View](/link/752). ## Steps 1. In the _Manage_ administrative menu, navigate to _Structure_ > _Views_ (_admin/structure/views_). Find the view "Recipes" and click _Edit_ from its dropdown button. Alternatively, navigate to the Recipes page in the main site navigation, and click the _Edit view_ contextual link in the main area of the page. See [Concept: Administrative Overview](/link/705) for information about contextual links. 1. Create a new block display by clicking _Add_ under _Displays_. Click _Block_ from the list of links that appears. The new display is created, and the focus is automatically switched to its configuration. ![Add block display](https://docs.cocobook.com/uploads/images/gallery/2026-10/views-block-add-block.png) 1. To change the title of this display, click _Block_ in the _Display name_ field. The _Block: The name and the description of this display_ pop-up appears. Change the _Administrative name_ to "Recent recipes". Click _Apply_. 1. To change the title of the block, click Recipes in the _Title_ field under _Title_. In the pop-up that appears, select _This block (override)_ from the _For_ select list. Change the _Title_ field to "New recipes" and click _Apply (this display)_. ![Title only for this block](https://docs.cocobook.com/uploads/images/gallery/2026-10/views-block-title.png) 1. To change the block's style, click _Grid_ in the _Format_ field under _Format_. In the pop-up that appears, select _This block (override)_ from the _For_ select list. Select _Unformatted list_ and Click _Apply (this display)_. You can further configure the style options in the next pop-up that appears. Then click _Apply_. 1. To configure the image field, click _Content: Main image_ under _Fields_. In the pop-up that appears, select _This block (override)_ from the _For_ select list. Select _Image style Thumbnail (100x100)_. Click _Apply (this display)_. Image to thumbnail 1. To remove ingredients as a filter, click _Content: Ingredients (exposed)_ under _Filter criteria_. In the pop-up that appears, select _This block (override)_ from the _For_ select list. Click _Remove_ at the bottom. 1. To configure how you want the content to be sorted in the view, click _Add_ from the dropdown button under _Sort criteria_. In the pop-up that appears, select _This block (override)_ from the _For_ select list. Check _Authored on_ (in the _Content_ category), and then click _Add and configure sort criteria_. 1. In the appearing configuration pop-up, select _Sort descending_ to have the most recent recipes appear first. Click _Apply_. 1. To specify the number of items to be displayed, click _Mini_ in the _Use pager_ field under _Pager_. In the pop-up that appears, select _This block (override)_ from the _For_ select list. Under _Pager_, select _Display a specified number of items_. Click _Apply (this display)_. In the _Block: Pager options_ pop-up, provide "5" as the value for _Items to display_. Click _Apply_. 1. Click _Save_. You will either see the view editing page again, or the Recipes page, depending on what you did in step 1. You should also see a message saying that the view has been saved. Summary page after configuration 1. Place the "Recipes: Recent Recipes" block in the _Sidebar second_ region. See [Placing a Block in a Region](/link/747). Navigate to the site's home page to see the block. New Recipes block on homepage ## Videos [Adding a Block Display to a View](https://www.youtube.com/watch?v=xrnuekARwYc)