Archive for October, 2016

Custom Umbraco Sections Made easy with UI-O-Matic v2 3

In collaboration with Matt Brailsford I’m am happy to announce the v2 release of UI-O-Matic. In addition to the beta we’ve also added the following:


Simply install on your Umbraco instance with Nuget

Install-Package Nibble.Umbraco.UIOMatic


If you have the following db table

1 CREATE TABLE [People] ( 2 [Id] int IDENTITY (1,1) NOT NULL 3 , [FirstName] nvarchar(255) NOT NULL 4 , [LastName] nvarchar(255) NOT NULL 5 , [Picture] nvarchar(255) NOT NULL 6 );

And the following petapoco poco

1 [TableName(People)] 2 public class Person 3 { 4 [PrimaryKeyColumn(AutoIncrement = true)] 5 public int Id { get; set; } 6 7 public string FirstName { get; set; } 8 9 public string LastName { get; set; } 10 11 public string Picture { get; set; } 12 }

The next additions to the class (attributes)

1 [UIOMatic(people,People,Person, FolderIcon = icon-users, ItemIcon = icon-user)] 2 [TableName(People)] 3 public class Person 4 { 5 [PrimaryKeyColumn(AutoIncrement = true)] 6 public int Id { get; set; } 7 8 [Required] 9 [UIOMaticField(Name = First name, Description = Enter the persons first name)] 10 public string FirstName { get; set; } 11 12 [Required] 13 [UIOMaticField(Name = Last name,Description = Enter the persons last name)] 14 public string LastName { get; set; } 15 16 [UIOMaticField(Name = Picture,Description = Select a picture, View = UIOMatic.Constants.FieldEditors.File)] 17 public string Picture { get; set; } 18 19 public override string ToString() 20 { 21 return FirstName + + LastName; 22 } 23 24 }

will generate the following crud UI



You can find the v2 docs at

So we hope this is a valuable tool for Umbraco devs that can save you several hours/days of your precious time

Screen Shot 2016-10-31 at 08.53.16

Extending UI-O-Matic V2 With custom List View filters 0

In the contact entries example you’ll see that we use a relative date filter to output the created date in the format of … minutes ago, hours ago,…days ago

With the following config on the standard label list view field

1 [UIOMaticListViewField(Config = {’format’ : ‘{{value|relativeDate}}’})] 2 [UIOMaticField(View = UIOMatic.Constants.FieldEditors.DateTime)] 3 public DateTime Created { get; set; }

But of course it’s also possible to plug in custom filters

Show me

So let me extend the contact entries example and truncate the message if it’s to large.

I’ve downloaded this truncate filter from github and added that to my project, also added a package manifest and a script where I do the include, so I get the following structure in my AppPlugins folder

Screen Shot 2016-10-28 at 17.49.08

Import looks like

1 var app = angular.module(umbraco); 2 3 //These are my Angular modules that I want to inject/require 4 5 app.requires.push(truncate);

So with that in place I can now use the new filter

1 [SpecialDbType(SpecialDbTypes.NTEXT)] 2 [Required] 3 [UIOMaticListViewField(Config = {’format’ : ‘{{value|characters:25}}’})] 4 [UIOMaticField(View = UIOMatic.Constants.FieldEditors.Textarea)] 5 public string Message { get; set; }

And now we get a truncated message (tailed with …)

Screen Shot 2016-10-28 at 17.53.32

btw RC is out! (last chance to test before final hits the shelves)

Extending UI-O-Matic v2 with custom List Actions 1

Something that we’ve just added to UI-O-Matic v2 is the ability to plug in additional actions. So by default you get CRUD but now you will also be able to plug in third party ones!


Let’s say you want to provide export functionality to your clients, here is how do do that (this is currently run on the latest source so still subject to change)

Defining the action

Step 1 is that we’ll need to define our action, each action consist of a name, alias and a view it will open

1 [UIOMaticAction("export","Export", "~/App_Plugins/UIOMaticAddons/export.html")] 2 public class ExportAction { }

Next we add the our model (if we take the previous example we can just add the new Action by adding it to the ListActions parameter of our UIOMatic attribute)

1 [TableName("ContactEntries")] 2 [PrimaryKey("Id", autoIncrement = true)] 3 [UIOMatic("contactentries", "Contact Entries", "Contact Entry", 4 FolderIcon = "icon-users", 5 SortColumn = "Created", SortOrder = "desc", 6 RenderType = UIOMaticRenderType.List, 7 ListActions = new[]{ typeof(ExportAction)})] 8 public class ContactEntry

The Angular View and Controller

