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.
There you will need to create a new datatype.
Then select umbraco usercontrol wrapper as rendercontrol and hit save.
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
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
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.
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.
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?
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?
hi,
Is there a way to access current node id in the user control?
@satjinder try Request[”id”]
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
Hi Tim, this was a nice post.
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?
[…] Creating custom datatypes using the umbraco usercontrol wrapper – Nibble, Umbraco developer […]
how to save the user control fields in umbraco database?
Good post, hope to find more of these to make the journey from EPiServer a bit easier..
another episerver converter, I see Im not alone.. @erik
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…
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?
[…] http://www.nibble.be/?p=24 […]
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);
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.