Collapsable properties functionality in edit mode

I guess most of you have workod on projects where the page types swell and a tab contains so much properties that it’s hard for the editor to quickly create or edit a page.

In my case the page type had a very flexible listing which had nine possible properties for the editor to use. Only two were mandatory and the editors very seldom used more than three.

On top of that it was possible to have four of those listings configured from the same tab.

To improve the editor experience I created a custom property that can be used to add collapse functionality for a group of properties.

It’s possible to configure the custom property for which this functionality should be used.

So in my example i decided that by default only display the three most commonly used properties for each listing and hide the rest. If the editor want to use the more advanced settings they had to click the “+” icon.

By doing this I hid 20 properties and all properties for that tab fitted on the screen so the editor didn’t need to scroll

I’ve made the source available over at EPiCode.

Collapsable property start page

Straight to the example screenshots