📔
ui-o-matic documentation
  • UI-O-Matic Docs
  • Usage
  • Default Field Editor Views
  • Custom Field Editor Views
  • Listview
  • List Field Views
  • List View Actions
  • Dashboard
  • Property Editors
  • Event Model
  • Config Settings
  • Addons
  • Advanced
  • KnowIssues
  • FurtherReading
  • Content Apps
  • SPA and Front.API
Powered by GitBook
On this page

Custom Field Editor Views

PreviousDefault Field Editor ViewsNextListview

Last updated 3 months ago

Was this helpful?

CtrlK
  • API Controller
  • AngularJS View
  • AngularJS Controller
  • Package Manifest
  • Thoughts

Was this helpful?

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)