In my last post, I created a custom WebEditor by creating a class that inherited from the WebUITypeEditor class.  The WebUITypeEditor class inherits from the ASP.NET CompositeControl class.  Thus, to create a WebEditor I created a CompositeControl.

I personally dislike working with CompositeControls though.  They're useful, but it's often cumbersome to manually add lots of HTML, Javascript or controls via the CreateChildControls() method.  I prefer ASP.NET UserControls and use them when I have the option; there are times to avoid them though. 

I originally thought UserControls weren't an option for WebEditors; I was delighted to discover otherwise.

Making Things Way Too Complicated

I spent almost an entire day trying to figure out an elegant way to avoid using CompositeControls.  The problem, as I saw it, was in attaching the WebEditor attribute to a Control property:

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

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(); ...

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 : ...

In my last post, I demonstrated how to use Sitefinity's WebEditor attribute to make control property editing a bit more user friendly.  I used Sitefinity's built-in CmrUrlWebEditor for this previous example. 

Sitefinity comes with many more built-in WebEditors that can be used in your project.

Demo Magic / Confession

Before I proceed, I need to make a confession.  I deliberately choose the CmsUrlWebEditor for my introductory WebEditor blog post because it is very easy to use.  An earlier draft used the DhlIdEditor (example shown below). 

DhlIdEditor isn't as easy or intuitive as CmsUrlWebEditor.  During the writing process, I became mired in the specifics of DhlIdEditor, rather than the broader WebEditor concepts.  Because I wanted to write an introductory article, I ditched DhlIdEditor and went with an easier WebEditor.

I'm telling this story as a warning. 

Some built-in Sitefinity WebEditors have very specific usage requirements.  Sometimes these requirements ...

Sitefinity is very easy to extend using normal ASP.NET user controls.  After a user control is added to the Sitefinity toolbox, Sitefinity will automatically generate input fields for any public properties found in the control. 

For example, the following ASP.NET user control contains two public properties (LinkText, LinkUrl):

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="HyperLink.ascx.cs" Inherits="UserControls_HyperLink" %>

<asp:HyperLink ID="HyperLink1" runat="server" />

using System;

public partial class UserControls_HyperLink : System.Web.UI.UserControl
{
    private string _linkText = "Here is my link";
    private string _linkUrl = "~/";

    public string LinkText
    {
        get { return _linkText;  }
        set { _linkText = value; }
    }

    public string LinkUrl
    {
        get { return _linkUrl; }
        set { _linkUrl = value; }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        HyperLink1.NavigateUrl = LinkUrl;
        HyperLink1.Text = LinkText;
    }
}

Sitefinity will generate two input fields (LinkText, LinkUrl) for this ASP.NET user control:

This works fine.  In addition, by using Design-Time Attributes we can hide and/or ...