Creating a Custom Sitefinity WebEditor

Sitefinity WebEditors make editing Control Properties easier.  In my last blog post, I demonstrated how to create a VERY basic Custom WebEditor.  In this post I'll create a slightly more advanced WebEditor that lets us pick a color from a RadioButtonList. 

I highly recommend reading my previous blog posts (post #1, post #2) before proceeding.

WebEditors Can Return Any Type

To get started, create a new class that inherits the WebUITypeEditor class.  When implementing the WebUITypeEditor class, pass the data type the WebEditor will return. 

For example, if the WebEditor will return a string use the following code:

public class StringWebEditor : Telerik.Cms.Web.UI.WebUITypeEditor<string>
{
    public override string Value
    {
        get { return "Hello world!"; }
        set {  }
    }
}

If the WebEditor will instead return a Guid, use the following code:

using System;

public class GuidWebEditor : Telerik.Cms.Web.UI.WebUITypeEditor<Guid>
{
    public override Guid Value
    {
        get { return Guid.NewGuid(); }
        set {  }
    }
}

Notice, in each example, the Value Type matches the Type passed to WebUITypeEditor.  This Type will also need to match the Type used by the Control Property the WebEditor will be attached to.

For example, here is the StringWebEditor (shown above) attached to a string property:

[Telerik.Cms.Web.UI.WebEditor("StringWebEditor, App_Code")]
public string MyString
{
    get { return _mystring; }
    set { _mystring = value; }
}

Here is the GuidWebEditor (shown above) attached to a Guid property:

[Telerik.Cms.Web.UI.WebEditor("GuidWebEditor, App_Code")]
public string MyGuid
{
    get { return _myguid; }
    set { _myguid = value; }
}

Click here for more information about attaching WebEditors to Control Properties.

WebEditors are just Composite Controls, M'kay

1. WebEditors inherit from the WebUITypeEditor class. 
2. WebUITypeEditor inherits from the CompositeControl class. 
3. Thus, WebEditors are ASP.NET Composite Controls.

As always, Sitefinity builds on existing ASP.NET technologies rather than re-invent the wheel.  There are countless tutorials for ASP.NET Composite Controls.  All of these resources will be applicable to your custom Sitefinity WebEditor.

At a bare minimum, we need to override the CreateChildControls() method. 

protected override void CreateChildControls()
{
    // Do stuff here.
}

Using the CreateChildControls() method we can add controls and functionality to our WebEditor. 

Create the following ~/App_Code/ColorWebEditor.cs class:

using System.Web.UI;
using System.Web.UI.WebControls;

public class ColorWebEditor : Telerik.Cms.Web.UI.WebUITypeEditor<string>
{
    private RadioButtonList _radiobuttonlist = null;
    private string _value = null;

    public ColorWebEditor()
    {
        // Ensures the child control is available to the Value property.
        this.EnsureChildControls();
    }

    /// <summary>
    /// This property is required by WebUITypeEditors.  The underlying Sitefinity Propery Editor
    /// will use this property to get & set the value of the Property.
    /// </summary>
    public override string Value
    {
        get { return _value; }
        set
        {
            _value = value;
            if (_value != _radiobuttonlist.SelectedValue)
            {
                // If our RadioButtonList selected item is out of sync with the Value, then
                // use the current Value to set the selected item.
                SelectDefaultItem();
            }
        }
    }

    /// <summary>
    /// Populate our WebEditor with child controls.
    /// </summary>
    protected override void CreateChildControls()
    {
        Controls.Clear();
        Controls.Add(new LiteralControl("Select an item from the list below:" + Value  + ":"));
        _radiobuttonlist = new RadioButtonList();
        // Attach an EventHandler that will be fired when a new RadioButtonList item is selected.
        _radiobuttonlist.SelectedIndexChanged += new System.EventHandler(_radiobuttonlist_SelectedIndexChanged);
        _radiobuttonlist.Items.Add(new ListItem("Red"));
        _radiobuttonlist.Items.Add(new ListItem("Blue"));
        _radiobuttonlist.Items.Add(new ListItem("Green"));
        _radiobuttonlist.Items.Add(new ListItem("Yellow"));
        Controls.Add(_radiobuttonlist);
    }

    /// <summary>
    /// Executed when a new item is selected from the RadioButtonList
    /// </summary>
    void _radiobuttonlist_SelectedIndexChanged(object sender, System.EventArgs e)
    {
        Value = _radiobuttonlist.SelectedValue;
    }

    /// <summary>
    /// When the WebEditor is loaded, this presets the selected item to the previous value.
    /// </summary>
    private void SelectDefaultItem()
    {
        foreach(ListItem _item in _radiobuttonlist.Items)
        {
            if (_item.Value == Value)
            {
                _item.Selected = true;
                return;
            }
        }
    }
}

This isn't as bad as it looks.  There are two things driving this process:

1. Value - this property is required by all Sitefinity WebEditors.  When the WebEditor is called, Sitefinity sets the Value.  When I'm done is clicked, Sitefinity will get the Value to retrieve the final result.
2. CreateChildControls - this event is part of the lifecycle of a Composite Control.  ASP.NET will execute this event automatically and we can use it to add controls & functionality to our Composite Control

This new WebEditor can be attached to a Control's Property using the WebEditor attribute:

using System;

public partial class UserControls_ColorUserControl : System.Web.UI.UserControl
{
    private string _color;

    [Telerik.Cms.Web.UI.WebEditor("ColorWebEditor, App_Code")]
    public string Color
    {
        get { return _color; }
        set { _color = value; }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
    }
}

Here is the final result.