Using Plone 4’s Form Tab Magic

I’m not sure if this is strictly a Plone 4 thing, but it’s a jQuery thing, so probably…

Tabbed interfaces are a nice way to present a lot of content to a user in manageable chunks. I’ve written tabbed interfaces in the past from “scratch”, and while a ton of fun, that approach is not really practical these days, what with the jQuery and such. And with Plone, its even less useful, since, well, Plone already does it.

You may have seen this before:

Plone's Tabbed Schemata Interface

Plone provides a nice tabbed interface for AT schema “schemata”, which you’d think would be a pretty specific use case. Luckily, the code behind it was written to be generic, and is super easy-ish to use.

A little firebug inspection pointed me to form_tabbing.js, which is located in Products.CMFPlone (aka the main Plone egg). It has a little bit of help text at the top explaining its use:


/*
* This is the code for the tabbed forms. It assumes the following markup:
*
* <form class="enableFormTabbing">
* <fieldset id="fieldset-[unique-id]">
* <legend id="fieldsetlegend-[same-id-as-above]">Title</legend>
* </fieldset>
* </form>
*
* or the following
*
* <dl class="enableFormTabbing">
* <dt id="fieldsetlegend-[unique-id]">Title</dt>
* <dd id="fieldset-[same-id-as-above]">
* </dd>
* </dl>
*
*/

I’ve just used this (the DL style) and it works great. Whoo-hoo!

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

One Response to Using Plone 4’s Form Tab Magic

  1. Simu says:

    This has been available at least since Plone 3, other generic and useful scripts are:

    dropdown.js
    To create dropdown menus, used for the action menus

    collapsiblesections.js
    To create collapsible sections, previously used for the history viewlet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s