There are few ways for grouping properties in edit mode. You could place properties that should be grouped in a separate tabs. Another option is to define new block type that contains related properties and use the block on page. But when you don’t want to have too many tabs or block types you could try to use my custom implementation. In this article I will show functionality of grouping properties using header.
Grouping properties using header

Grouping properties

Let’s consider following scenario. We have a page that contains address properties (street, city, state) and few properties for storing phone numbers (main phone, sales department, customer support). All properties are under Company tab.
No properties grouping
We would like to to group address properties and phone properties. To do this we could create two tabs Address and Phones, or create AddressBlock and PhonesBlock block types and use them as page properties. For example, when Contact block from Alloy is added to TestPage page:

In edit mode, it will be rendered like:
Grouping properties using block
The name of the property will be grouping title.

Grouping properties using header

My new plugin is working in a similar way to local blocks solution. It will display header above the first property from the group.
Headers are defined using GroupingHeaderAttribute wich has Title parameter. The attribute should be used on the first property from the group. For address properties it will be “AddressStreet” and for Phone properties it will be “PhoneMain”.

After running the site it will render properties and headers:
Using grouping header extension

Styling headers

Together with the Title you can set CssClass and Tag parameters. Using those settings you can customize header layout.

In Alloy solution, the edit mode styles should be added to “ClientResources/styles/styles.css”

Localizing header title

You can also translate the title using resource files. It’s similar to translating property caption. The resourcekey format for header is
contentType / [type name] / properties / [property name] / groupingheader“.
For example to translate property “testg11” from “TestPage” page, the XML will look like:

Grouping properties using header with translations

The full source code is available on github (grouping-header branch). There are two nuget packages nuget and nuget for .Net core.