Sneak Peek: Frontend Editing for TYPO3 4.3

At the Web-Empowered Church project, we use TYPO3 exclusively and promote it to any church looking for a solution for their website. One of the great things with TYPO3 is that we rarely run into situations where we tell a church “No, you can’t do this” but on the flip side, simple tasks are often more complex than they should be. After spending a lot of time thinking about usability, we really focused in on enhanced frontend editing as the best way to help our users. We were excited to see the TYPO3 community also identify frontend editing as a key feature for TYPO3 4.3 and quickly signed up to work on the project. Here’s a quick look into our progress so far.

Main Features

  • AJAX loading and saving of editing forms.
  • Drag and drop of content elements.
  • Clipboard support.
  • Support for traditional templating and TemplaVoila.
  • Architecture in place for more advanced functionality, such as managing news articles, pages, etc.

User Interface Mockups

With the key focus of this frontend editing project being usability, we wanted to be sure we got the user interface right from the start. For this, we turned InnerEcho, a Dallas-based company skilled in both user experience and TYPO3 development. This was a great pairing for us as the guys at InnerEcho were already well aware of TYPO3’s capabilities and limitations. It’s also worth noting that they were gracious enough to jump in on this project on a volunteer basis in order help the whole TYPO3 community.

The mockups you see below are among many provided by InnerEcho and show the look and feel we’ll be shooting for in a final release.

Both new and existing content elements can be moved via drag and drop.
Both new and existing content elements can be moved via drag and drop.

 

The editing interface is loaded via AJAX and content elements are dynamically updated on save.
The editing interface is loaded via AJAX and content elements are dynamically updated on save.

 

 

Functional Prototype

In addition to the screenshots above, we do actually have a working prototype. The video linked below shows our enhanced frontend editing actually working within TYPO3.  No magic or trickery involved at all! You’ll see that AJAX loading and saving works, as does drag and drop of content elements.  We still have plenty of work to do in integrating the InnerEcho-designed UI and in making all of our client side code work correctly across multiple editing actions but its exciting to see the foundations of the system working properly.

 

What’s Next?

I had the privilege of attending T3CON08 and the TYPO3 Transition Days in Berlin last week and was able to give some demos and gather feedback from both TYPO3 consultancies and core developers. We were very encouraged to see the enthusiasm about getting this feature into TYPO3 4.3.

We’ve got some refactoring of TYPO3’s existing frontend editing that should go into TYPO3 4.3 Alpha 1 and then we hope to have the new frontend editing in the core by the first beta release. If all goes according to plan, we should have some great new frontend editing functionality as part of TYPO3 4.3 in late January 2009.

About this entry

You’re currently reading “ Sneak Peek: Frontend Editing for TYPO3 4.3 ,” an entry on Jeff Segars

Published:
10.19.08 / 9pm
Category:
TYPO3 Core, Web-Empowered Church