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

31 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. make your own music video on March 3rd, 2014

    I’m not that much of a internet reader to be honest but your
    blogs really nice, keep it up! I’ll go ahead and bookmark your
    website to come back later on. Many thanks

  20. On the other hand, users who aren’t tech savvy may not want to do this, as you might miss an update that’s important.

    Turning on Facebook Login Notifications: Slideshow.
    Data stored on a computer that has even a remote possibility of containing information such as social security numbers, credit
    card and financial account numbers, account balances, and investment portfolio information must be protected.

  21. emulateur xbox 360 pc on April 23rd, 2014

    Thanks for finally talking about > Creating custom
    datatypes using the umbraco usercontrol wrapper - Tim Geyssens,
    Umbraco developer < Liked it!

    Take a look at my weblog :: emulateur xbox 360 pc

  22. top hack cheat on April 24th, 2014

    2, expanded the requirement of platform protection
    by removing the exclusion of UNIX-based operating systems or mainframes.
    This excerpt from Maximum Wireless Security explains common attacks such as sniffing, spoofing, sniffing and session hijacking.
    – There was a time when American youth wanted to be
    “Duck” or NFL football stars; now many young people in the Eugene area would rather hang out in their “computer caves” — often located in the basements of their parents
    homes — and doing something called “hacking.

  23. mère de famille sauteuse on April 29th, 2014

    Je puƄlie un commentaire simplement pour complimenter son auteur

  24. 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.

  25. Hotel Booking.Com London on May 14th, 2014

    Sweet blog! I found it while surfing around on Yahoo News.
    Do you have any suggestions on how to get listed in Yahoo News?
    I’ve been trying for a while but I never seem to get
    there! Many thanks

    Feel free to visit my page: Hotel Booking.Com London

  26. rea on May 22nd, 2014

    Excellent post. I was checking continuously this blog and I’m impressed!
    Extremely useful information specially the last part :) I care for suchh info a lot.

    I was lookiing for this certain info for a very long time.
    Thank you and good luck.

  27. Greetings! This is my first visit to your blog!
    We are a team of volunteers and starting a new project in a
    community in the same niche. Your blog provided us useful information to work on. You have done
    a wonderful job!

  28. cerchi-in-lega.info on July 12th, 2014

    Ciao ​​lì , appena diventato consapevoli di avviso per il tuo blog tramite
    Google , e ha scoperto che è veramente informativo .
    Sono andando andando a guardare fuori per bruxelles . io grato se si continua questo in futuro
    . Molti Numerose persone saranno beneficiato
    tua scrittura . Cheers!

  29. control on July 17th, 2014

    What’s up, the whole thing is going perfectly here and ofcourse every one is sharing information,
    that’s really excellent, keeep up writing.

  30. equipement motard on July 24th, 2014

    equipement motard…

    Creating custom datatypes using the umbraco usercontrol wrapper - Tim Geyssens, Umbraco developer…

Leave a Reply