Override item-list.html.twig & time.html.twig inside a view

Question

I've created a view that outputs a <ul> with a <time> element in each <li>. I need to convert the HTML list to a select.

So I did 2 things:

Copied item-list.html.twig and changed <ul> to a <select>
Copied time.html.twig and changed <time> to <option>

Although this works I need those 2 templates to be scoped to my view named: 'vcon-selection-table'. I tried many things but nothing works:

views-view-table--vcon-selection-table--item-list.html
views-view-table--vcon-selection-table-item-list.html
views-view-table--vcon-selection-table.html--dataset-item-list

So the question is: What template name should I use to override the templates item-list.html.twig and time.html.twig inside my view?

leymannx · Answer 1 · 2018-03-19T10:49:39.940

Is the purpose of that view to only provide that <select> element and <option> elements? Then this really isn't the way to go. Don't build a form or form elements with Views.

You'd better provide a custom form or a custom item_list in a custom block. The block then can be placed where ever you need it. There are plenty of tutorials out there. Maybe take the following as a starting point: https://valuebound.com/resources/blog/creating-a-custom-form-in-a-block-in-two-steps-in-Drupal-8

Otherwise, if you really want to continue your road I think you have to simply preprocess the list and time fields to switch to a different template according your desired conditions. I strongly guess there is no option that a custom template for a field from a node in a view will automatically be taken into account by naming patterns. You have to add that template suggestion manually first.

Snippet to be placed in MYMODULE.module file or MYTHEME.theme file.

/**
 * Implements hook_theme_suggestions_HOOK_alter().
 */
function MYMODULE/MYTHEME_theme_suggestions_item_list_alter(array &$suggestions, array $variables) {

  // Use \Drupal::routeMatch() to get the current view ID or some other indicator.
  // Sample: Get the current view ID.
  $view_id = \Drupal::routeMatch()->getRouteObject()->getDefault('view_id');

  // Install Devel, Kint module, then uncomment the following line and flush caches to inspect the outcome.
  // ksm($view_id);

  // Add the template suggestion.
  // Add your template now under /templates/item-list--VIEWID.html.twig
  if (!empty($view_id)) {
    $suggestions[] = 'item_list__' . $view_id;
  }
}

Downside of this approach is that this would trigger all item_lists that live on that exact page/view to take this template. You could fine-grain your templating much better with a custom module and a custom item_list and/or form.

Alternatively you can also move the logic to the date field and a custom view mode and an extra template for that. Then at least it stays where it belongs to.

To enable Twig debugging and getting the built-in template suggestions printed as HTML comments follow this article: https://www.drupal.org/docs/8/theming/twig/debugging-twig-templates

An external tool (mautic) is generating a form inside the page using a script tag. So i don't need to build a form but i do need to augment the generated form with an additional select element. The view is a list of nodes (content type: courses) where people can sign up for a course on a particular date. The creator of a course has the ability to add dates using a date field that was set up on the content type. — kevinius, Mar 19 '18 at 08:47
@kevinius - Again: Don't build a form (or form elements) with Views. Your question lacks more detailed information, but from what I know now I'd say you are better off with some preprocessing hooks to attach a custom form (built with Drupal's Form API) to your view or nodes and that form would take some arguments to populate the options. — leymannx, Mar 19 '18 at 09:00
@kevinius - Nevertheless if you want to continue your road I think you have to maybe simply preprocess the list and time fields to switch to a different template according your desired conditions. I strongly guess there is no option that a custom template for a field from a node in a view will automatically be taken into account by naming patterns. You have to add that template suggestion manually first. — leymannx, Mar 19 '18 at 09:14
What code should i use to add that specific template suggestion so that i can override the templates item-list.html.twig and time.html.twig in my view. — kevinius, Mar 19 '18 at 09:35
$view_id returns null... The way i include the view in the page is using the twig tweak function: {{ drupal_view('vcon_selection_tablle') }} in ds-2col-stacked-fluid--node-academy.html — kevinius, Mar 20 '18 at 15:20
`$find_sth_else = \Drupal::routeMatch()->getRouteObject()` and `ksm($find_sth_else)`. Then look for the Available methods tab. And don't click the `+` icon. Click the titles. — leymannx, Mar 20 '18 at 16:12
@kevinius - Then find some other unique identifier. Path or something. — leymannx, Mar 20 '18 at 16:13

Override item-list.html.twig & time.html.twig inside a view

1 Answers1