Daniel Ovaska
Aug 23, 2016
(1 votes)

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>
[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"?>
	    <!-- This adds the Alloy template assembly to the "default module" -->
        <add assembly="Alloy" />
        <add name="epi-cms.widgets.base" path="Styles/Styles.css" resourceType="Style"/>
        <!-- Add a mapping from alloy to ~/ClientResources/Scripts to the dojo loader configuration -->
            <add name="alloy" path="Scripts" />

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.

    GroupName = Global.GroupNames.MetaData,
    Order = 200)]
[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")">
So to sum it up. If you run into a similar error on your custom properties, avoid setting the UIHint on the actual property and set what custom template to use in the view instead and you'll be safe :) Easy pezy! Hope that saves a few, not so fun, hours for someone...

Happy coding!
Aug 23, 2016


Please login to comment.
Latest blogs
Implementing EmbeddedLocalization in Optimizely CMS 12

My previous post on translation (Translating Optimizely CMS 12 UI components) gives an overview of how to implement the FileXmlLocalizationProvider...

Eric Herlitz | Jan 27, 2023 | Syndicated blog

Breaking changes in EPiServer.CMS.TinyMce 4.0.0

After upgrading to the latest version of EPiServer.CMS.TinyMce, the dropdown with formats disappears. Learn how to get it back!

Tomas Hensrud Gulla | Jan 27, 2023 | Syndicated blog

Translating Optimizely CMS 12 UI components

Optimizely CMS 12 have been out for a while now, but still some elements haven't been properly translated resulting in a GUI defaulting to english....

Eric Herlitz | Jan 26, 2023 | Syndicated blog

Image preview in Optimizely CMS12 all properties view

With these simple steps, you can now see an Image and its Metadata, including size and dimensions, when editing an Image property in Optimizely...

Tomas Hensrud Gulla | Jan 26, 2023 | Syndicated blog