Nibble

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 Smile

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 Smile

Just drop the files in /App_Plugins, restart the app and create a new datatype using the char limit prop editor

The prevalue editor:

image

Datatype in action:

image

Sourcecode

Code for this is available on github

https://github.com/TimGeyssens/MyFirstBellePropEditor

11 Comments so far

  1. epifun on September 17th, 2013

    /App_Plugins/CharLimitEditor/harlimiteditor.html
    Missed ‘C’ char in path. =)

  2. Tim Geyssens on September 17th, 2013

    thanks updated :)

  3. epifun on September 17th, 2013

    That if I need upload binary file into my prop editor?

  4. Tim Geyssens on September 17th, 2013
  5. Kevin Giszewski on November 21st, 2013

    Well done Tim.

  6. abdu on November 22nd, 2013

    Thank you very much.

  7. Jason Espin on September 25th, 2014

    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

  8. Tim Geyssens on September 25th, 2014

    @Jason, using the exact same code? So just dropping in the files from github? Or did you make modifications?

  9. Richard Kingston on September 26th, 2014

    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?

  10. Richard Kingston on September 26th, 2014

    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 :)

  11. Jahan on November 2nd, 2015

    Hi,
    I have no knowledge about Angular.Please introduce some good references for learning about it.

Leave a Reply