Views are the most significant part of a Drupal website. Almost every Drupal site uses one or more views to list their content. The Views module is a Drupal 8 core module that manages these lists of content. You might run into situations where you need to sort these views. Currently, there are very few options to sort view items. You can only choose between simple date sorting, alphabetical sorting, and few more. Also, the sorting will be content specific and depends on the value of each content. To overcome these issues, we can use the simple table drag option provided by the DraggableViews module in Drupal 8. It is easy to configure and manage for the site administrator or editors. In this article we will be configuring the DraggableViews module for a Drupal 8 website.
Installing the DraggableViews Module
Let’s get started by installing the module. You can download and install the Draggable views module from here or from the composer. Download and extract the file and then place inside your project directory. Alternatively, you can also use composer to download with this command –
composer require drupal/draggableviews
Next, go to Extend and enable the module. You can also use drush to enable the DraggableViews module. Always ensure you have the latest version of Views installed before you start.
Configuring the DraggableViews module for drupal 8
Draggbleviews will provide drag and drop options for each row like how we drag and drop blocks or taxonomy terms. This is possible because of the tabledrag.js javascript that is used by these modules. Similarly, DraggableViews module uses the table formatted view display for using the core jquery feature from tabledrag.js which will allow you to drag and drop the HTML tables.
Steps to reproduce -
1. Create a view
2. Create a Draggable view display
3. Add a menu link for easy navigation
4. Setup the permissions
1. Create a view: First, let us create a view for listing content of any content type as required for your website. Add the necessary settings needed for the view. Make sure you remove the existing sort criteria and add the Draggable view sort from the selection. Please refer to the attached screenshot.
2. Create a Draggable view display: Create a view or add page display to the existing view by selecting the table format. Also follow the below instructions -
Title: Title for the view.
Format: Select the table format for the view display.
Fields: Under this section add the fields you need to show on the view page. At least three fields are required.
Content: Title: The fields which will be shown on the page. You can add any number of fields from the selected entity.
Draggableviews: Content: This is a mandatory field to make draggable views content to work. Click on the add button and search for Draggableviews (content) and add field.
Operational links : This is a mandatory field too to show the drag options for the user along with edit/delete.
Filter Criteria: Select the filters you want to include along with the selected content type.
Sort Criteria: Under this section remove the existing sort option and add the new sort by selecting the draggable views weight.
Path: Provide the valid path of your interest like /admin/content/sketches-order.
Pager: While configuring the pager, always display all items with no pager so that users can re-order all the items instead of each page item. See the attached screenshot for reference.
3. Add a menu link for easy navigation: Adding a menu link will provide the quick access for the Draggable view page. Please provide a valid path for views like “/admin/content/view-name” so that we can have a menu link under administration menus. To add a menu link to the navigation, edit the created view under Page Settings --> Menu. Select the menu tab and add the necessary settings here. See the attached screenshot for reference.
Setup the permissions: Draggable view module provides custom permissions for the user authentication to the draggable view.
To update the permission please go to people --> permission. Next, search for draggable views. You will then see all permissions defined for roles. Select the trusted role and save the configuration.
Also, you will need to set the permission for the created view under Page settings -> Access. Select the “Access Draggableviews” permission and save the view.
And that's it! You will now have the page containing a drag and drop handle to reorder your content as in the image shown below.
Also, you can see the same order for all the created views of content type. Now reordering of your view items is much easier than before.