As you see we pointed the new action to ~/App_Plugins/UIOMaticAddons/export.html so we now have to build that dialog

1 <div ng-controller="uioMaticAddons.ExportController"> 2 <p ng-show="loading">Generating Export…</p> 3 <a href="{{file}}" ng-hide="loading" target="_blank">Download export here</a> 4 </div>


1 angular.module("umbraco").controller("uioMaticAddons.ExportController", 2 function ($scope, uioMaticExportResource) { 3 $scope.loading = true; 4 uioMaticExportResource.getExport($scope.dialogData.typeAlias).then(function (response) { 5 $scope.file =; 6 $scope.loading = false; 7 }); 8 });


As you can see here we just call a resource and provide it with the typeAlias (that is provided to us in the dialog data).

The resource will return the file name of the csv export.

AngularJS Resource

1 angular.module("umbraco.resources") 2 .factory("uioMaticExportResource", function ($http, umbRequestHelper) { 3 return { 4 getExport: function (typeAlias) { 5 return umbRequestHelper.resourcePromise( 6 $http.get(Umbraco.Sys.ServerVariables.uioMaticAddons.ecBaseUrl + "GetExport?typeAlias="+typeAlias), 7 Failed to generate export 8 ); 9 } 10 } 11 });

this one basicly calls our .net controller

.NET Controller

