Nibble

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

20 Comments so far

  1. Petr Snobelt on May 5th, 2008

    Hi,
    I have simple table with node id as first column and some additional columns.

    I would like to create datatype which show datagrid (in umbraco backend) with rows for selected node. When hit save it store no of rows for node (for sorting etc). It will be great if it allow deleting selected rows.

    What is the best way to do this.

    Thank you

  2. Boga on May 13th, 2008

    Hi Tim. Just saw you started a new blog. My old question remains the same - almost 2 months ago and I can’t find any new entries regarding your blog package. As Decker said in another comment: “It doesn’t have to be perfect, it doesn’t have to be documented…”. If you need any help, let me know.

    Boga Says:
    dinsdag 18 maart 2008

    Hey Tim. Since I need a blog engine for umbraco v3 I’m wondering about the status of your blog engine project!? Which of the several old engines works with v3? Thanks for any hints.

  3. Tim Geyssens on May 16th, 2008

    Hi Boga,

    You can just donwload and install the one found in the package repo. I have several extra ‘parts’ so if you are interested then just send me a mail at info(at)nibble(dot)be and I’ll send you the source for the extra parts.

  4. Frank v Braak on August 1st, 2008

    I downloaded the zip file, but it’s made in an newer version of Visual Studio. I am using VS2005. Do you have an project in 2005 aswell?

    I am trying to reproduce your code, but gaves me errors…

    The thing I want to do is:
    - Create a new TAB for the media IMAGES
    - Having an textbox there to fill in some integer value
    - After pushing save, scale the with of the image to the filled in value

    Or must that be achieved in another why?

  5. Caio on November 4th, 2008

    Hi,

    I follow your example and work very well to “embed” the control at Umbraco admin, but when i insert data into my control nothing happens, no postback, no data get persisted at database. Any idea?

  6. satjinder on March 27th, 2009

    hi,

    Is there a way to access current node id in the user control?

  7. Tim Geyssens on March 27th, 2009

    @satjinder try Request[”id”]

  8. Sarawut on April 6th, 2010

    I use custom checkboxlist but umbracoValue alway get the first value , This is some of my code

    if (Page.IsPostBack)
    {
    string temp = String.Empty;

    foreach (ListItem item in chkListView.Items)
    {
    if (item.Selected)
    {
    umbracoValue = chkListView.SelectedItem.Value “,”;
    }

    }

    }

    For Example : I alway get house,house,house result how can i it , Thank

  9. Ravi Gupta on April 21st, 2010

    Hi Tim, this was a nice post.

  10. Johan Möller on May 18th, 2010

    I’ve built a datatype with a checkboxlist control in it doing the way you describe here. It works in my content section not when i use it for media types and this is where i realy need it.

    Is this way not supposed to work in the mediasection or whats the diffrence betweeen using a datatype in content section or media section?

  11. 316n « Mindless Chatter on March 17th, 2011

    […] Creating custom datatypes using the umbraco usercontrol wrapper – Nibble, Umbraco developer […]

  12. Praveen on May 11th, 2011

    how to save the user control fields in umbraco database?

  13. Erik Nordin on June 9th, 2011

    Good post, hope to find more of these to make the journey from EPiServer a bit easier.. :)

  14. newby on August 12th, 2011

    another episerver converter, I see Im not alone.. @erik

  15. Siw on September 13th, 2011

    So why won’t the value I assign to the umbraco value member get saved?
    Other people have asked above here and you have not answered that question. My usercontrol works nicely when used in a normal aspx page, it gets and sets values as it should.
    I have no trouble registering the usercontrol with the wrapper as a new datatype in umbraco. It runs seemingly as it should in the content document, but nothing gets saved…

  16. CharlesFoxston on June 12th, 2012

    I agree with the above comment. In 4.7.1.1 onwards, this doesn’t save. Does anyone know what is the best way to save the values to the document type?

  17. Jeffrey Valeroso on November 8th, 2012

    How to add CUSTOM DATATYPES USING THE UMBRACO USERCONTROL WRAPPER in C# just like TinyCME.

    DataTypeDefinition dataTypeDefinition = DataTypeDefinition.GetDataTypeDefinition(tinyMCEDataTypeId);
    this._tinymce = (TinyMCE)dataTypeDefinition.DataType.DataEditor;
    this._tinymce.ID = “T1″;
    this.panRTE.Controls.Add(this._tinymce);
    this.tpInfo.Menu.NewElement(”div”, “umbTinymceMenu_” this._tinymce.ClientID, “tinymceMenuBar”, 0);

  18. Marco on September 26th, 2013

    Siw & CharlesFoxston:

    you might have to make sure you give the ddl the selected index on page load.
    This means:
    if(!Page.IsPostBack) {
    foreach(…) {
    // Fill ddl here
    dll.Items.Add(*item*);
    if(*item*.value == umbracoValue)
    dll.SelectedIndex = dll.Items.IndexOf(*item*);
    }
    }

    Cheers for the code.

  19. code psn on May 2nd, 2014

    I honestly ended up playing the Saturn version of the game first, then later
    played the PSX version. Megatron, Starscream,
    Soundwave and Barricade are among those present for the Decepticons, while the Autobots boast the
    likes of Optimus Prime, Bumblee and Ironhide. Update:
    Sony’s Jeff Rubentstein released this official
    statement just moments ago: “PS3 slim is good to go, older models should be fine within 24 hrs.

Leave a Reply