EPiServer custom property example

Here is a brief example of a custom property in EPiServer CMS. Not a tutorial, just a code snippet to begin with.

This one have a simpe textbox ("PropertyControls.PropertyTextBoxControlBase"), but view your intellisense and you see you can use a bunch of other types, se screenshot.

This also have a button "..." which opens a new dialog where you do your interface for client to pick the value.

And then that dialog uses window.opener to call a function defined in the codebehind to set the value for the property:

 <script type="text/javascript">  
 function sendBack()  
 {  
   window.opener.addValue(document.getElementById('sel_value').value);  
   window.close();  
 }  
 </script>  

As easy as it can be :-)

Class:

 using System;  
 using System.Collections.Generic;  
 using System.Text;  
 using EPiServer;  
 using EPiServer.Core;  
 using EPiServer.DataAbstraction;  
 using EPiServer.PlugIn;  
 using EPiServer.Web.PropertyControls;  
 using System.Web.UI.WebControls;  
 using System.Web.UI;  
 using System.Drawing;  
 using System.Web.UI.HtmlControls;  
 namespace EPiServer.Templates.Main.Library  
 {  
   [Serializable]  
   [PageDefinitionTypePlugIn(DisplayName = "P360 process selector")]  
   public class EdokSelectorProperty : EPiServer.Core.PropertyString  
   {  
     public override IPropertyControl CreatePropertyControl()  
     {  
       return new EdokSelectorPropertyType();  
     }  
   }  
   public class EdokSelectorPropertyType : EPiServer.Web.PropertyControls.PropertyTextBoxControlBase  
   {  
     protected override void SetupEditControls()  
     {  
       base.SetupEditControls();   
       TextBox inputControl = this.EditControl;  
       //inputControl.Width = 100;  
       inputControl.Attributes.Add("class", "episize240");  
       inputControl.Attributes.Add("onfocus", "blur();");  
       inputControl.Text = this.PropertyData.Value as string;  
       Control ctrl = inputControl.Parent;  
       Literal js = new Literal();  
       js.Text = "<script>function addValue(val){ document.getElementById('" + inputControl.ClientID + "').value = val;}</script>";  
       ctrl.Controls.Add(js);  
       HtmlButton btn = new HtmlButton();  
       btn.InnerText = "...";  
       btn.Attributes.Add("onclick", "window.open('/Templates/Main/Pages/EdokSelectorControl.aspx?selectedvalue=' + document.getElementById('" + inputControl.ClientID + "').value,'namn','top=300,left=300,width=450,height=400,resizable=yes,status=yes');");  
       ctrl.Controls.Add(btn);  
     }  
   }  
 }