A few hints about custom properties and StringList

This will be a small blog post about an error you might encounter when creating custom properties with EditorDescriptors.

I just got a weird error on one of my sites. StringList (the custom property in Alloy project) just stopped working in edit mode. Instead of the usual textbox where you add your input it displayed a button that said “Click the button to edit” and pressing it crashed the editor with a funny

[NullReferenceException: Object reference not set to an instance of an object.]
   EPiServer.UI.Edit.EditProperty.SetupPropertyControl(PropertyData property, PropertyDataCollection properties)

Yey! Now what?

Some background on custom properties first. As you might know, to make a custom property in Episerver you need both a c# class for your property like

/// <summary>
/// Property type for storing a list of strings
/// </summary>
/// <remarks>For an example, see where this property type is used for the MetaKeywords property</remarks>
[EditorHint(Global.SiteUIHints.Strings)]
[PropertyDefinitionTypePlugIn(Description = "A property for list of strings", DisplayName = "String List")]
public class PropertyStringList : PropertyLongString
{
...
}

This will basically tell Episerver how to store your data and not much more. The actual editor you see in edit mode is created by a few other componenent. First we have the EditorDescriptor:

/// <summary>
/// Register an editor for StringList properties
/// </summary>
[EditorDescriptorRegistration(TargetType = typeof(String[]), UIHint = Global.SiteUIHints.Strings)]
public class StringListEditorDescriptor : EditorDescriptor
{
    public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
    {
        ClientEditingClass = "alloy/editors/StringList";

        base.ModifyMetadata(metadata, attributes);
    }
}

This will let Episerver know which editor you want to use for a property that returns a string[] and has a specific UIHint. The ClientEditorClass is a key that is used to located the correct javascript file to use. You will then need the module.config to give Episerver a hint about where to locate your custom js/css files. These are located below /ClientResources/... in the alloy project. You can check them out there.

<?xml version="1.0" encoding="utf-8"?>
<module>
    <assemblies>
	    <!-- This adds the Alloy template assembly to the "default module" -->
        <add assembly="Alloy" />
    </assemblies>
    <clientResources>
        <add name="epi-cms.widgets.base" path="Styles/Styles.css" resourceType="Style"/>
    </clientResources>
    <dojo>
        <!-- Add a mapping from alloy to ~/ClientResources/Scripts to the dojo loader configuration -->
        <paths>
            <add name="alloy" path="Scripts" />
        </paths>
    </dojo>
</module>

Somewhere here, something went wrong and the editor just refused to show but where? After some head scratching I finally found the reason. Someone had set a UIHint on the actual property because they wanted to create a custom display template for the property.

[Display(
    GroupName = Global.GroupNames.MetaData,
    Order = 200)]
[CultureSpecific]
[BackingType(typeof(PropertyStringList))]
[UIHint("MetaKeywords")] //Problem...remove this!
public virtual string[] MetaKeywords { get; set; }

So far so good. This though will then override the default EditorHint that is set on class level in the background (to StringList in our case; check out PropertyStringList property above)...and that will then make the EditorDescriptor fail because it's set to only hook on if the property is of type string[] AND has the UIHint of StringList. No editor descriptor means that the StringList.js won't load in edit mode etc which is another symptom you might want to look out for. Removing the custom UIHint on property level and instead setting what display template to use in the view worked great!

<meta name="keywords" content="@Html.DisplayFor(m => m.CurrentPage.MetaKeywords,"MetaKeywords")">