Horizontal Tabs in Drupal 8

Parent Feed: 

Drupal 8 ships with a great and easy to use 'vertical_tabs' form element but unlikely a horizontal counterpart is missing. I'd needed exactly this today. I'll show you, how can I finally managed to get this in and how you can accomplish that much quicker.

On my search on an existing solution (tutorial, module, core patch, etc) I've only found an issue in the issue queue on drupal.org, that isn't really frequented very much: https://www.drupal.org/node/1168364.

And of course there's Field Group module, which already has horizontal tabs support. I tried hard to use this in my form but unfortunately failed to do so. Also, a Gist I've found didn't work at all for me.

Field group is great to use, as long you want to use it on entity forms and define and configure the field groups via Field UI. As soon as you want to use e.g. their horizontal tabs in any other form than an entity form, things get complicated (it's maybe even impossible to do so), as it seems to be closely coupled to entity forms (e.g. it relies on having entity type and bundle defined while making theme hook suggestions).

Horizontal Tabs module to the rescue

It even gets complicated, if you want it to use in an entity form programmatically. There's a lot of more stuff you will have to define in your form. When I tried to accomplish this, I have found myself digging more and more into the form processing that is happening inside field_group.module, trying to rebuild the necessary parts. When I then saw that the extra stuff I've added to my form elements were removed inside another processing step of field group, I've decided to rather build a lightweight solution for my problem that orientates on core's vertical tabs instead. I've accomplished that in about half an hour, while I was before trying to fix the field_group approach for a couple of hours.

Here's the module I've created: https://github.com/agoradesign/horizontal_tabs

I've already stated in the module's README file, why the module is currently only available on Github, not on drupal.org: It's important to me to first clarify whether there's a chance that this module's functionality gets merged into either Drupal Core (would be best imho) or at least into Field Group module, and if there's a demand for having this module on drupal.org anyway.

Another reason is that I've decided to preferring having a clean and logical form element name rather than reaching compatibility with field_group. Both modules are defining a form element with the same ID/name at the moment. This should also be part of the discussion. You can read more about that on the module's README (and Github page) as well.

One of the great things in the Drupal community is to concentrate very much on collaboration, having the positive effect that we have an ecosystem providing a great number of flexible, high quality modules without too much redundancy (in having multiple modules serving the same/similar features), while you often find in other open source projects a bunch modules doing similar things but non of the really satisfying your needs. The easyness of Drupal 8 in creating custom funcitonality in addition to a partially low speed of some modules being refactored and ported to Drupal 8, already caused some duplication of modules - I don't want to push this further without having thought about alternatives.

That's why I found the Github hosting as the currently best solution. You can load it via Composer as agoradesign/horizontal_tabs.

Let's discuss

I've already commented on the Core issue here: https://www.drupal.org/node/1168364

I'm planning to open an issue about possibilities in merging this into field group as well (I'll update this post as soon as I've done that).

Anyway, I'd be happy about your feedback. Doing this rather in the mentioned issue(s) on drupal.org would make sense. Opening issues on Github is also ok. Of course you can always comment directly here under the post as well, but my response rate there isn't that quick. Informal discussions on Twitter would also make sense. So feel free do this on contacting me. I've already opened discussion in this tweet here: https://twitter.com/agoradesign_at/status/895975465294241792

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web