DropDownList in on-page editing?

The attributes [SelectOne] and [SelectMany] can be used in combination with a SelectionFactory to create Episerver properties in the form of DropDownLists and CheckBoxLists. This was introduced in Episerver 7.5, five years ago, and should be familiar to most Episerver developers. But, some editors are afraid of «All properties view» and would like to do all their editing in «On-page editing», what about them? They need a little extra work.

Let’s have a look!

I start with the standard Alloy site, adding a new SelectOne-property to the Article pagetype:

public class ArticlePage : StandardPage
{    
    [SelectOne(SelectionFactoryType = typeof(DropDownListSelectionFactory))]
    [Display(Name = "My first dropdown list"]
    public virtual string MyFirstDropDownList { get; set; }
}

The matching SelectionFactory goes into a separate file:

public class DropDownListSelectionFactory : ISelectionFactory
{
    public IEnumerable GetSelections(ExtendedMetadata metadata)
    {
        return new List
        {
            new SelectItem {Text = "First element", Value = "First element"},
            new SelectItem {Text = "Second element", Value = "Second element"},
            new SelectItem {Text = "Third element", Value = "Third element"}
        };
    }
}

And to display the property, with support for on-page editing, we could hope it was as easy as adding the following to our view:

@Html.PropertyFor(x => x.CurrentPage.MyFirstDropDownList)

Let’s test it!

In all properties view, it’s all good!

In On-page editing, it’s just a textbox between the polar bears feet and the ContentArea. No good! We don’t want the editors to be able to enter anything they feel like!

Luckily, all we’ll have to do is add this EditorDescriptor:

[EditorDescriptorRegistration(TargetType = typeof(string), UIHint = "FloatingString")]
public class FloatingStringEditorDescriptor : EditorDescriptor
{
    public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable attributes)
    {
        base.ModifyMetadata(metadata, attributes);
        metadata.CustomEditorSettings["uiWrapperType"] = UiWrapperType.Floating;
    }
}

And to our property on the Article pagetype, we add:

[UIHint("FloatingString")]

And, voila! The dropdownlist are floating around!