Site Building

9.4. Duplicating a View for Drupal 8, 9, and 10

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 by filtered by ingredients.

Site prerequisites

Steps

Sprout Video
  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 Section 2.7, “Concept: User Interface, Configuration, and Content translation” for an explanation.)

    Image
    Duplicate existing view

  2. Name the duplicate "Recipes" and click Duplicate. The view configuration page appears.
  3. 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.

    Image
    Change view title

  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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…

    Image
    Expose filter

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

  10. 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.
  11. In order to use Ajax (see Ajax entry in the Glossary) 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.
  12. Click Save to save the view.
  13. Go back to the home page and click Recipes in the navigation to view the new Recipes page.

    Image
    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 Section 5.7, “Changing the Order of Navigation”.