Custom Field Editor Views
You aren't limited in using the built-in field editor views (like checkbox, date, datetime, ...) but you can easily plug in your own custom ones.
It's just a matter of pointing the UIOMaticField
attribute to the view location
[UIOMaticField(Name = "Owner", Description = "Select the owner of the dog", View = "~/App_Plugins/Example/picker.person.html")]
API Controller
[PluginController("Example")]
public class ExampleApiController: UmbracoAuthorizedJsonController
{
public IEnumerable<dynamic> GetAll()
{
var query = new Sql().Select("*").From("People");
return DatabaseContext.Database.Fetch<dynamic>(query);
}
}
AngularJS View
<div ng-controller="Example.Picker.Person">
<select
ng-model="property.value"
ng-options='person.Id as (person.FirstName + " " + person.LastName) for person in persons'>
<option value="">---Please select---</option>
</select><br>
</div>
AngularJS Controller
angular.module("umbraco").controller("Example.Picker.Person",
function ($scope,$http) {
$http.get("backoffice/Example/ExampleApi/GetAll").then(function(response) {
$scope.persons = response.data;
});
});
Package Manifest
{
javascript: [
'~/App_Plugins/Example/picker.person.controller.js',
]
}
Thoughts
As you see this is very similar to creating custom Umbraco property editors, the main difference is that we'll be working with the property.value object (and not model.value)
Last updated
Was this helpful?