UI-O-Matic + T4 Templates = Almost instant CRUD UI for your custom tables in Umbraco 5

I’ve just published a new package on Nuget that makes it even easier to generate an integrated CRUD UI for custom tables in Umbraco, as you know for UI-O-Matic you only need to create a PetaPoco poco and decorate that with some additional attibute + implement an interface for each table, if you have a lot of tables that’s really boring work mapping a table manually to a poco. So I’m happy to introduce you to the t4 templates that will do that mapping for you.

Show me

Simply install the package through nuget

PM> Install-Package Nibble.Umbraco.UIOMaticT4Templates

That will add 3 new files to your project

  • \Models\Generated\
  • \Models\Generated\UIOMatic.Core.ttinclude
  • Models\Generated\UIOMatic.Generator.ttinclude

To now generate your pocos you’ll just have to save the file, if no connectionstring is supplied it will use the Umbraco one, but if you point it to a different conn string (by adding it’s name) it will use that.


I must note that I only modified the PetaPoco t4 templates so all credit for the excellent work in that one goes to the PetaPoco team.

UI-O-Matic ListView 2

UI-O-Matic also provides the option to display your objects in a listview (since the tree isn’t the best choice when working with a lot of data).


You can specify the render type on the UIOMatic attribute (by default this is set to Tree)

1 [UIOMatic("cmsDataType", "icon-box-open", "icon-box-open", 2 RenderType = UIOMaticRenderType.List)]

Now you wont see the items in the tree anymore but in a list view

Screen Shot 2015-10-19 at 12.08.49

The listview allows you to sort by column and also filter by searching (all of this is server driven so should allow working with large datasets).

Screen Shot 2015-10-19 at 12.09.05

Ignoring columns

If you wish to exlude certain columns/properties from being displayed in the listview you can decorate your properties with the UIOMaticIgnoreFromListView attribute.

For more details on UI-O-Matic please check out the docs

Special thanks to Tom Fulton for his contributions to the listview.

Less, Sass, Coffeescript and typescript with Umbraco v7 0

From noticing a couple of questions on the our forums, it seems like plenty of folks don’t know how you would start with adding less/sass/coffeescript/typescript to your Umbraco project.

One of the easiest options is to use Optimus, it’s main feature is to do bundling and minifications. But besides that  Optimus also features a provider model for dynamic css and js languages.

Show me

When installing the Optimus core the final step of the installation will let you install additional providers for dynamic styleheet (less, sass) and script languages (coffeescript and typescript).

Screen Shot 2015-10-13 at 12.32.03

Depending on the ones you choose you’ll get an additional dynamic stylesheets/dynamic scripts tree in the settings section where you can start creating files of the installed providers.`

Screen Shot 2015-10-13 at 12.33.43

You can then start editing and saving your less/sass/coffescript/typescript file

Screen Shot 2015-10-13 at 12.36.18

These will then compile to css (in the case of less and sass) or js files (in the case of typescript and coffeescript).

That’s how easy it is!

Introducing UI-O-Matic for Umbraco, Integrated crud UI for custom db tables in minutes 12

With great pleasure I can announce the first release of a new package: UI-O-Matic.

What can it do?

Well a bit over a year ago I showed an example of how you could create a crud UI for a third party db table. As you can see in that post it is quite a bit of work to make it function…it consists of a petapoco poco, a tree controller, an api controller, angularjs views and controllers and more…

Instead of doing that now you can simply use UI-O-Matic, UI-O-Matic makes it super simple to create a crud ui for your tables, all you need to do is add some additional attributes and implement an interface that has a single member on your poco. UI-O-Matic will use that information to auto generate the UI for you.

Example please

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

This class

1 [UIOMaticAttribute("People","icon-users","icon-user")] 2 [TableName("People")] 3 public class Person: IUIOMaticModel 4 { 5 public Person() { } 6 7 [UIOMaticIgnoreField] 8 [PrimaryKeyColumn(AutoIncrement = true)] 9 public int Id { get; set; } 10 11 [UIOMaticField("First name","Enter the persons first name")] 12 public string FirstName { get; set; } 13 14 [UIOMaticField("Last name", "Enter the persons last name")] 15 public string LastName { get; set; } 16 17 [UIOMaticField("Picture", "Select a picture", View = "file")] 18 public string Picture { get; set; } 19 20 public override string ToString() 21 { 22 return FirstName + " " + LastName; 23 } 24 25 public IEnumerable<Exception> Validate() 26 { 27 var exs = new List<Exception>(); 28 29 if(string.IsNullOrEmpty(FirstName)) 30 exs.Add(new Exception("Please provide a value for first name")); 31 32 if (string.IsNullOrEmpty(LastName)) 33 exs.Add(new Exception("Please provide a value for last name")); 34 35 36 return exs; 37 } 38 }`

