Episerver property view grouping header
what it looks like when its up and running:
How to get this working:
First: install the nuget package: https://www.nuget.org/packages/PropertyView.GroupingHeader
Once installed, you need to add the following:
- create folder: PropertyView.GroupingHeader
- Copy the contents of the folder in this project and paste them in. the .zip file is for Epi, the non zipped files are to edit, rezip and reuse.
Then you will use the package in your code:
- on your blocks types, or page types
- using PropertyView.GroupingHeader;
- then above one of the properties that you want to group together
- [GroupingHeader("Settings - UI elements")]
- You can now have header elements in your property views for anyone editing content. Just helps organize properties.
From the Original Docs
To group properties use GroupingHeader attribute. Attribute should be placed on the property.
[GroupingHeader("Sample group")] [Display(GroupName = "Company", Order = 1)] public virtual string TestProperty1 { get; set; }
Attrbiute can be used with second parameter which is class name:
[GroupingHeader("Sample group", "custom-class")] [Display(GroupName = "Company", Order = 1)] public virtual string TestProperty1 { get; set; }
In Alloy demo custom edit mode styles are in "\ClientResources\Styles\Styles.css"
The third parameter of GroupingHeader is tag.
[GroupingHeader("Sample group", "custom-class", "span")] [Display(GroupName = "Company", Order = 1)] public virtual string TestProperty1 { get; set; }
By default header is rendered using "h2".