World is now on Opti ID! Learn more

Per Nergård (MVP)
Mar 5, 2010
  4893
(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
Commerce 14.41 delisted from Nuget feed

We have decided to delist version 14.41 of the Commerce packages as we have discovered a bug that prevents current carts to be saved into...

Shahrukh Ikhtear | Jul 8, 2025

How Optimizely SaaS CMS Isn’t Just Another Commodity

CMS platforms these days are becoming commoditised. The modelling of most systems lends itself to automation. Giving marketers more flexibility wit...

Chuhukon | Jul 4, 2025 |

How to Set Up CI/CD Pipeline for Optimizely Frontend Hosting Using GitHub Actions

As I promised in my previous blog post about getting started with Optimizely Frontend Hosting, today I’m delivering on that promise by sharing how ...

Szymon Uryga | Jul 2, 2025

Environment-specific badges in the Optimizely CMS

Step 1: Add Environment Info to the UI Create a custom UIDescriptor and a ComponentDefinition to inject a badge into the CMS UI. using EPiServer.Sh...

Rajveer Singh | Jul 1, 2025