Daniel Ovaska
Aug 23, 2016
  5779
(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>
[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")">
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

Comments

Please login to comment.
Latest blogs
Introducing Optimizely Graph Source .NET SDK

Overview Of Optimizely Graph Optimizely Graph is a cutting-edge, headless content management solution designed to integrate seamlessly with any...

Jake Minard | Oct 10, 2024

Content Search with Optimizely Graph

Optimizely Graph lets you fetch content and sync data from other Optimizely products. For content search, this lets you create custom search tools...

Dileep D | Oct 9, 2024 | Syndicated blog

Omnichannel Analytics Simplified – Optimizely Acquires Netspring

Recently, the news broke that Optimizely acquired Netspring, a warehouse-native analytics platform. I’ll admit, I hadn’t heard of Netspring before,...

Alex Harris - Perficient | Oct 9, 2024 | Syndicated blog

Problem with language file localization after upgrading to Optimizely CMS 12

Avoid common problems with xml file localization when upgrading from Optimizely CMS 11 to CMS 12.

Tomas Hensrud Gulla | Oct 9, 2024 | Syndicated blog

Optimizely Autocomplete (Statistics)

A user starts typing in the search input, and it returns suggestions for phrases they might be searching for. How to achieve this?

Damian Smutek | Oct 9, 2024 | Syndicated blog

Optimizely Forms: You cannot submit this form because an administrator has turned off data storage.

Do not let this error message scare you, the solution is quite simple!

Tomas Hensrud Gulla | Oct 4, 2024 | Syndicated blog