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: 

https://world.episerver.com/Blogs/Duong-Nguyen/Dates/2014/1/Country-Region-drop-down-lists-in-All-properties-mode/

https://developerschallenges.com/2017/11/02/episerver-all-properties-component-for-showing-and-hiding-content-using-a-drop-down/

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