Making Control Properties a bit more User Friendly with Web Editors

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 organize the way these properties are displayed.

However, in the end, we're still required to type a URL.  Many of us take this task for granted, but URLs are picky & fragile.  If they aren't perfect, they fail.  Rather than manually type URLs into the CMS, it would be better to let the CMS handle the URLs for us. 

We can do this by decorating the LinkUrl property with a CmsUrlWebEditor attribute.

Using the Sitefinity WebEditor Attribute

The Sitefinity WebEditor attribute allows us to set properties using a user-friendly web-based dialog window.  Sitefinity comes with several Web Editors out-of-the-box, but you can also create your own Web Editors.

To use a WebEditor, simply decorate the control property with a WebEditor attribute:

[Telerik.Cms.Web.UI.WebEditor("WebEditorClass, Assembly")]

The WebEditor attribute accepts a single string; this string should contain the Web Editor class followed by the class's assembly.

In the example below we're using Sitefinity's CmsUrlWebEditor class.  This web editor allows us to select an existing Sitefinity page and returns the URL. 

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; }
    }

    [Telerik.Cms.Web.UI.WebEditor("Telerik.Cms.Web.UI.CmsUrlWebEditor, Telerik.Cms")]
    public string LinkUrl
    {
        get { return _linkUrl; }
        set { _linkUrl = value; }
    }

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

This will cause Sitefinity to display a new Select button next to the LinkUrl property.

Clicking the Select button will open a new dialog window.

Select the page to link and click the I'm done button.  The URL to the selected page will be passed to the underlying control property:

The WebEditor attribute makes the Sitefinity Properties Editor a bit more user-friendly.  In my post we'll look at creating a custom WebEditor.