CollectionEditor not displaying items

London Dev Meetup Rescheduled! Due to unavoidable reasons, the event has been moved to 21st May. Speakers remain the same—any changes will be communicated. Seats are limited—register here to secure your spot!

AI OnAI Off

Home / Forums / Developers (Main Products) Forum / CMS 7.5 - 11 /

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

Please login to post a reply