TYPO3 4.5 LTS: The Grid View - a new concept for a backend that matches your layout

By: Joey Hasenau

During our daily work with the TYPO3 backend we usually notice quickly that the page module lacks one major feature: It does not reflect the actual layout the page has got in the frontend. We just got a number of four default columns, which can be renamed, reduced or extended, but after all they are still just columns positioned side by side without any true layout.

Simple Grid View

People who work with TemplaVoila are used to the concept of the so called Flexible Content Elements (FCE) to get a kind of layout into their page module, but they have to buy a completely different templating concept with all it's pros and cons as well.

TYPO3 User eXperience Week

During the TYPO3 User eXperience Week in 2009 the idea came up to integrate something like a "layoutable backend" into the core, so people could easily get a backend layout without having to deal with different concepts.The structure should be based on a TypoScript like syntax, that could be edited both, manually and using a wizard, and there should be an optional thumbnail image to be shown as a selector icon for the editors later on.

A proof of concept was made with an extension called "modernbe" that was first presented in early 2010 and worked with the backend of TYPO3 4.3 only. It has been used in some live projects and people were excited about the new look and feel, which is why we decided to integrate it into the core.

Now that we are releasing our Long Term Support version 4.5, we proudly present the final implementation of what we call the GRID VIEW.

You can easily create backend layout records all over the page tree or within some particular folders. To create the grid itself you can use the grid wizard, that will give you a smart point and click interface to setup even complex structures containing lots of spanned cells within just a few seconds. Assign a thumbnail to the record if you like.

Done!

While editing a page you can now select, which of the available grid records should be used for the page itself or the branch below this page. A layout inherited from any page up the rootline can be removed for a single page or the branch below it as well.

This way you can easily adapt your backend layout to match the layout of the frontend. There can be some frontend variants for the same backend layout, since we still got the original layout selector as well. You can even combine both, frontend and backend layout selection, using TypoScript, which will give you an amazing flexibility in your templates.



Of course the grid view can be used together with the well known TSconfig settings that are used to disable columns for a certain group of editors. And you can use layouts with dummy columns as a placeholder for hardcoded stuff like footers or meta navigations. The grid view will still show the same layout, but there will be blanked areas marked as "no edit access" or "not assigned" to make sure the editors won't see content elements they are not allowed or not able to edit.

Since the grid view is working with the same database fields that always have been used to determine the column position and the sorting of a content element, it can easily be used together with the default TypoScript templates of CSS styled content. You just have to adapt styles.content.get for the number of columns you are going to use in your layout.

The grid view will improve the usability of the backend a lot and the credit for this improvement primarily goes to the teams of T3UXW09 and of course to the sponsors that made this new kind of code sprint possible.