Interface Module Part One


Sharing some video of a the Drupal Interface module that I've been working on here at Trellon. With our new site up, I can devote more time to this project.

Interface is a module for authoring node form interfaces. Primarily, the module is being developed to increase the usability of Drupal sites. It allows administrators to control the placement of form elements using drag and drop tools like you might see on Facebook. Placement of form elements is handled by templates, which work similarly to other themable elements in Drupal. Templates can be authored with CSS and JavaScript, and create regions in templates that allow form elements to be placed in different sections of the page. Each template includes an info file, for specifying characteristic properties of each Interface.

I am putting a lot of work into behaviors, which are small scripts for carrying out animations and other operations in the interface. Behaviors will be associated with different regions within each template, and with different form elements in each region. For example, you might have a region which displays all form elements within an accordion menu, and several form elements above it which display as part of a tab set. Right now, I have a workable tabs interface underway, along with the accordion menu, and plan on building a behavior to replace checkboxes with image buttons.

Here's an early proof of concept video for the module: Interface Module. Be careful if you are on dial up, it's a big file. I intend to have a working beta ready before DrupalCon DC this March, and I'm planning to release another video every week or two until it is finished.

This module started as something completely different. I had been working on a widget module for Drupal for about 6 months when I realized that the content authoring tools were going to make it inaccessible to all but the most advanced users. This increased my interest in building an alternative interface for authoring content, and lead to some drag and drop prototypes. Around that time, I got stuck in at an online politics conference where a series of speakers criticized Drupal for lacking the 'high aesthetics' of Joomla's interface despite all of it's other features. After talking with some other developers at a Chicago Drupalcamp, I decided it was time to explore some new ideas.

To that end, the Interface module will ship with a template that duplicates the most recent default interface for Joomla, along with some other interesting templates we are working on. Long term, this module will be extended to the entire administration interface as well.

Would love some feedback.


Awesome. This module will be

Awesome. This module will be a big help, I have to customize the node form in just about all the Drupal sites I build. Let us know when you release the code so we can help out.

Nice! I cross-posted this to

Nice! I cross-posted this to On a related note, vertical tabs module is also designed to improve usability of default drupal core node forms. Vertical Tabs module came about as a result of prototypes I created in the season of usability. Cheers!

Thanks for the cross-post.

Thanks for the cross-post. Vertical tabs are very nice! Have not played around with them too much, but they definitely have potential.


You're missing a key term

You're missing a key term here: interface.

Lullabot's module builds forms, and offers you the code. This particular module takes an existing form, the node form, and enables admins to move it all around and organize it the way they see it, and then saves this interface so that it comes up again and again. It doesn't create a /form/, it creates an /interface/.

I think there's a very strong

I think there's a very strong connection between this Interface module and Form Builder. Form Builder will most definitely let you edit the node form (the latest code already supports this) and will provide a complete interface overhaul for adding/editing CCK fields, in addition to all the fields (Publishing Options, Authoring Info, Attachments, Menu Settings) provided by core itself.

There is a significant difference in that Form Builder actually allows you to edit properties of those fields, such as whether or not a fieldset is collapsed by default (or collapsible at all), whereas Interface seems like it will allow you to control the placement elements within regions on the page, but not actually edit those fields.

So they're complementary in a way, where Form Builder will allow you to configure the form, then interface would allow you to change the placement of fields. Right now Form Builder does not support any kind of templating of the node form at all, since it'd interfere with the interface. Of course it would be optimal to be able to be able to both design placement and configure the fields in one interface, but we'll have to see how this project shapes up.

While some of these SEO

While some of these SEO services are effective, others
run a shady game. What is a low-cost, high return on investment for your SEO budget.
It is worth your time to see if you could add podcasts
to your marketing mix.

This is exactly what I need

This is exactly what I need to get off clunky joomla

Will this module use jQuery

Will this module use jQuery UI? There are certainly functionalities that would work excellently by implementing with jQuery UI.

Yep. Uses jquery heavily,

Yep. Uses jquery heavily, along with the forms api.


Very nice! I plan on heavily

Very nice!

I plan on heavily restructuring my node forms some time this Spring. I might just wait for this rather than messing around in FAPI. :)


This looks great! Any updates

This looks great! Any updates on that beta?



I can't seem to find the

I can't seem to find the screencast - Do you have a working link to it?

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

More information about formatting options