Use UserControl for Editing Custom Property Types

First of all, read this article by Ted Nyberg about using ETF. When I first started using EpiServer (not very long ago) I was wondering why can’t I find any examples of using UserControls in custom properties. I’m pretty sure I’m inventing my own wheel but hopefully my note will be better indexed than existing ones (I found none of them).

So, let’s create property MyPropertyString extending PropertyString.

[Serializable]        
[PageDefinitionTypePlugIn]        
public class MyPropertyString : PropertyString {        
}

Looks like pretty useful property. Let’s add it to some PageType and ensure it’s displayed.

Then, we’ll add new Web User Control

Layout
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyPropertyStringControl.ascx.cs" Inherits="EPiServer1.MyPropertyStringControl" %>        
<asp:TextBox runat="server" ID="txtValue"  />&nbsp;        
<input type="button" value="Clear"         
onclick="document.getElementById('<%= txtValue.ClientID %>').value = ''; return false;" />

Code-behind
public partial class MyPropertyStringControl : UserControlBase, IPropertyControl {        
    public MyPropertyStringControl() {        
        Enabled = true; // Do not forget this!        
    }        
        
    public void SetupControl() {        
        txtValue.Text = (string)PropertyData.Value;        
    }        
        
    public void ApplyChanges() {        
        PropertyData.Value = txtValue.Text;        
    }        
        
    public bool DisplayEditUI {        
        get { return PropertyData.DisplayEditUI; }        
    }        
        
    public PropertyData PropertyData { get; set; }        
        
    public PropertyDataCollection Properties { get; set; }        
        
    public RenderType RenderType { get; set; }        
        
    public TableRowLayout RowLayout {        
        get { return TableRowLayout.Default; }        
    }        
        
    public string ValidationGroup { get; set; }        
        
    public bool Enabled { get; set; }        
}

And the last line which this post is about:

[Serializable]        
[PageDefinitionTypePlugIn]        
public class MyPropertyString : PropertyString {        
    public override IPropertyControl CreatePropertyControl() {        
        return (IPropertyControl)BuildManager.CreateInstanceFromVirtualPath("~/MyPropertyStringControl.ascx", typeof(MyPropertyStringControl));        
    }        
}

Voila – we’ve got ‘clear’ button near our textbox.

P.S. Guys, is there any good code-pasting plug-in for Live Writer?

Sep 17, 2010

Comments

Anders Hattestad Sep 21, 2010 10:33 AM

I have done something simular like this
http://labs.episerver.com/en/Blogs/Anders-Hattestad/Dates/2008/10/User-control-as-a-Property/

Kenia Gonzalez Jul 4, 2012 02:33 PM

Great article. Really helpful, thanks!

Please login to comment.