Early Adopter's guide to Umbraco v14 - Property Editors - Backend (c#)

Along side all the front end elements to define your property type, you need to also define some things in umbraco, or you will just get a 'cannot find data-type' error when ever you create one.

DataEditor.

All property types need a data editor in the backoffice, Umbraco looks for a dataeditor that matches the tag of your property editor before creating the editor.

[DataEditor(
    alias: "styled.textbox", 
    type: EditorType.PropertyValue, 
    name: "Styled textbox",
    view: "styledtextbox",
    ValueType = ValueTypes.String,
    Group = Constants.PropertyEditors.Groups.Common,
    ValueEditorIsReusable = true)]
public class StyledTextboxPropertyEditor : DataEditor

Its important here to define the view! I don't think the view is currently used, but the Umbraco code is still looking for it, without the view value set your editors will not be created

Configuration Editor,

If you are building a complex property editor, then you will need to define the DataValue editor and Configuration editor for your datatype.

This code currently is i think the same as it is in Umbraco v13.

The back end code controls how your editor is serialized in and out of the database and the data formats that are used.

You don't always need all of the next bit!

If you are building a simple editor (something that saves a string) a lot of this content is boilerplate and doesn' change much (you might not even need it in some cases!)

Value Editor

The value editor is where you can put things like server side validation for your property editor.

in our sample we are defining this as part of our data editor.

 protected override IDataValueEditor CreateValueEditor()
     => DataValueEditorFactory.Create<StyledTextboxValueEditor>(Attribute!);

 internal class StyledTextboxValueEditor : DataValueEditor
 {
     public StyledTextboxValueEditor(
         IShortStringHelper shortStringHelper,
         IJsonSerializer jsonSerializer,
         IIOHelper ioHelper,
         DataEditorAttribute attribute)
         : base(shortStringHelper, jsonSerializer, ioHelper, attribute)
     {
     }
 }

Configuration Editor

Here we are really doing a lot of code to say, our datatype is a string (which we have already done, but for completness)

public class StyledTextboxConfigurationEditor :
    ConfigurationEditor<StyledTextboxConfiguration>
{
    public StyledTextboxConfigurationEditor(
        IIOHelper ioHelper,
        IEditorConfigurationParser editorConfigurationParser) : base(ioHelper, editorConfigurationParser)
    { }
}

public class StyledTextboxConfiguration : IConfigureValueType
{
    public string ValueType => ValueTypes.String;
}