Loading...
Area: Episerver CMS
Applies to versions: 10 and higher
Other versions:

Registering a custom editor for a specific type

This topic explains how to register and configure a custom editor for a specific .NET type. To create the actual dojo editor, see Creating an editor widget.

Examples

The following example demonstrates how to register a custom editor. 

[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);
    }
}

You can use the following technique in case you need to pass any data from the server to the client side editor.

The following example will show how to pass an array of strings created on the server into our custom StringList editor from the previous example:

[EditorDescriptorRegistration(TargetType = typeof(String[]), UIHint = Global.SiteUIHints.Strings)]
public class StringListEditorDescriptor : EditorDescriptor
{
    public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
    {
        base.ModifyMetadata(metadata, attributes);
        var reservedWords = new [] { "foo", "bar", "foobar" };
        //This array will be converted to a JSON object and passed to the constructor of the editor widget.        
        metadata.EditorConfiguration.Add("reservedWords", reservedWords);
    }
}

The previous examples affect both forms & on-page editing modes. However it is possible to specify different settings for both modes:

[EditorDescriptorRegistration(TargetType = typeof(float))]
public class FloatNumberEditorDescriptor : EditorDescriptor
{
    public FloatNumberEditorDescriptor()
    {
        //The default editing class that will be used in forms editing mode.
        ClientEditingClass = "dijit/form/NumberTextBox";
    }

    public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
    {
        base.ModifyMetadata(metadata, attributes);

        if (!attributes.OfType<RangeAttribute>().Any())
        {
            var constraints = new Dictionary<string, object>() 
            {
                {"min", Double.MinValue },
                {"max", Double.MaxValue }
            };
            //These settings will be passed to the constructor of the editor widget.
            metadata.EditorConfiguration.Add("constraints", constraints);
        }

        //Define what kind of editor we want to have, in this case we want to create an inline editor. This is used
        //when the user is in OPE ("on page editing") mode.
        metadata.CustomEditorSettings["uiWrapperType"] = UiWrapperType.Inline;
        //Specify the class for a custom editor responsible for the actual editing in OPE.
        //If not defined the default (forms) editor will be used.
        metadata.CustomEditorSettings["uiType"] = "dijit/form/NumberTextBox";
    }
}

A complete example of how to create a custom dojo editor can be found in our sample site Alloy that is available both via our custom VSIntegration or on our github.

Related topics

Last updated: Sep 27, 2019