A critical vulnerability was discovered in React Server Components (Next.js). Our systems remain protected but we advise to update packages to newest version. Learn More

Per Nergård (MVP)
Mar 5, 2010
  5068
(0 votes)

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

Mar 05, 2010

Comments

Petter Klang
Petter Klang Sep 21, 2010 10:33 AM

Nice!

Please login to comment.
Latest blogs
ScheduledJob for getting overview of site content usage

In one of my current project which we are going to upgrade from Optimizely 11 I needed to get an overview of the content and which content types we...

Per Nergård (MVP) | Jan 27, 2026

A day in the life of an Optimizely OMVP: Migrating an Optimizely CMS Extension from CMS 12 to CMS 13: A Developer's Guide

With Optimizely CMS 13 now available in preview, extension developers need to understand what changes are required to make their packages compatibl...

Graham Carr | Jan 26, 2026

An “empty” Optimizely CMS 13 (preview) site on .NET 10

Optimizely CMS 13 is currently available as a preview. If you want a clean sandbox on .NET 10, the fastest path today is to scaffold a CMS 12 “empt...

Pär Wissmark | Jan 26, 2026 |

Building AI-Powered Tools with Optimizely Opal - A Step-by-Step Guide

Learn how to build and integrate custom tools with Optimizely Opal using the Opal Tools SDK. This tutorial walks through creating tools, handling...

Michał Mitas | Jan 26, 2026 |

Optimizely Opal: Unlocking AI-Powered Marketing with Opal Chat & Agents

I’ve just released a new YouTube video highlighting Optimizely Opal and how it’s transforming modern marketing with AI-powered chat and intelligent...

Madhu | Jan 24, 2026 |

From 12 to 13 preview: A Developer's Guide to testing an Optimizely CMS 13 Alloy Site

The release of Optimizely CMS 13 marks a significant step forward, embracing a more composable and headless-first architecture. While this unlocks...

Robert Svallin | Jan 23, 2026