Char limit property editor for Umbraco Belle
Throughout the years I’ve created different examples of how to create custom datatypes (now called prop editors) so with Belle on it’s way and the complete different approach in how to handle those in Umbraco 7( the highly awaited predecessor of Umbraco 8 and 9) it’s time for another update 
First of all there are already some useful resources out there:
An example on Warren’s blog http://creativewebspecialist.co.uk/2013/08/23/how-i-built-my-first-property-editor-for-umbraco-belle/ and of course the official docs http://umbraco.github.io/Belle/#/tutorials/CreatingAPropertyEditor
But since I’m also adding configuration to this prop editor I thought it would make sense to add another post to the list!
The manifest
/App_Plugins/CharLimitEditor/package.manifest
{
propertyEditors: [
{
alias: "Demo.CharLimitEditor",
name: "Char limit",
editor: {
view: "~/App_Plugins/CharLimitEditor/charlimiteditor.html"
},
prevalues: {
fields: [
{
label: "Number of chars",
description: "Enter the number of chars to limit on",
key: "limit",
view: "requiredfield",
validation: [
{
type: "Required"
}
]
}
]
}
}
]
,
javascript: [
‘~/App_Plugins/CharLimitEditor/charlimiteditor.controller.js’
]
}
This manifest will tell Umbraco about our new property editor and allows us to inject any needed files into the application.A new thing in the manifest, prop editors now have a unique alias instead of a guid
Also notices the prevalues part, here I define the config options my prop editor will have
The view
/App_Plugins/CharLimitEditor/Charlimiteditor.html
<div ng-controller="Demo.CharLimitEditorController">
<textarea ng-model="model.value" ng-change="limitChars()"></textarea>
<br/>
<span ng-bind="info"></span>
</div>
The Controller
angular.module("umbraco")
.controller("Demo.CharLimitEditorController",
function ($scope) {
$scope.limitChars = function(){
var limit = parseInt($scope.model.config.limit);
if ($scope.model.value.length > limit )
{
$scope.info = ‘You cannot write more then ‘ + limit + ‘ characters!’;
$scope.model.value = $scope.model.value.substr(0, limit );
}
else
{
$scope.info = ‘You have ‘ + (limit - $scope.model.value.length) + ‘ characters left.’;
}
};
});
(notice how I get the value of the config options $scope.model.config.limit)
It’s that easy, no more c# code and comiling down to DLLs, you’ll just need to have html/js and Angularjs skills
Just drop the files in /App_Plugins, restart the app and create a new datatype using the char limit prop editor
The prevalue editor:
Datatype in action:
Sourcecode
Code for this is available on github
/App_Plugins/CharLimitEditor/harlimiteditor.html
Missed ‘C’ char in path. =)
thanks updated
That if I need upload binary file into my prop editor?
Check http://belle-lab.thecogworks.co.uk/assets/belle-workbook.pdf for more advanced topics
Well done Tim.
Thank you very much.
This does not work for me. When I run this in Umbraco and add it to a document type, I get $scope is undefined in Firebug. This is using Umbraco v.7.1.6
@Jason, using the exact same code? So just dropping in the files from github? Or did you make modifications?
This fails for me also. In my content view, it all looks fine until I browse to another node and back again. The property is then empty as though it didn’t save. Did I miss a step?
Ignore my last comment - I’d initially registered the data type with a valueType of INT meaning it couldn’t hold my string value. I removed it, re-registered it without a valueType declaration (so it expected a string) and now all is well in the world
Hi,
I have no knowledge about Angular.Please introduce some good references for learning about it.