will generate the following integrated crud UI


Where can I get it?

You can simply install it from nuget (after installation make sure to give your users access to the new section)

PM> Install-Package Nibble.Umbraco.UIOMatic

Is there documentation?

Yup, you can find that at

And there is also a recent uHangout showing the state of the project

Now what?

So please give it a try (it should do an awesome job on simple tables but haven’t tested that much on complex ones) and let me know if there are any issues , of course it’s open for collab so fork and submit pull request at will!

One Umbraco package action to rule all config transforms 4

While working on the page not found manager one of the final steps is to package up the project and release it as an umbraco package and nuget package. Sometimes your package will need to update existing files (adding a app setting to the web.config,…)

Something that is extremely useful when working with nuget is that you can include xdt files that will transform config files.

And for the umbraco package you can use package actions to perform those actions but that can quickly end up in having to use different actions and even having to write custom ones since the functionality of individual package actions is pretty specific. (for example take a look at the ones for Optimus)

Why not make it possible to also use xdt files…

So now instead of having to write or use different package actions to update config/xml files you can use this single config transform package action.

For example this is how you could add an additional provider to the config/embeddedmedia.config

1 <Action runat="install" undo="false" alias="PNFM.TransformConfig" file="~/config/embeddedmedia.config" xdtfile="~/app_plugins/temp/embeddedmedia.xdt"></Action>

And the xdt file contents will looks like

1 <?xml version="1.0"?> 2 <embed xmlns:xdt=""> 3 4 <provider name="Instagram" type="Umbraco.Web.Media.EmbedProviders.OEmbedJson, umbraco" xdt:Transform="Insert"> 5 <urlShemeRegex><![CDATA[instagram\.com/]]></urlShemeRegex> 6 <apiEndpoint><![CDATA[]]></apiEndpoint> 7 <requestParams type="Umbraco.Web.Media.EmbedProviders.Settings.Dictionary, umbraco"></requestParams> 8 </provider> 9 10 11 </embed>

If you aren’t familiar with xdt check out this link.

Currently the package action is part of the page not found manager project but I’ll also release this as a standalone package making it possible to include it in your own projects.

EAsy Custom 404 Pages for Umbraco 2

Introducing a small new package that allows you to set your Umbraco site 404 page(s) from within the UI. The page not found manager will extend the content context menu for admins with a new option “404 page”.

Screen Shot 2015-09-22 at 10.44.23

The new option will open a dialog where you are able to select a 404 page for the current page and it’s children (either by searching or selecting a page from the content tree).

Screen Shot 2015-09-22 at 10.48.34

So you can also setup multiple 404 pages (in case you have a multilingual site or an umbraco instance running multiple sites). Since it works this way it’s more versatile then the standard umbraco 404 page setup.

You can download the package on

Or install it through nuget

If you are insterested in the sourcecode that can be found on GitHub

And if you wanna learn more you can view a live demo and a run through of the code on this weeks uHangout

Media picker directive for Umbraco v7 2

