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

Default Editor Views

Listview

Last modified 2yr ago

Copy link

Outline