Getting Started with Custom WebEditors

Sitefinity is very easy to extend using basic ASP.NET User Controls.  Once a control is added to your web site, Sitefinity will automatically generate an admin-interface for it.  This admin-interface will contain input fields for public properties found in the ASP.NET User Control.  You can then organize these properties using Design-Time attributes.

Editing properties can be made easier by decorating your control properties with a WebEditor attribute.  WebEditors allow you to associate a user-friendly dialog window with the underlying property.  Sitefinity comes with several built-in WebEditors, but you can create your own.

In this post we'll take a very basic look at creating a Custom Sitefinity WebEditor.

Getting Started / Hello World!

To create a new WebEditor, create a class that implements the WebUITypeEditor interface.  To inherit from this interface, implement the Value property.  Here is a very basic example:

Create ~/App_Code/BasicWebEditor.cs

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

To make use of this new WebEditor attach it to a public Control property:

using System;

public partial class BasicUserControl : System.Web.UI.UserControl
{
    private string _testfield;

    [Telerik.Cms.Web.UI.WebEditor("BasicWebEditor, App_Code")]
    public string TestField
    {
        get { return _testfield; }
        set { _testfield = value; }
    }

    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

In the example above, I decorated the TestField property with a WebEditor attribute.  This attribute references the BasicWebEditor.  The TestField type is string; this matches the type we passed to the WebUITypeEditor and the Value property.  These three properties (Control Property, WebUITypeEditor, Value) need to match to be valid.

Once this WebEditor attribute is in place, Sitefinity will place a Select button next to the TestField input field.

When the Select button is clicked a new blank window will open. Click I'm done and "Hello world!" will be put into the TestField field.

Making your WebEditor Useful

I know this example isn't useful or practical.  I wanted to first introduce the basics of creating a new WebEditor.  WebEditors inherit from the WebUITypeEditor class and WebUITypEditor inherits from the CompositeControl class.  So, essentially, your Sitefinity WebEditor is an ASP.NET CompositeControl. 

To make your WebEditor do something useful, you'll treat it just like an ASP.NET CompositeControl.  Override the CreateChildControls() method and then create child controls or load an external template. 

We'll look at how this is done in my next blog post.  In the meantime, check out the Implementing TypeEditors for Complex Properties Sitefinity documentation.