Custom datatypes in Umbraco 7.x

This is a quick example on how to create a custom data type that can be used in the Umbraco back office. With Umbraco 7 the back office UI was re-written to use AngualrJs, it therefore pays to have some familiarity with AngularJs before beginning.

I am starting with an existing project that has already been setup in Visual Studio, if you have already installed some custom datatypes or packages you will notice a folder called App_Plugins in the Website project. This is where you will create the majority of your custom code.

First create a sensible sub folder for your custom data type keeping the usual namespace rules in mind so as to avoid clashes with anything else. Create a file under the sub folder called package.manifest this will tell Umbraco where all the files for your data type are located.

In this example we will create a simple data type to store information that will demonstrate the features available in Umbraco 7 data types.

Next we need 2 html files one for our PreValueEditor and one for our PropertyEditor. The PreValueEditor is not required in all cases but it is useful when you as a developer might want to setup some configuration values for your data type before the editor actually uses.

The Property Editor is what will actually be used by the Content Editor in Umbraco and should only display the editable fields that will ultimately be used by your code.

As you will see in both cases the html assumes angular model binding and a controller which we need to create next

The Controller can be as complicated as you like but ultimately it's job is to get the data from the editor into Umbraco.

If you are using a PreValue Editor then you will likely need a controller for each Editor type.

Umbraco needs to store the data and you have a few types to choose from, if you are writing a fairly complex data type then JSON is a good option allowing complex objects to be stored.

The other great thing about using JSON as a storage medium is that you can take advantage of PropertyConvertors in your back end coded to consume the data and with Newtonsoft.JSON.

To write a converter simply Implement IPropertyValueConvertor in the Umbraco.Core.PropertyEditors namespace this is where you can tell Umbraco how to convert the underlying data into a concrete type. Once that is in place then all you need to do is call the generic GetPropertyValue method to retrieve the custom data type.

Depending on what you are trying to achieve your custom data type may need to do some server side processing or open a new dialog window. There are a few cases where this may be required like third party service interactions or if you want a temporary interface to perform an action rather than edit property data directly. This can be achieved in a couple of different ways:

If you are more comfortable with webforms you can still implement a web forms page to handle processing. THe more accepted way would be to use a PluginController. If you extend from the JSON Authorised Controller you can be sure that your code is secure. One point to note is that this is broken in spme verions of Umbraco so you may have to consider that.

If you do implement a web forms dialog you will not have access to the current page or editor scope values as you do in the angular controller. this is not always an issue since you can simply pass the node id when opening up your dialog.

With all that in place you have many options for creating custom back office interfaces to make your editors lives easier.