Issues with PropertyList<T> and content reference properties

Vote:
 

PropertyList<T> of a simple POCO class that I want to use a ContentReference or IList<ContentReference> to other content items. The PropertyList works just fine, but when using the dialog to select content for that property, it is not filtering the content tree to just the allowed types specified. Any idea how to get this to work?

Display(Name = "Category", Order = 10)]
[AllowedTypes(typeof(AreaMapCategory.AreaMapCategory))]
public virtual ContentReference Category { get; set; }

And here is the PropertyList definition on my page class:

[Display(
    Name = "Area Map Columns",
    GroupName = Global.TabNames.AreaMap,
    Order = 20)]
[EditorDescriptor(EditorDescriptorType = typeof(CollectionEditorDescriptor<AreaMapColumn>))]
public virtual IList<AreaMapColumn> AreaMapColumns { get; set; }

The second issue comes up when you use a IList<ContentReference> property. When using a IList the same filtering issue happens, but the editor box is wider than the popup editor for the PropertyList item, and there is no way to resize the popup. Also, it mentions that you can drag items onto here, but the background is blocked by the modal popup. The only way to add references is to click the link to add them at the bottom. Any way to improve this experience?

The third issue is how the PropertyList grid displays ContentReference properties. It simply outputs the ID of the content (or comma-delimited list of IDs when using IList) which makes it hard to tell what is selected. I found a forum post on how to get around this by loading the content reference name using a separate property, but it only works when the list first loads. Changing or adding items do not show the name, it leaves the column blank. Is there a better way to do this? 

private Injected<IContentLoader> _contentLoader;

[Display(Name = "Category Name", Order = 20)]
[ScaffoldColumn(false)]
public string CategoryNames => Category == null ? "" : _contentLoader.Service.Get<IContent>(Category).Name;
#203694
May 02, 2019 20:54
Vote:
 

Hi again,

Maybe you've already found a solution to these, but thought I'd answer anyway:

  1. Without testing, this looks like it should work. As I recall, the content tree is not really filtered—but invalid options are greyed out. What are you seeing?
  2. Styling can probably done with an editor descriptor, this old forum post may provide some inspiration, you'd probably also want to use a UIHint.
  3. Sadly, there isn't really a pretty or easy way to do this. I wrote a blog post with an approach a while back which you can find here.

Honestly, if you're using nested PropertyList with ContentReferences you're probably better off going with blocks (which is also the preferred/supported approach).

#203762
Edited, May 06, 2019 23:59
Vote:
 

For Issue 2, I wrote a post about resizing the modal you can find here

For Issue 3, someone wrote a post about fixing a similar issue when referencing images. You can find that here.

#203866
May 09, 2019 5:45
Vote:
 

Hi @David,

Interesting approach to resizing TinyMCE in a PropertyList. The TinyMCESettings class actually has Height and Width properties (as well as a Resize enum, which you can use to restrict the editor from resizing horizontally). I had the same issue a while back and used an EditorDescriptor to set those: https://jakejon.es/blog/configuring-tinymce-when-its-used-in-an-episerver-propertylist

#203884
May 09, 2019 15:34
Vote:
 

Hey @Jake,

I do like your approach. Especially the fact that it can be applied to properties selectively, where as mine is a somehwhat blanket approach. Thanks for the info!

#203885
May 09, 2019 16:01