Drupal7: Customizing Admin Vertical Tabs

David G - DrupalIn a recent project I’m developing the content types contain 20 or 30 fields at times. By default Drupal simply lays out all the fields you add to a Content Type in 1 single looooong list. For many clients, and with large content types, this default behavior can become unwieldy. Having used the module before for laying out other pieces of a website I recalled the Field Group module could be used to customize the Edit Pages used when adding or editing Drupal content. So I wanted to take groups of my fields that are related and add them to (vertical) tabs on the edit page. For example all my media fields, or all the fields I’m referring to as metadata fields for the content type.

The content type of my project is defined as follows. The field_group module simply allows you to add a new field to your content type that allows you to group (or nest) existing fields somehow. This field is used solely for display purposes either in the Edit or Add New pages of a piece of content, or if you the Display Suite module you can group entered value(s) of your content type into a Table or a Background Image for example.

Content type whose fields have been broken up into groups, where each group is a Vertical Tab.

Content type whose fields have been broken up into groups, where each group is a Vertical Tab.

Out of the box the field group module supports the following groupings of other fields within your content type: Fieldsets, Horizontal tabs, Vertical tabs, Accordions, Divs, Multipage steps (note:only client side), HTML5 elements, Html elements.

As you can see in the above image my content type has 4 fields with a fieldname with the pattern group_*, and under each grouping there are numerous fields. This way the Edit page for the content type doesn’t (necessarily) show these fields listed out every time the page is viewed.

With the default Drupal vertical tabs sometimes you will see a Summary of what is hidden in the tab if it is not expanded. It turns out (after research) that this information is provided by Javascript for the tab label. Unfortunately without custom code there is no easy way in Drupal7 to modify the javascript summary text easily for your custom tabs.

Example Drupal7 default modules (path, comment, revisions) summary information per tab.

Example Drupal7 default modules (path, comment, revisions) summary information per tab.

If you’re intent on trying this you can see this issue on Drupal.org regarding custom tab summaries.

So after applying our field group settings to create vertical tabs we end up with this much more managable Edit screen:

Final visual example of the custom content type with better tabs based usage.

Final visual example of the custom content type with better tabs based usage.

Note that in this edit screen my custom vertical tabs do not have summaries applied to them at this time. I intend on supplying my own Javascript to make them more helpeful!

Hopefully you’ve seen how useful the Field Group module can be in this instance, and a few of it’s shortcomings unless you have a developer around to write some custom code for you.

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , | Posted under Drupal | RSS 2.0

Author Spotlight

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

Leave a Reply

Your email address will not be published. Required fields are marked *