Last updated
Last updated
This tutorial guides you through creating a property editor, integrating it with Umbraco's Data Types, AngularJS modules and its injector. Finally, it explains how we can test our property editor.
The steps we will go through in part 1 are:
This tutorial covers how to use AngularJS with Umbraco, so it does not cover AngularJS itself. To read about AngularJS, you can take a look at some of the resources here:
We will have a "Suggestions" Data Type in Umbraco. It is registered as a Data Type in the backoffice, and assigned to a Document Type. The Data Type can create and suggest values.
To begin with, let's create a new folder inside /App_Plugins folder. We will call it Suggestions.
If you do not have an /App_Plugins folder, you can create it at the root of your project.
Next, we will create a Package Manifest file to describe what the plugin does. This manifest will tell Umbraco about our new Property Editor and allow us to inject any needed files into the application.
Create the file /App_Plugins/Suggestions/package.manifest.
Inside the package.manifest file, we will add the following JSON to describe the Property Editor. Have a look at the inline comments in the JSON below for details on each bit:
You can also create a property editor with C# instead of defining it in a package.manifest. Create a Suggestion.cs file at the root of your project to register the editor this way.
As the above C# code is adding the Property Editor, the package.manifest file can be simplified like this:
Now, we will add 3 files to the /App_Plugins/Suggestions/ folder:
suggestion.html
suggestion.controller.js
suggestion.css
These will be our main files for the editor, with the .html file handling the view, .js file handling the functionality and the .css file containing the stylesheet.
In the .html file we'll add:
In the .js file, we'll add a basic AngularJS controller declaration
In the .css file, we'll add:
Now our basic parts of the editor are done, namely:
The package manifest, telling Umbraco what to load
The HTML view for the editor
The controller for wiring up the editor with angular
The stylesheet for defining our data type styles
We will now restart our application. In the Document Type, add a new property called "Suggestion" and add to it the newly created property editor "Suggestions" and save it.
Now open the content item of that Document Type and there will be an alert message saying "The controller has landed", which means all is well.
We can now edit the assigned property's value with our new property editor.
Now, open the suggestion.controller.js file and edit it so it looks like this:
Then update the HTML file with the following, where we add the id to the button:
Now, clear the cache, reload the document, and see the Suggestions Data Type running.
When we save or publish, the value of the Data Type is automatically synced to the current content object and sent to the server, all through the power of Angular and the ng-model attribute.
For more information about the package.manifest file, see the article.
Visit the for more details about extending this service.
Learn more about extending this service by visiting the .
A guide to creating a property editor in Umbraco
