Background:
I need to implement the ability for CMS editors to associate a list of facets to a page type.
They need to be able to select the facets from a pre-defined list, reorder the facets and add ranges for range facets.
I'm using Episerver CMS 10.10.4.
Issue:
I'm trying to use property lists to define the facets and the facet ranges, so I don't implement a custom property from scratch. However, I couldn't find a solution that works with property lists for hiding the ranges when adding/editing non-range facets.
e.g.
- range facets (e.g. price, width etc.) need to show ranges - https://www.screencast.com/t/kKrPZsFdzW
- non-range facets - ranges should be hidden - https://www.screencast.com/t/oCvp4bb7L4E
I've tried adding a block to contain the property list or the property list item, but that breaks out the display for the property list.
References:
Does anyone have an idea on how I can achieve this?
Code:
public class ProductListingPage : SitePage
{
[Display(
Name = "Custom Facets to display on page")]
public virtual IList<CustomFilter> CustomFacetsList { get; set; }
}[PropertyDefinitionTypePlugIn]
public class CustomFilterProperty: PropertyListBase
{
}
public class CustomFilter
{
[SelectOne(SelectionFactoryType = typeof(FacetDefinitionSelectionFactory))]
[Required]
public string Filter { get; set; }
[EditorDescriptor(EditorDescriptorType = typeof(CollectionEditorDescriptor))]
public IList Ranges { get; set; }
}[PropertyDefinitionTypePlugIn]
public class RangeFilterProperty: PropertyListBase
{
}
public class RangeFilter
{
public int? From { get; set; }
public int? To { get; set; }
}[EditorDescriptorRegistration(TargetType = typeof(IList))]
public class CustomFilterCollectionEditorDescriptor: CollectionEditorDescriptor
{
public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable attributes)
{
ClientEditingClass = "app/editors/CustomFilterCollection";
base.ModifyMetadata(metadata, attributes);
}
}CustomFilterCollection.js
define(["dojo/_base/array","dojo/_base/declare","dojo/_base/lang","epi-cms/contentediting/editors/CollectionEditor"
],
function (
array,
declare,
lang,
CollectionEditor
) {
return declare([CollectionEditor], {
_getGridDefinition: function () {
var result = this.inherited(arguments);
result.ranges.formatter = function (values) {
return values != null ? values.map(msc => msc.from + " - " + msc.to).join("
") : "";
};
return result;
}
});
});