1 using CsvHelper; 2 using System; 3 using System.IO; 4 using Umbraco.Core.IO; 5 using Umbraco.Web.Editors; 6 7 namespace TestUIOMatic2Take2.Controllers 8 { 9 public class ExportController: UmbracoAuthorizedJsonController 10 { 11 public object GetExport(string typeAlias) 12 { 13 var guid = Guid.NewGuid(); 14 15 using (var textWriter = File.CreateText(IOHelper.MapPath(@"~\App_Plugins\UIOMaticAddons\Exports\" + guid + ".csv"))) 16 { 17 using (var csv = new CsvWriter(textWriter)) 18 { 19 var os = new UIOMatic.Services.PetaPocoObjectService(); 20 21 var data = os.GetAll(UIOMatic.Helper.GetUIOMaticTypeByAlias(typeAlias)); 22 23 csv.Configuration.Delimiter = ";"; 24 csv.Configuration.HasHeaderRecord = true; 25 26 csv.WriteRecords(data); 27 } 28 } 29 30 return new { data = "../App_Plugins/UIOMaticAddons/Exports/" + guid.ToString() + ".csv" }; 31 } 32 } 33 }


This uses the great and simple CsvHelper package to easily generate a csv file out of our data and then stores it on disk and returns the file location.


I now got an additional export action I can apply to any model I wish!

Screen Shot 2016-10-27 at 22.18.45

Screen Shot 2016-10-27 at 22.18.58


Once v2 final is out, I’ll make a nuget package out of this (and probably make some tweaks since this is just a proof of concept at the moment) so you can easiliy install it and extend your UI-O-Matic models

Using UI-O-Matic V2 as an entries viewer for your custom forms 2

As promised I would share some real world examples of using UI-O-Matic. One thing I tend to use if for is as a quick entries viewer for custom made forms on your Umbraco site.


So of course we first need to setup a form on our frontend, for that we’ll need a model, view and (surface)controller. If you arent’ familiar with how to set that up check out the chapter on or I’ve also seen this video recently explaining the process.


1 [TableName("ContactEntries")] 2 [PrimaryKey("Id", autoIncrement = true)] 3 public class ContactEntry 4 { 5 [PrimaryKeyColumn(AutoIncrement = true)] 6 public int Id { get; set; } 7 8 [Required] 9 public string Name { get; set; } 10 11 [Required] 12 [EmailAddress] 13 public string Email { get; set; } 14 15 [SpecialDbType(SpecialDbTypes.NTEXT)] 16 [Required] 17 public string Message { get; set; } 18 19 public DateTime Created { get; set; } 20 }


1 @if (TempData["success"] != null) 2 { 3 <p>Thank you for your message!</p> 4 } 5 else 6 { 7 using (Html.BeginUmbracoForm<ContactController>("HandlePost")) 8 { 9 <div> 10 @Html.LabelFor(m => m.Name) 11 @Html.TextBoxFor(x => x.Name) 12 @Html.ValidationMessageFor(m => m.Name) 13 </div> 14 15 <div> 16 @Html.LabelFor(m => m.Email) 17 @Html.TextBoxFor(x => x.Email) 18 @Html.ValidationMessageFor(m => m.Email) 19 </div> 20 21 <div> 22 @Html.LabelFor(m => m.Message) 23 @Html.TextAreaFor(x => x.Message) 24 @Html.ValidationMessageFor(m => m.Message) 25 </div> 26 27 <div> 28 <button type="submit">Submit</button> 29 </div> 30 } 31 }


1 public class ContactController : SurfaceController 2 { 3 [ChildActionOnly] 4 public ActionResult Render() 5 { 6 return PartialView("ContactEntry",new Models.ContactEntry()); 7 } 8 9 [HttpPost] 10 public ActionResult HandlePost(Models.ContactEntry model) 11 { 12 if (!ModelState.IsValid) 13 return CurrentUmbracoPage(); 14 15 //add to db 16 model.Created = DateTime.Now; 17 var db = ApplicationContext.DatabaseContext.Database; 18 db.Insert(model); 19 20 //send email, do other things… 21 22 TempData["Success"] = true; 23 return RedirectToCurrentUmbracoPage(); 24 } 25 }


Of course you’ll also need to make sure your db table exist, that can be done with this piece of code

1 public class App: ApplicationEventHandler 2 { 3 protected override void ApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext) 4 { 5 var ctx = applicationContext.DatabaseContext; 6 var db = new DatabaseSchemaHelper(ctx.Database, applicationContext.ProfilingLogger.Logger, ctx.SqlSyntax); 7 8 //Check if the DB table does NOT exist 9 if (!db.TableExist("ContactEntries")) 10 { 11 //Create DB table - and set overwrite to false 12 db.CreateTable(false, typeof(ContactEntry)); 13 } 14 15 } 16 }

So far this has nothing to do with UI-O-Matic it’s just standard Umbraco, MVC and PetaPoco (to insert a db entry).

But of course we now want to show these entries to the client…

Adding UI-O-Matic V2 into the mix

The only thing we have to do now is install UI-O-Matic v2 (at this moment it’s in beta and you can get it from Nuget or build the latest source from github). In this example I’ve build the latest source and installed that but all these features will make it into the final release.

1 [TableName("ContactEntries")] 2 [PrimaryKey("Id", autoIncrement = true)] 3 [UIOMatic("contactentries", "Contact Entries", "Contact Entry", 4 FolderIcon = "icon-users", ItemIcon = "icon-user", 5 SortColumn = "Created", SortOrder = "desc", 6 RenderType = UIOMaticRenderType.List)] 7 public class ContactEntry 8 { 9 [PrimaryKeyColumn(AutoIncrement = true)] 10 public int Id { get; set; } 11 12 [Required] 13 [UIOMaticListViewField] 14 [UIOMaticField] 15 public string Name { get; set; } 16 17 [Required] 18 [EmailAddress] 19 [UIOMaticListViewField] 20 [UIOMaticField] 21 public string Email { get; set; } 22 23 [SpecialDbType(SpecialDbTypes.NTEXT)] 24 [Required] 25 [UIOMaticListViewField] 26 [UIOMaticField(View = UIOMatic.Constants.FieldEditors.Textarea)] 27 public string Message { get; set; } 28 29 [UIOMaticListViewField(Config = "{’format’ : ‘{{value|relativeDate}}’}")] 30 [UIOMaticField(View = UIOMatic.Constants.FieldEditors.DateTime)] 31 public DateTime Created { get; set; } 32 }


So first we simply decorate the class with the UIOMatic attribute, providing a unique alias, a singular name and a plural name for our object and some optional parameters like which icon to use and that we would like to render in a list instead of the tree

Then we can mark the items we want in the actual editor (marked with UIOMaticField, can also specify a different editor then textstring as you can see in the example)

And mark the ones we want in the list view (marked with UIOMaticListViewField)


Screen Shot 2016-10-27 at 13.02.11

Screen Shot 2016-10-27 at 13.40.54

As you see simply by decorating our model with some additional attributes we now get an entries viewer/editor! Kapow!

UI-O-Matic v2 Beta looking for testers 0

Two weeks ago I spotted this message on my Github timeline


and I must say I was pretty excited to see the great Matt Brailsford forking the UI-O-Matic repo. In his fork he has taken the project to the next level,  housekeeping and improving the codebase and implementing quite a few new features.

What has changed?

The project has undergone major refactoring, a lot has changed, so it is not possible to upgrade from v1 to v2 without having to make a couple of changes. To outline the main differences:

  • No IUIOMatic interface and custom validation method but simply using standard .net data annotations
  • UIOMatic field property is now explicit, so if you want it to show up in the UI you need to mark your properties
  • Explicit UIOMaticListViewField attribute (use this if you want properties to show up in the listview)
  • Consistency in the js, no more uppercase properties, this has an impact if you created custom property views, use property.value instead of property.Value

What’s new?

  • Core project (there are now 2 nuget packages one for the core and 1 for the ui)
  • Folder Support
  • List view views (so you can now choose how to render a property in the list view, think image as an example)
  • Filter option on the list view (with the new UIOMaticListViewFilter attribute)
  • UIOMaticRepository (so devs can supply a custom repository object)
  • Map field type
  • New Logo



You can install the beta via Nuget:
Install-Package Nibble.Umbraco.UIOMatic –Pre


We are currently working at updating the docs (and they should be ready when the final hits the shelves), you should be able to get started with what is currently available at

Reporting bugs

You can either submit them on the forum or directly on the issue tracker

Again credits for this release go out to Matt! H5YR!

UI-O-Matic and using data annotations for validation 2

UI-O-Matic provides an simply way to validate your model by implementing the interface IUIOMatic and the member Validate() there you simply return a list of exceptions you wish to display to your editor, so you have full control over the validation logic… (as in the example shown here where it checks wether a value for the FirstName prop and LastName prop have been provider)

But something I have been toying with is the idea to use a .net standard instead which are data annotations. So you can simply decorate your properties with those (like [Required])

And luckily .net provides a way to manually validate those so we can actually use them allready, you’ll just have to write the validation code in the validate method and this end up with a mode like this

1 [UIOMatic("PollAnswers", "icon-poll", "icon-poll", RenderType = UIOMatic.Enums.UIOMaticRenderType.List)] 2 [TableName("PollAnswers")] 3 public class PollAnswer : IUIOMaticModel 4 { 5 [UIOMaticIgnoreField] 6 [PrimaryKeyColumn(AutoIncrement = true)] 7 public int Id { get; set; } 8 9 [Required] 10 public string Answer { get; set; } 11 12 [Required] 13 [StringLength(6, MinimumLength = 3)] 14 [RegularExpression(@"(\S)+", ErrorMessage = "White space is not allowed in the Poll Identifier field")] 15 public string PollIdentifier { get; set; } 16 17 public IEnumerable<Exception> Validate() 18 { 19 var context = new ValidationContext(this, serviceProvider: null, items: null); 20 var results = new List<ValidationResult>(); 21 22 Validator.TryValidateObject(this, context, results,true); 23 24 return results.Select(r => new Exception(r.ErrorMessage)); 25 } 26 }

UI-O-Matic Loves Umbraco FOrms 2

A year ago I introduced an Umbraco addon called UI-O-Matic which allows you to build up an integrated UI for your custom db tables in minutes (if you haven’t seen it I would recommend to check it out since it’s a real time saver!)

But of course all the CRUD action happens in the backoffice and I thought it would be nice to allow you to easily genereate forms based on your UI-O-Matic models that you can use in the front end of your site.

So I’m glad to present you a couple of Umbraco Forms addons that will make it super easy to link and submit data from your custom db tables.

Prevalue source type

The UI-O-Matic prevalue source type allows you to hook list field types (checkboxlist, dropdownlist, radiobuttonlist) to your Models (so to your db)


Simply select the type of object (your available models decorated with the UIOMatic attribute) the sort column and order and that’s it… it will use the primary key column as prevalue id and the ToString() method on the model as the value

Workflow type

The UI-O-Matic workflow type allows you to extend the functionality of a form in this case it will allow you to submit your record to a database table.


If you have ever used the save as Umbraco document workflow type it will look very similar, first select the type of object then you can map the different properties on that object to record fields or setup a static value.

Data source type

And finally there is also a UI-O-Matic datasource type that will give you the option to generate a form based on a Model.


Simply select the type of object and then follow the wizard.


A small bonus that you’ll also find in the project is an attribute that can be used to decorate your UI-O-Matic model so that it creates the assiciated table for you [CreateTable]

Where can I get it?

You can simply install it from Nuget. Of course this depends on Umbraco Forms and UI-O-Matic but Nuget should take care of the dependencies if you haven’t already installed them.

PM> Install-Package Nibble.Umbraco.UIOMaticLovesForms

What’s next?

I’ll try to do some follow up posts with real world examples.

Config Tree for Umbraco Now available on Nuget 0

It must have been one of the first project I created for Umbraco (timestamp says it was released December 14, 2008

But now at last it’s available as a Nuget package

Simply run the command Install-Package Nibble.Umbraco.ConfigTree in the package manager console of Visual Studio and you’ll have a new tree where you can edit all files in the /config folder of Umbraco.