Creating custom datatypes using the umbraco usercontrol wrapper

I showed how easy it is to add custom .net usercontrols to your umbraco site frontend (http://www.nibble.be/?p=12). It is also very easy to add .net usercontrols wich you can use as custom datatypes. There are 2 ways of doing this, one being the umbraco usercontrol wrapper wich I will explain in this post.

Why add custom datatypes ? Default umbraco has around 20 datatypes, including true/false, simple editor, richtext editor,…everything for managing a basic site, but sometimes you might need to do something that you can’t do with the default datatypes.

An example shown at codegarden 07 was an ftp datatype. Other examples could be: a dropdown wich lists all files found in a specific folder, a dropdown listing data from another database, …

So how do we do this ? First reference the umbraco.editorControls assembly (can be found in the bin directory of umbraco). Then create a new usercontrol.

Your usercontrol will need to implement the umbraco.editorControls.userControlGrapper.IUsercontrolDataEditor interface

public partial class Demo : System.Web.UI.UserControl, umbraco.editorControls.userControlGrapper.IUsercontrolDataEditor  

You will need to implement the interface member value.

namespace UmbracoCreateCustomDatatypeWithWrapper
{
    public partial class Demo : System.Web.UI.UserControl, umbraco.editorControls.userControlGrapper.IUsercontrolDataEditor  
    {
        public string umbracoValue;
 
        protected void Page_Load(object sender, EventArgs e)
        {
            if (Page.IsPostBack)
            {
                
            }
        }
 
        public object value
        {
            get
            {
                return umbracoValue;
            }
            set
            {
                umbracoValue = value.ToString();
            }
        }
    }
}

 

Now you can add controls and logic to your usercontrol. One important thing you need to know is that the umbraco save action will trigger a postback. So you will need to set the umbracovalue on postback. Just take a look at the ftp datatype…

protected void Page_Load(object sender, EventArgs e)
        {
            if (Page.IsPostBack)
            {
                if (!String.IsNullOrEmpty(uploadFile.FileName))
                {
                    string file = Server.MapPath(“/media/ftp/” + uploadFile.FileName);
                    uploadFile.SaveAs(file);
                    FileInfo fi = new FileInfo(file);
                    UploadFile(fi,
                        ConfigurationManager.AppSettings[“ftpDataTypeUser”],
                                                ConfigurationManager.AppSettings[“ftpDataTypePassword”],
                        ConfigurationManager.AppSettings[“ftpDataTypeServer”]);
                    File.Delete(file);
                    umbracoValue = “http://” + ConfigurationManager.AppSettings[“ftpDataTypeServer”] + “/” + uploadFile.FileName;
                }
            }
 
            FileName.Text = umbracoValue;
        }

Adding this usercontrol as a datatype can be done a a few simple steps, first copy the assembly to the bin directory and copy the usercontrol to the usercontrols directory.

Now login to the umbraco backend and go to the developer section.

image

There you will need to create a new datatype.

Then select umbraco usercontrol wrapper as rendercontrol and hit save.

image

You will have to choose the usercontrol ( the one just uploaded )  and the database datatype ( depending on the type of object you are returning as umbracovalue ).

Demo project: download

Article from: http://www.nibble.be