Drupal 8 - Tabs and action buttons

Drupal local tasks (tabs)

Drupal relies heavily on tabs for admin interfaces. Internally they are called local tasks and are documented Here.

As you can see in the documentation, we can arrange our own pages in different tabs using a custom module.

Drupal actions

In our views, we can create a button to add new content. In Drupal these buttons are called actions. You can define own actions in a custom module and way to do it is explained in documentation.


I will assume that you have gone through documentation already. So that instead of repeating everything, I will focus on few points which are missing in documentation or were not clear to me at first.

route_parameters

In the documentation, it's not mentioned, but you can pass route_parameters as well in configuration.

For example, default content add-form expects a node_type parameter to work properly. Suppose you are implementing that route by yourself, as explained in Node add form example, and now want to add action button for this custom route in view. You can create action button with the following configuration:

song.add_action:
  route_name: song.add_form
  title: 'Add song'
  route_parameters:
    node_type: 'song'
  appears_on:
    - album.song_list

It will properly fill up the node_type parameter in route.

Dynamic route parameters

route_parameters is only useful for static parameters. But what about situations when route requires dynamic parameter such as node id? Similar situation is explained in Node add form example

This is also not mentioned in the documentation, but drupal automatically tries to fill the target route parameters from the current request, as long as its available with the same name.

Task example

Consider a use case where you need to display album edit form and its related songs in different tabs.

Since tasks work with routes, we need to be able to display edit form and song list view through our custom routes. This is out of scope for this topic, but you can find details about how to do it Here and Here.

But I will mention possible route definitions here for the purpose of clarity.

Route for node edit form.

album.edit_form:
  path: '/admin/album/edit/{node}'
  defaults:
    _entity_form: 'node.edit'
    _title: 'Album'
  requirements:
    _entity_access: 'node.update'
    _permission: 'access content'
    node: \d+
  options:
    _admin_route: true
    parameters:
      node:
        type: 'entity:node'

Route for song list of an album.

album.song_list:
  path: '/admin/album/song_list/{node}'
  defaults:
    _controller: 'Drupal\music\Controller\AlbumController::albumSongList'
    _title: 'Song list'
  requirements:
    _permission: 'access content'
  options:
    _admin_route: true

Once custom routes are configured and working, you can display those pages in tabs using the following configuration.

album.edit_tab:
  title: 'Edit album'
  route_name: album.edit_form
  base_route: album.edit_form

album.song_list_tab:
  title: 'Song List'
  route_name: album.song_list
  base_route: album.edit_form

Despite the fact that both, album.edit_form and album.song_list relies on dynamic parameter node, they will work because Drupal will fill it automatically as long as they are using same parameter name.

Action example

Extending from task's example mentioned above, suppose you want to create an Add song button on song list page. And since song contains a reference field for an album, we should pre-fill it with the current album, for better authoring experience.

To achieve this we can override node add-form as explained in Node add form example and then our route path for add-form would look something like following

/admin/songs/add/{node_type}/{node}

And then we can easily create action button for this route because song list page already have a node parameter, drupal will automatically fill this value for song add-form route as well.

Reference

Dynamic route parameters functionality is mentioned in local tasks change records here and here, but the concept is same for both local tasks and actions.


  PHP, Drupal 8