Nibble

Creating custom umbraco datatypes revisited

Umbraco v4.0.1 introduces the abstract dataeditor class to make it easier to build custom datatypes.

So I tried to port the char limit datatype that I showed in the ‘creating custom umbraco datatypes’.

This is how it looks:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace charLimitAbstractDataEditor
{
    public class DataType: umbraco.cms.businesslogic.datatype.AbstractDataEditor
    {
 
        private charLimitPrevalueEditor _prevalueeditor;
      
        private CharlimitControl m_control = new CharlimitControl();
 
 
        public override Guid Id
        {
            get
            {
                return new Guid(“a5dd5b89-74f5-4ed3-b855-f98ae07ea1ec”);
            }
        }
        public override string DataTypeName
        {
            get
            {
                return “CharLimit (AbstractDataEditor)”;
            }
        }
 
        public override umbraco.interfaces.IDataPrevalue PrevalueEditor
        {
            get
            {
                if (_prevalueeditor == null)
                    _prevalueeditor = new charLimitPrevalueEditor(this);
                return _prevalueeditor;
            }
        }
        public DataType()
        {
 
            base.RenderControl = m_control;
            m_control.Init += new EventHandler(m_control_Init);
            base.DataEditorControl.OnSave += new umbraco.cms.businesslogic.datatype.AbstractDataEditorControl.SaveEventHandler(DataEditorControl_OnSave);
        }
 
        void m_control_Init(object sender, EventArgs e)
        {
            m_control.Text = base.Data.Value != null ? base.Data.Value.ToString() : “”;
            m_control.Limit = Convert.ToInt32(((charLimitPrevalueEditor)PrevalueEditor).Configuration);
            
        }
 
        void DataEditorControl_OnSave(EventArgs e)
        {
            base.Data.Value = m_control.Text;
        }
       
    }
}

 

So you just need to inherit from umbraco.cms.businesslogic.datatype.AbstractDataEditor and override the Guid and the DataTypeName property.

If you also need a custom PrevalueEditor (datatype settings) you will also need to override the PrevalueEditor property.

Next step is to set the RenderControl in the constructor, the rendercontrol is just a custom control.

In this case it’s the CharLimitControl

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI;
 
namespace charLimitAbstractDataEditor
{
    public class CharlimitControl: System.Web.UI.WebControls.Panel
    {
        private TextBox txtCharLimit;
        private Label lblLimitInfo;
 
        protected override void OnInit(EventArgs e)
        {
 
            base.OnInit(e);
 
            txtCharLimit.Text = this.Text;
            txtCharLimit.TextMode = TextBoxMode.MultiLine;
            txtCharLimit.Rows = 10;
            txtCharLimit.Columns = 40;
            txtCharLimit.CssClass = “umbEditorTextFieldMultiple”;
            txtCharLimit.Attributes.Add(“onkeyup”, string.Format(“limitChars(this, {1}, ‘{0}’)”, “charlimitstatus” + this.ClientID, Limit.ToString()));
 
            lblLimitInfo = new Label();
 
            lblLimitInfo.Attributes.Add(“id”, “charlimitstatus” + this.ClientID);
 
 
            this.Controls.Add(txtCharLimit);
 
            this.Controls.Add(new LiteralControl(“<br/>”));
            this.Controls.Add(lblLimitInfo);
 
 
            string functionlimit = “function limitChars(textarea, limit, infodiv)”;
            functionlimit += “{”;
            functionlimit += “var text = textarea.value;”;
            functionlimit += “var textlength = text.length;”;
            functionlimit += “var info = document.getElementById(infodiv);”;
 
            functionlimit += “if(textlength > limit)”;
            functionlimit += “{”;
            functionlimit += “info.innerHTML = ‘You cannot write more then ‘+limit+’ characters!’;”;
            functionlimit += “textarea.value = text.substr(0,limit);”;
            functionlimit += “return false;”;
            functionlimit += “}”;
            functionlimit += “else”;
            functionlimit += “{”;
            functionlimit += “info.innerHTML = ‘You have ‘+ (limit - textlength) +’ characters left.’;”;
            functionlimit += “return true;”;
            functionlimit += “}”;
            functionlimit += “}”;
 
            ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), “limitChars”, functionlimit, true);
        }
 
        private int _limit;
        public int Limit
        {
            get
            {
                return _limit;
            }
            set
            {
                _limit = value;
            }
 
 
 
        }
 
        public string _text;
        public string Text
        {
            get
            {
                return txtCharLimit.Text;
            }
            set
            {
                if (txtCharLimit == null)
                    txtCharLimit = new TextBox();
                txtCharLimit.Text = value;
            }
        }
    }
}

 

On init I just pass the stored value and the prevalue editor configuration to the custom control.

        void m_control_Init(object sender, EventArgs e)
        {
            m_control.Text = base.Data.Value != null ? base.Data.Value.ToString() : “”;
            m_control.Limit = Convert.ToInt32(((charLimitPrevalueEditor)PrevalueEditor).Configuration);
            
        }

 

Last step is to subscribe to the base.DataEditorControl.OnSave event and set the base.Data.Value (in this case to the custom control Text property)

        void DataEditorControl_OnSave(EventArgs e)
        {
            base.Data.Value = m_control.Text;
        }

 

Download sourcecode

3 Comments so far

  1. Thomas Höhler on March 30th, 2009

    Nice post, thx for charing it.

    Just one hint: I would use a StringBuilder isntead of the multiple = for the functionlimit. Each time you use = there is a new string generated in the memory.

    Cheers, Thomas

  2. Thomas Höhler on March 30th, 2009

    Meant plus= the plus was killed by the commenter.
    Thomas

  3. TimNape on June 25th, 2011

    Example didn’t work for me at 1st. Happend I needed to generate a new GUID for the datatype - hope someone finds this usefull

Leave a Reply