For the last copule of years, ive been working with Sitecore CMS, switching to Umbraco has its pro and cons. One of the mayor features that this CMS does really well, is enabeling you as a developer to create custom propery editors. On Sitecore this isnt a thing you would do, or atleast try to avoid as much as possible, but for Umbraco, it is so easy, and it is even beeing taught at the when going to a certification.

In this post i will try to show just how little you need to do, to be able to have a custom property editor. This article will show a simple property editor, but in a later blogpost i will show you more advanced usages. 

 

To create a property editor you need two things

  • A package.manifest which configures the property editor
  • Some html+css+javascript to actualy make the editor work
  • A little configuration in the backoffice to create a datatype, that utilizes the editor

In this example, ill create a simple single line text editor. I know Umbraco already has a text editor, but this will show just how easy it is to get up and running with a property editor.

First off, the package.manifest

{
    "propertyEditors": [
        {
            "alias": "simpleTextEditor",
            "name": "Simple text editor",
            "hideLabel": false,
            "valueType": "JSON",
            "editor": {
                "view": "~/App_Plugins/SimpleTextEditor/propertyeditors/simpletexteditor.html"
            }
        }
    ],
    "javascript": [ 
        "~/App_Plugins/SimpleTextEditor/propertyeditors/simpletexteditor.controller.js"
    ],
    "css":[
        "~/App_Plugins/SimpleTextEditor/propertyeditors/simpletexteditor.css"
    ]
}

 

The file contains all the basic configuration for where the files used in the package is located. The convention is that your package.manifest file is located in /app_plugins/packagealias/package.manifest. Within this directory you can do pretty much whatever you need.

In the file above, we start by defining the editor, by giving it a alias, a name, and which kind of data the value should be in, choises are STRING, JSON, DATETIME, TEXT and INT.

The next important parts is defining where your view is located, where the javascript and the css is located. You dont need these files, but i would imagine that most will.

For a detailed schema of the package.manifest, you could check out Warren Buckleys description here

The html part is very simple in this example it will just initialize a angular html view, that has a input text area to write in, and a div below it, that shows the inserted text with some formatting.

<div ng-controller="simpletexteditor" class="simpletexteditor">
    <input type="text" ng-model="model.value"/>
    <div class="display">{{model.value}}</div>
</div>

 The stylesheet part of the editor is kinda simple aswell, it simply formats whats in the html view

.simpletexteditor .display {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid black;
  background-color: lightgray;
  font-style: italic;
}

Finally the javascript part, is just necessary to have, but in this example i haven't done anything to it. It simply just exists. The javascript is where all the magic will happen, when you want to create advanced property editors later.

angular.module("umbraco").controller("simpletexteditor",
    function ($scope) {
        // do code here
    });

The Visual studio part looks like the following, all files are placed in /app_plugins/simpletexteditor, and Ive choosen to put the files in a propertyeditor folder(as a plugin can consist of more elements later)

Simple test editor

 

The Umbraco backoffice part..

All thats left now that the files for the property editor is in place, is to create a datatype that utilizes the new property editor. This is done by going to the "Developer" part of Umbraco backoffice, and choose new data type. 

You need to give the data type a name, ive called my "Simple text editor", and in the dropdown you should be able to see a type with the name we gave it in the package.manifest file. "Simple text editor". It is possible to configure more values in this part, but we havnt defined any, these are called preValues, and ill look more into those in a later post.

Saving the datatype, enables you to be able to actualy add a property to an template, which is of the new type. Ive created one, and added it to a simple demo template as shown in this image:

Simple texteditor backoffice

Ive ziped everything up into a nice package that can be downloaded, if you need a clean starter package. You can find it here

Also, if you need a litte more advanced property editors, i have two that you can check out on Our