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; } }); });