Custom Model within IList displays [object, object] in UI.

Dan Butcher

Vote:

I am in the process of creating a new block and I have the following models:

public class ProductSelector
{

[Display(Name = "Questions", GroupName = "Questions & Answers", Order = 1)]
[EditorDescriptor(EditorDescriptorType = typeof(CollectionEditorDescriptor<ProductSelectorQuestion>))]
[CultureSpecific]
public virtual IList<ProductSelectorQuestion> Questions { get; set; }

}

public class ProductSelectorQuestion
{
[Display( Name = "Question", Description = "Question to appear in the selector.", Order = 1)]
[CultureSpecific]
[JsonProperty]
[JsonConverter(typeof(string))]

public virtual string Question { get; set; }

[Display(Name = "Answers", Order = 2)]
[EditorDescriptor(EditorDescriptorType = typeof(CollectionEditorDescriptor<ProductSelectorAnswer>))]
[CultureSpecific]
public virtual IList<ProductSelectorAnswer> Answers { get; set; }

}

public class ProductSelectorAnswer
{
[Display(Name = "Answer", Order = 1)]
[CultureSpecific]
[JsonProperty]
[JsonConverter(typeof(string))]

public virtual string Answer { get; set; }

}

[PropertyDefinitionTypePlugIn]
public class ProductSelectorAnswerListProperty : PropertyListBase<ProductSelectorAnswer> { }

[PropertyDefinitionTypePlugIn]
public class ProductSelectorQuestionListProperty : PropertyListBase<ProductSelectorQuestion> { }

When I populate the ProductSelector class it allows me to enter all the data fine but in the display I see the following:

Question Answer

Do you like this? [Object, object], [Object,Object]

Instead of:

Question Answer

Do you like this? Yes, No

I don't really understand how to change this but guessing its something to do with the propertyDefinitionType. Can someone help please as the info Ive found online I'm struggling to understand and apply.

Thanks

#251241

Mar 23, 2021 23:37

Surjit Bharath

Vote:

Hi Dan, it looks like EditUI doesn't quite know how to render your complex type. Hence why it's chucking up [object, object] for you.

You could write some dojo to help the editor along to to render the answers property as a single string separated by commas.

or you could refactor your question / answer structure to be a block instead. Only down side to this is the editor will have another step to open the block to view / edit the question and answer properties.

#251242

Mar 24, 2021 1:04

Dan Butcher

Vote:

I tried the following:

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);
                console.log('db');
                // Apply custom formatting to the mySecondProps property here
                // Note the fact that property names are converted to camel case
                result.Answers.formatter = function (values) {
                    return values.map(x => x.Answer).join('<br/>');
                };
                return result;
            },
        });
    });

But when I try and add the block now It doesn't render the table at all. I added this to the model:

        [Display(Name = "Questions", GroupName = "Questions & Answers", Order = 2)]
        [EditorDescriptor(EditorDescriptorType = typeof(CollectionEditorDescriptor<ProductSelectorQuestion>))]
        [CultureSpecific]
        [ClientEditor(ClientEditingClass = "ClientResources/Scripts/Editors/ProductSelectorAnswer.js")]
        public virtual IList<ProductSelectorQuestion> Questions { get; set; }

The "ClientResources/Scripts/Editors/ProductSelectorAnswer.js" us where the script is stored.

#251271

Mar 24, 2021 8:37