π
π
π
π
ui-o-matic documentation
Searchβ¦
UI-O-Matic Docs
Usage
Default Editor Views
Custom Editor Views
Listview
List Field Views
Listview Actions
Dashboard
PropertyEditors
Custom Sections
Content Apps
EventModel
Config Settings
Addons
Advanced
Know Issues
Further Reading
License
Powered By
GitBook
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)
Previous
Default Editor Views
Next
Listview
Last modified
2yr ago
Copy link
Outline
API Controller
AngularJS View
AngularJS Controller
Package Manifest
Thoughts