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:


And, voila! The dropdownlist are floating around!

2 tanker om “DropDownList in on-page editing?

    • I’ve been using the enum-selections too, and that is of course a better solution than hard coding lists in C#. Not the best example, perhaps.

      Either way, you’ll have to deal with on-page editing.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *