Nibble

Creating custom umbraco Data Editor Setting Types

Umbraco 4.6 (Juno) makes it super easy to create custom datatypes with settings (even ones created with the usercontrol wrapper) with the introduction of data editor settings. By default there are 21 types you can use out of the box (textbox, content picker, path picker, … ) and off course it’s also possible to plug in third party types let’s take a look at an example:

This will output a dropdownlist that let’s you choose between the available connectionstrings ( found in the configuration / connectionStrings part of the web.config)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using umbraco.cms.businesslogic.datatype;
using System.Web.UI.WebControls;
using System.Configuration;
 
namespace UmbracoJunoTest
{
    public class ConnectionStringPicker : DataEditorSettingType
    {
        private DropDownList ddl = new DropDownList();
 
        private string _val = string.Empty;
        public override string Value
        {
            get
            {
                return ddl.SelectedValue;
            }
            set
            {
                if (!string.IsNullOrEmpty(value))
                    _val = value;
            }
        }
 
        public override System.Web.UI.Control RenderControl(DataEditorSetting setting)
        {
            ddl.ID = setting.GetName();
 
            ddl.Items.Clear();
 
            for(int i = 0; i< ConfigurationManager.ConnectionStrings.Count; i++)
            {
                ddl.Items.Add(
                    new ListItem(
                        ConfigurationManager.ConnectionStrings[i].Name, 
                        ConfigurationManager.ConnectionStrings[i].ConnectionString));
                
            }
 
            ddl.Items.Insert(0, new ListItem(String.Empty, String.Empty));
 
            ddl.SelectedValue = _val;
 
            return ddl;
        }
    }
}

Simply inherit from DataEditorSettingType (found in the umbraco.cms.businesslogic.datatype namespace) and override the value property and the RenderControl method.

Now to use this type as a setting on your custom datatype, simply mark a property with the DataEditorSettings attribute and set to type to the created data editor setting type

[DataEditorSetting("Connectionstring",
            type= typeof(UmbracoJunoTest.ConnectionStringPicker))]
        public String ConnectionString { get; set; }

 

The result:

image

With this being in the web.config

<connectionStrings>
  
  <add name="Sample"  connectionString="server=.\sqlexpress;database=aspnetdb;user id=
DBUSER;password=DBPASSWORD" providerName="System.Data.SqlClient"/>
 
 <add name="AnotherSample"  connectionString="server=.\sqlexpress;database=aspnetdb;user id=
DBUSER;password=DBPASSWORD" providerName="System.Data.SqlClient"/>
  
 
</connectionStrings>

2 Comments so far

  1. Chris on October 4th, 2013

    Hi Tim,

    I’ve just finished writing a custom datatype to enable editors to select an event from a dropdown list. The list is populated with items pulled from a remote MS Dynamics CRM.

    Later in the project, I have a requirement to create other lists, again, all populated with data from the same CRM. It makes sense to reuse as much of my initial codebase as possible, and so I think I will use a datatype setting to select the appropriate list. Not bad for my first datatype!

    The code you have shared on this page was just the legup I needed. Thanks for sharing!

    Cheers,
    Chris

  2. Tim Geyssens on October 4th, 2013

    @chris glad it was helpful :)

Leave a Reply