Watch video

With the view in place, you will now take a look at the property editor controller. The controller is basically some JS that will allow you to extend the functionality of the editor. It is stored in a separate javascript file. You have to make sure that the controller js is loaded on application start by updating your package manifest.

In your Example directory, create a new javascript file. Call this file charlimit.controller.js.

Add the basic skeleton for a controller. Since you need to register this with angular, you will start this with angular.module("umbraco").controller. Give your controller a unique name, such as Example.CharLimitController.

Then, you will add your controller function. This is the basic skeleton.

In there, you can add an alert, such as Hello World. Save the file.

Of course, Umbraco needs to know about this new file. What you can do in the package manifest is, beside property editors, also define an array of javascript files which you want to load on application start. Add the javascript. The location is pretty similar to do view one, except the file is called charlimit.controller.js. Save the file.

Since you are making changes to your package manifest, you need to make sure that Umbraco knows about it. You will touch the web.config in order for the application to restart.

Finally, you will have to make the link between the view and the controller so the view knows which controller to use. You can do that with the ngController directive. You will need to know the name of your controller.

On your view, you will add a surrounding div. On that div, you will add the ng controller. You will make use of the ngController directive.

The ng controller has to match with the name you gave your controller, which is Example.CharLimitController. Save your work.

Go back to the Back Office. If you reload the page, you will see that your alert gets called.

What you will do now on the controller is inject the scope. On the scope, define a function: \$scope.limitchars = function. You will create a variable called limit and set that to 30. Check if the length of the model value property exceeds the limit. If it does, you will substring the model.value.

Of course, you need to make sure that this limitchars function gets called when the value of your textarea gets changed. For that, you can use the directive** ng-change** with the call to your function.

If you reload the Back Office now and try to copy paste this, you will see that you are not getting further than this amount of characters because it is getting substringed.

What you will do is populate a new property on your scope, which is called info, and say you cannot write more than the amount of characters. If the limit has not been reached yet, you will say that you have this amount of characters left.

If you now save and reload your Back Office, nothing is outputted yet because you are not doing anything with that info property.

Add a new line break. Add a new span, which you will then ng bind to info.

If you now go back to your Back Office, reload and start typing, you can see that you will get the output you wish. The content editor gets a friendly message.

Property Editors

Total Time: 00:37:15

Start extending the backoffice with custom components, in this chapter you'll learn how to create your own property editors, using html, js and AngularJS.