In the previous post I showed how you can use the media picker in your custom backoffice pages, now I’ve reworked the example by using an Angularjs directive. So with a directive we’ll end up with a component that is easily reusable accross different pages.

The Directive

1 angular.module("umbraco.directives") 2 .directive(umbMediaPicker, function (dialogService, entityResource) { 3 return { 4 restrict: E, 5 replace: true, 6 templateUrl: /App_Plugins/Example/umb-media-picker.html, 7 require: "ngModel", 8 link: function (scope, element, attr, ctrl) { 9 10 ctrl.$render = function () { 11 var val = parseInt(ctrl.$viewValue); 12 13 if (!isNaN(val) && angular.isNumber(val) && val > 0) { 14 15 entityResource.getById(val, "Media").then(function (item) { 16 scope.node = item; 17 }); 18 } 19 }; 20 21 scope.openMediaPicker = function () { 22 dialogService.mediaPicker({ callback: populatePicture }); 23 } 24 25 scope.removePicture = function () { 26 scope.node = undefined; 27 updateModel(0); 28 } 29 30 function populatePicture(item) { 31 scope.node = item; 32 updateModel(; 33 } 34 35 function updateModel(id) { 36 ctrl.$setViewValue(id); 37 38 } 39 } 40 }; 41 });

The Template

1 <div> 2 <ul class="unstyled list-icons" ng-if="node"> 3 <li> 4 <i class="icon icon-delete red hover-show pull-right" ng-click="removePicture()"></i> 5 6 <i class="icon {{node.icon}} hover-hide"></i> 7 {{}} 8 </li> 9 </ul> 10 <ul class="unstyled list-icons"> 11 <li> 12 <i class="icon icon-add blue"></i> 13 <a href ng-click="openMediaPicker()" prevent-default> 14 Select 15 </a> 16 </li> 17 </ul> 18 </div>

Using the directive

First we of course need to make sure to update the package manifest and include the directive in the array of js files. Then the directive can be used as

1 <umb-media-picker ng-model="person.pictureId" />

This directive has been added to the example project.

Using the media picker in your custom Umbraco backoffice pages 0

I’ve extended the Custom sections/trees/Pages/Dialogs in Umbraco v7 example project with the use of a media picker. I’ll quickly outline the bits needed.

So first we need a place to store the media id, this will be on the person class

1 [DataMember(Name = "pictureId")] 2 public int PictureId { get; set; }

Then update the view to display a media picker (you have full control over this markup). Important bits here are the openMediaPicker call, the ng-if and the stuff between {{}}

1 <umb-control-group label="Picture" description="Person’s picture’"> 2 <ul class="unstyled list-icons" ng-if="node"> 3 <li> 4 <i class="icon icon-delete red hover-show pull-right" ng-click="removePicture()"></i> 5 6 <i class="icon {{node.icon}} hover-hide"></i> 7 {{}} 8 </li> 9 </ul> 10 <ul class="unstyled list-icons"> 11 <li> 12 <i class="icon icon-add blue"></i> 13 <a href ng-click="openMediaPicker()" prevent-default> 14 Select 15 </a> 16 </li> 17 </ul> 18 </umb-control-group>

Now in the controller we need the openMediaPicker function (it’s using the dialogService here)

1 $scope.openMediaPicker = function() { 2 dialogService.mediaPicker({ callback: populatePicture }); 3 }

And the callback method being

1 function populatePicture(item) { 2 $scope.node = item; 3 $scope.person.pictureId =; 4 }

So we set the pictureId property of the person to the id of the returned media entity. To display the node name and node icon we set a node property on the model.

To remove the selected media item

1 $scope.removePicture = function() { 2 $scope.node = undefined; 3 $scope.person.pictureId = 0; 4 }

So this will now work to select and remove an item but we also need to make sure that when the page loads the node property on the model is populated (making use of entityResource so make sure to inject that).

1 if ($scope.person.pictureId > 0){ 2 entityResource.getById($scope.person.pictureId, "Media").then(function (item) { 3 $scope.node = item; 4 }); 5 }

That’s it, complete example project is available at

EmbeddedMedia.config , supporting additional third party services in the Umbraco RTE 0

The RTE in Umbraco 7 (and since v4.9) offers a super simple way of inserting rich content from third party services (videos from youtube, image from flickr, …) but sometimes your editors will try to insert something that isn’t supported…


Luckily you can easily plug in additional third party services

If service support oembed

In that case it should just be a matter of adding an additinal entry to the EmbeddedMedia.config file. Let’s say you want to support videos from TED.

The details we get from oembed:

So with those details I can add a new entry to the config file (just look at the existing ones to get an overview of the xml elements you need).

1 <!– TED Settings –> 2 <provider name="TED" type="Umbraco.Web.Media.EmbedProviders.OEmbedVideo, umbraco" supportsDimensions="False"> 3 <urlShemeRegex><![CDATA[ted\.com/]]></urlShemeRegex> 4 <apiEndpoint><![CDATA[]]></apiEndpoint> 5 <requestParams type="Umbraco.Web.Media.EmbedProviders.Settings.Dictionary, umbraco"></requestParams> 6 </provider>

And now content editors can easily insert talks from


If service doesn’t support oembed

Even if the third party service doesn’t offer oembed support it’s still possible to provide this easy way of inserting rich content.

Since you can write custom providers, so if the service has an API you can take advantage of that.

Here is an example of a custom provider, this one adds Giphy support.

1 public class Giphy : AbstractProvider 2 { 3 public override bool SupportsDimensions 4 { 5 get { return false; } 6 } 7 8 public override string GetMarkup(string url, int maxWidth, int maxHeight) 9 { 10 var u = new Uri(url); 11 //Example url 12 var id = u.Segments.Last().Split(-).Last(); 13 //using public api key atm 14 var api = string.Format("{0}?api_key=dc6zaTOxFJmzC", id); 15 16 using(var apiClient = new HttpClient()) 17 { 18 19 var dataFromAPI = apiClient.GetAsync(api).Result; 20 21 if (dataFromAPI.IsSuccessStatusCode) 22 { 23 var APIresult = dataFromAPI.Content.ReadAsStringAsync(); 24 25 var result = JObject.Parse(APIresult.Result); 26 27 var embedUrl = result.SelectToken("data.images.original.url").Value<string>(); 28 29 return string.Format("<img src=\"{0}\"/>", embedUrl); 30 } 31 } 32 //fall back to a default ‘fail’ gif 33 return string.Format("<iframe src=\"//{0}\" width=\"{1}\" height=\"{2}\" frameBorder=\"0\" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>", 34 "bJAi9R0WWOohO",250,153); 35 } 36 }

So once this provider is in place we also need to add an entry to the config file

1 <!– Giphy Settings , not an OEmbed one –> 2 <provider name="Giphy" type="AnimatedGifs.Giphy, AnimatedGifs"> 3 <urlShemeRegex><![CDATA[giphy\.com/]]></urlShemeRegex> 4 </provider>

And now our content editors can insert gifs Glimlach


So that’s how you can use the EmbeddedMedia.config file, sourcecode for the example provider is available on github

Making use of resources and services on your Umbraco v7 Controllers 1

As you can see on the Umbraco v7 API documentation, v7 is shipped with several resources and services you can use in your own controllers. Lets take a look at a simple example. The notification service.

I’m actually making use of the service in the demo project, to display a success notification if the custom item has been saved correctly.


First simply inject the service (as a param on your controller function, similiar to how $scope is injected)

1 angular.module("umbraco").controller("People.PersonEditController", 2 function ($scope, personResource, notificationsService) { 3

And after that you can make use of the service

1 notificationsService.success("Success", person.firstName + " " + person.lastName + " has been saved");

That’s it! Make sure to check out the docs to see the options you have with each service/resource.

« Previous PageNext Page »