The example module for vertical tabs looks horrible... does a module really need so much work, including a JS file, just to make them?

There's a docs page here that looks a lot simpler: http://drupal.org/handbook/modules/vertical-tabs

... except I've tried the code from the 'Adding vertical tabs to your own module's form' section and it does nada :(

CommentFileSizeAuthor
#12 1016436.12-vtabs-docs.patch1.79 KBdeviantintegral
#4 examples_vertical_tabs.patch2.27 KBilo

Comments

dave reid’s picture

dave reid
he/him
Primary language English
Location Nebraska USA
commented

Well, Vertical Tabs are useless without tab summaries.

joachim’s picture

joachim commented

I think it depends on the form -- if it's an action rather than an edit, then all the vertical tabs are empty to begin with. Granted it's nice to be able to see what you've edited, but collapsible fieldsets don't show you that either.

It would be nice then if we have an example of vertical tabs in a form from scratch, as well as for a form alteration.

I've just managed to get them to work by cribbing core user settings form, and it is as simple as adding the (slightly fiddly -- see #1016912: vertical tabs don't work if deeper in the form array, #1016918: Vertical tabs should use common renderable structures, not extra #group property) vertical tabs element.

andrewmacpherson’s picture

andrewmacpherson commented

@1 - I disagree that vertical tabs are useless without summaries. For tabs that contain a lot of information it's not always practical. The user account notification emails at admin/config/people/accounts are a good example.

ilo’s picture

ilo commented
Status: Active » Needs review
StatusFileSize
new examples_vertical_tabs.patch2.27 KB

So is the discussion about making vertical tabs 'look and feelt' fieldsets? in the end it is about usability, so it make sense to have empty tabs without all that code.

What bout just stating what are the form elements form in the example? in the end, only 'group' attribute is required to have a fieldset included in the vertical tab element, and for this I guess there is no need to create additional code.

joachim’s picture

joachim commented

I think we need to add an example that's a fresh form rather than hook_form_altering an existing one.

ilo’s picture

ilo commented
Assigned: Unassigned » ilo

Yes joachim, definitelly there are a lot of things missing in the example module.

I'd say that documentation page is very clear about how to create a form with vertical tabs enabled, clear enough for everybody to understand, and on the other hand, vertical tabs D7 code requires pretty much phpDoc work.

Creating just a form for this requires a menu entry, a form page and too much code not related to 'vertical tabs' at all, that IMO we don't need if we point to the http://drupal.org/handbook/modules/vertical-tabs documentation page using good comments on code.

As I'll be doing the phpDoc rewrite for this module, please, comment on any ideas about this. In the end I think that I'd be adding some more code, it does not take that much to add a form.

joachim’s picture

joachim commented

That page doesn't look write for D7 at all.

I got them to work like this:

  $form['hooks_tabs'] = array(
    '#type' => 'vertical_tabs',
  );
  

  foreach ($hook_groups as $hook_group => $hooks) {
    $form[$hook_group] = array(
      '#type' => 'fieldset',
      '#title' => $hook_group . ' hooks',
      '#collapsible' => TRUE,
      '#collapsed' => TRUE,
      //'#theme'  => 'module_builder_hook_list',
      '#tree' => TRUE,
      '#group' => 'hooks_tabs',
    );

-- which to me seems rather incongruous with the general way that forms work -- that is, you normally nest form arrays for things to go within other things; here you don't.

ilo’s picture

ilo commented

Really? I was able to create vtabs this way in its simplest way:

$form['hooks_tabs'] = array(
    '#type' => 'vertical_tabs',
);
$form['hooks_tabs']['fieldset_1] = array(
    '#type' => 'fieldset',
    '#title' => 'first item',
);
$form['hooks_tabs']['fieldset_2] = array(
    '#type' => 'fieldset',
    '#title' => 'first item',
);
joachim’s picture

joachim commented

Oh yes that works.

In which case, the code in core I took my example from could do to be simplified!

dave reid’s picture

dave reid
he/him
Primary language English
Location Nebraska USA
commented
Version: » 7.x-1.x-dev
Anonymous’s picture

Anonymous (not verified) commented
Status: Needs review » Needs work 
+++ vertical_tabs_example/vertical_tabs_example.module	15 Jan 2011 01:54:42 -0000
@@ -31,24 +31,37 @@
+      // In most cases, this is 'additional_settings'. This is the only required
+      // form attribute required for the vertical tabs control to include the
+      // form element in the vertical tab group.
       '#group' => 'additional_settings',

I don't know whether this addition clarifies the point. It also uses required twice.

+++ vertical_tabs_example/vertical_tabs_example.module	15 Jan 2011 01:54:42 -0000
@@ -31,24 +31,37 @@
+      // Vertical tabs provide its most usable appearance when they are used to
+      // include a summary of the information contained in the fieldset.
+      // Attaching a javascript for vertical tabs control, in this case it is
+      // used to update the 'summary' property of the vertical tab, which is,

Don't need to say that this is the most common usage.

I would suggest something like "Vertical tabs are most usable when they include a summary of the fieldset values. This JavaScript file updates the 'summary' property of the tab."

+++ vertical_tabs_example/vertical_tabs_example.module	15 Jan 2011 01:54:42 -0000
@@ -31,24 +31,37 @@
+    /*
+     * The following form elements are an example of how to capture part of the
+     * fieldset element's information to be displayed in the tab summary when ¶
+     * the fieldset is collapsed.
+     */

Shouldn't comments within function bodies always use C++ style, ie "//"? I would change wording to "The form elements below provide a demonstration of how a fieldset summary can be displayed in a collapsed tab."

Powered by Dreditor.

deviantintegral’s picture

deviantintegral commented
StatusFileSize
new 1016436.12-vtabs-docs.patch1.79 KB

Here's a patch that rewords and cleans up the docs based on the feedback from #11.

deviantintegral’s picture

deviantintegral commented
Status: Needs work » Needs review
mile23’s picture

mile23
Primary language English
Location Seattle, WA
commented

Applied the patch, expanded a few comments, added clearer language to the page at examples/vertical_tabs, gave our tab a very light weight so it's more obvious, and gave the textfield a default value.

Thanks everyone. :-)

Committed: http://drupalcode.org/project/examples.git/commitdiff/2b8f0a5908533d857a...

mile23’s picture

mile23
Primary language English
Location Seattle, WA
commented
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.