CollectionEditor not displaying items

clintcfavor

Vote:

Hi, I'm having a trouble displaying a value in the CollectionEditor. It's just a MenuItemBlock with an additional property MainCategoryLink

public class GroupLinkCollection
    {
        [Display(Name = "Main category text", GroupName = SystemTabNames.Content, Order = 10)]
        public virtual string MainCategoryText { get; set; }

        [Display(Name = "Main category link", GroupName = SystemTabNames.Content, Order = 15)]
        public virtual LinkItemCollection MainCategoryLink { get; set; }

        [Display(Name = "Category links", GroupName = SystemTabNames.Content, Order = 20)]
        public virtual LinkItemCollection ListCategories { get; set; }

        [UIHint(UIHint.Image)]
        [Display(Name = "Category image", GroupName = SystemTabNames.Content, Order = 25)]
        public virtual ContentReference CategoryImage { get; set; }
    }

    [PropertyDefinitionTypePlugIn]
    public class GroupLinkCollectionProperty : PropertyList<GroupLinkCollection>
    {
        protected override GroupLinkCollection ParseItem(string value) => JsonConvert.DeserializeObject<GroupLinkCollection>(value);
    }

Together with the custom formatter being used:

return declare([CollectionEditor], {
    _getGridDefinition: function () {
        var result = this.inherited(arguments);

            result.mainCategoryLink.formatter = function (values) {
                console.log(values.map(x => x.publicUrl).join());
                return values != null ? values.map(x => x.publicUrl).join() : "";
            }

            result.listCategories.formatter = function (values) {
                return values.map(msc => msc.text).join();
            }
            console.log(result);
            return result;
    }
});

Somehow it doesn't display the list

console.log displays the two publicUrl

and also displays in the _lastCollection array

additionally, taking out formatter for mainCategoryLink only displays [object Object]

could anyone point to me where I'm missing?

#276435

Edited, Mar 16, 2022 15:21

Daniel Ovaska

Vote:

Probably something with json serializing between frontend and backend...? Would be my best guess.

#276668

Mar 18, 2022 12:46

Sebastian Enberget

Vote:

I agree with Daniel that it is something with the json serializing.

I looked in the solution I'm working on, and instead of using JsonConvert, we use a episerver interface called IObjectSerializer

So try this code instead

[PropertyDefinitionTypePlugIn]
public class GroupLinkCollectionProperty : PropertyList<GroupLinkCollection>
{
     private Injected<ObjectSerializerFactory> _objectSerializerFactory;
     protected override GroupLinkCollection ParseItem(string value) {
         var objectSerializer = _objectSerializerFactory.Service.GetSerializer("application/json");
         objectSerializer.Deserialize<GroupLinkCollection>(value);
    }
}

I also saw a blog post fom Jon Jones where he use the same approach as you (https://www.jondjones.com/learn-episerver-cms/episerver-developers-tutorials/episerver-properties/episerver-how-to-render-a-list-of-objects-in-a-page-or-block-propertylist-explained/) , but he is overriding two methods. I would still use the approach above thought

Another side note from me, you should add a GUID to the PropertyDefinitionTypePlugin so you can easier rename or change namespace of the property. Ref this blogpost https://www.epinova.no/en/folg-med/blog/2020/support-for-renaming-classes-for-custom-properties/

#276750

Mar 20, 2022 9:13