How I created custom HTML Tables in Drupal 8 using views module

Drupal is a complex framework for a beginner. It is not only because of the advanced documentation, but the lack of it. I had recently started out on Drupal, and it was an entirely different experience than the WordPress or Opencart which I was used to in the course of time.

Unlike WordPress, there are not many modules that we can use in Drupal to get something to work. But there are hooks, templates and a useful utility called drush in Drupal which helps you to keep moving.

Consider the Views module in Drupal. It has been included in the core version of Drupal. I am relatively new to this system, but this module is fun to create pages from other contents in the site with ease. In my recent project, we were using Drupal Webforms for generating a complex form for accepting orders. The requirements for the submissions were as follows

  1. List all orders in a page
  2. User can change the status of an order without going to any other page
  3. User & Administrator can exchange comments in the page
  4. Show a tooltip in the header

Although, the above might seem simple, it is difficult to achieve in Drupal. This is because, the webform module doesn’t have connection to the internal Comments module. We cannot comment on the submissions individually out of the box, and probably cannot be achieved as per the reply quoted below ( Drupal Webform Issue )

Comments are not (and will not) be supported. As noted on the project page, submissions are not nodes, which are the only thing that can be commented on in Drupal.

So in order to add comments, I first converted the webform submission to a node using a module Webform Content Creator. Comments can be easily added to the nodes, and order listing pages can be generated using the Drupal Views Module.

However, in the views module, with the display format as Table, we cannot set the view to be shown in multi-lines. ( Know about creating a page here ). After much research, I stumbled across the View Field Templates in an article for Drupal 7, I decided to give it a try. We could easily find the templates used for the view using the web inspector by enabling Twig Debugging in Drupal. It can either be done via enabling the Twig Debugging in sites/default/services.yml or by installing a module. I went for the second route.

The succeeding steps were simple enough. Copy the template for the required field, and put it in the custom theme’s template folder and rename the template files ( Pretty much explained in detail here ). For putting the comments column in next row, all I had to do was prepend the following before the {{ output- }} in the twig file

</td>
</tr>
<tr class=’new_row’>
<td colspan=”10″>

The colspan is to make the row stretch full span instead of limiting to one row.

We can add custom HTML elements, such as select boxes in these template files, and output it into the table. So I created a select box to change status and update it dynamically using Ajax. I had created a custom module to function as the ajax callback, which would update the status.

In conclusion, by editing the View Fields template & View Page templates, we can achieve any custom requirement that is needed. All that is required is the twig debugger, which will show the template in use, copy it into the sub-theme where all the customisations are made.