EPiServer 7 Preview – EditorDescriptor ui type and wrapper type

I’ve been exploring the possibility to change how the new on page editor behaves and this is what I’ve found so far (wow, that was an uninspired introduction even for me).

The following standard page with two PropertyNumber (int) will server as the base for the exploration.

[ContentType(DisplayName = "Standard Page", Description = "")]
public class StandardPage : PageData
{
    public virtual int MyVanillaInt { get; set; }

    [Range(100, 200)]
    public virtual int MyIntWithRange { get; set; }
}

The template for this is a plain MVC view that uses the Html.PropertyFor so that EPi renders the necessary tags and scripts to enable on page editing. If we look at this page in edit mode we see how a property number behaves by default. It is edited inline with a ui element called NumberSpinner (which in addition to only accepting numbers also comes with inc/dec arrows).

EditorDescriptor

In the name of exploration we want to change how ints are edited across the site and for this we can use an EditorDescriptor. In it’s most basic form it looks like this

[EditorDescriptorRegistration(TargetType = typeof(PropertyNumber))]
public class PropertyNumberEditorDescriptor : EditorDescriptor
{
}

Changing ui-element type

The code above does exactly nothing since we so far haven’t changed anything. Let’s say we don’t want to use the NumberSpinner but just NumberTextBox (basically the same thing but without the inc/dec arrows). To do this we override the ModifyMetadata method on the EditorDescriptor class

public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
{
    metadata.InitialConfiguration = new Dictionary<string, object>();
    base.ModifyMetadata(metadata, attributes);

    var customSettings = new Dictionary<string, object>();
    customSettings["uiType"] = "dijit.form.NumberTextBox";
    metadata.CustomEditorSettings = customSettings;
}

If we edit the property in edit mode now it looks a bit different

Not only is the spinner gone, we’ve gone from inline editing to a side-by-side mode. I’m not totally sure why but my theory is that when we set the CustomEditorSettings we don’t specify a wrapper type (we will in a sec though) and the default to use is the side by side one. But I’m not sure.

Controlling wrapper type

To change the wrapper type back to inline we need to add the following

customSettings["uiWrapperType"] = UiWrapperType.Inline;

UiWrapperType is a simple helper class I created since I tend to forget magic strings. I should probably create one with the available dijit ui types as well.

public static class UiWrapperType
{
    public const string Inline = "inline";
    public const string Flyout = "flyout";
    public const string Floating = "floating";
    public const string Dialog = "dialog";
    public const string LegacyProperty = "legacyProperty";
}

This concludes the first look at EditorDescriptor.

  • Anton Kallenberg

    It done by episerver if EditorDescriptorRegistrationAttribute is set? :)

    • http://www.popkram.com Stefan Forsberg

      Hey Anton! Sorry, you lost me here =)

  • Linus Ekström

    The reason why the editor changes from inline to side by side is because you assign the a new dictionary to the CustomEditorSettings property, thus removing anything that already has been configured by other editor descriptors. There can be several editors descriptors connected to a type and they will be executed in serial. We have currently no way to control the order of the execution but we’re thinking of adding some sort of sort order property to be able to control when in the chain your descriptor should run.

  • http://www.popkram.com Stefan Forsberg

    Hi Anton, I found this comment just now. Apparently some comments get stuck awaiting approval at discus but does not let my wp site (or me) know about it… sorry about that.