Archive for the 'Package' Category

UI-O-Matic Event Model 0

The most recent version of UI-O-Matic (1.4.0 at this moment) introduces a couple of events that allow you to do some interesting stuff. The events are all placed on the PetaPocoObjectController (that’s the controller responsable for handling the crud operations).

Following the Umbraco convention there are before and after events.

BuildingQuery and BuildedQuery

These execute when UI-O-Matic builds the sql query for fetching the list view data. By default UI-O-Matic will fetch all the data from the table but using these events you can limit that by still having control over the query before it is executed.

CreatingObject and CreatedObject

These will execute when UI-O-Matic is inserting an object, so you can use these events to set values.

UpdatingObject and UpdatedObject

These will execute when UI-O-Matic is updating an object


1 public class EventHandlerscs: ApplicationEventHandler 2 { 3 protected override void ApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext) 4 { 5 UIOMatic.Controllers.PetaPocoObjectController.CreatingObject += PetaPocoObjectController_CreatingObject; 6 UIOMatic.Controllers.PetaPocoObjectController.BuildingQuery += PetaPocoObjectController_BuildingQuery; 7 } 8 9 void PetaPocoObjectController_CreatingObject(object sender, UIOMatic.ObjectEventArgs e) 10 { 11 if (e.Object.GetType() == typeof (ccpEvent)) 12 { 13 ccpEvent ob = (ccpEvent) e.Object; 14 ob.IsApproved = true; 15 } 16 } 17 18 void PetaPocoObjectController_BuildingQuery(object sender, UIOMatic.QueryEventArgs e) 19 { 20 if (e.TableName == ccpEvent) 21 e.Query.Where(AREAID = @0, 2); 22 } 23 }

UI-O-Matic, handling Foreign Keys 9

Something you’ll bump into sooner or later when working with custom tables are relationships between tables.

Let’s say we have the following 2 pocos (and matching tables)


1 [UIOMatic("People", "icon-users", "icon-user",SortColumn="FirstName")] 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("Firstname","Enter your firstname")] 12 public string FirstName { get; set; } 13 14 [UIOMaticField("Lastname", "Enter your lastname")] 15 public string LastName { get; set; } 16 17 [UIOMaticField("Picture", "Please 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 }


1 [UIOMatic("Dogs", "icon-users", "icon-user", RenderType = UIOMaticRenderType.List)] 2 [TableName("Dogs")] 3 public class Dog : IUIOMaticModel 4 { 5 public Dog() { } 6 7 [UIOMaticIgnoreField] 8 [PrimaryKeyColumn(AutoIncrement = true)] 9 public int Id { get; set; } 10 11 12 public string Name { get; set; } 13 14 [UIOMaticField("Is castrated", "Has the dog been castrated")] 15 public bool IsCastrated { get; set; } 16 17 18 19 public int OwnerId { get; set; } 20 21 public override string ToString() 22 { 23 return Name; 24 } 25 26 public IEnumerable<Exception> Validate() 27 { 28 var exs = new List<Exception>(); 29 30 if (string.IsNullOrEmpty(Name)) 31 exs.Add(new Exception("Please provide a value for name")); 32 33 if (OwnerId == 0) 34 exs.Add(new Exception("Please select an owner")); 35 36 37 return exs; 38 } 39 }

You’ll see that the Dog class has an property of type int called OwnerId, this will be populated with the id of a Person.

If we let UI-O-Matic render this you’ll get an input of type number but that isn’t what we want since we don’t know which number matches a certain person.

Screen Shot 2015-10-26 at 10.57.47

So instead we want the see the persons full name and be able to select it from a dropdown.

All that we’ll need to do is use the UIOMaticField attribute and say that we want to use a dropdown and pass our dropdown some configuration

1 [UIOMaticField("Owner", "Select the owner of the dog", View = "dropdown", 2 Config = "{’typeName’: ‘Example.Models.Person, Example’, ‘valueColumn’: ‘Id’, ’sortColumn’: ‘FirstName’, ‘textTemplate’ : ‘FirstName + \" \"+ LastName ‘}")] 3 public int OwnerId { get; set; }

So the view is set to dropdown and the config we are passing is (in json format)

  • The name of the type that will be used to populate the dropdown
  • The column used for the value of the item
  • The template used for the text of the item
  • The column used for sorting

Now if we let UI-O-Matic render this we’ll get the following result

Screen Shot 2015-10-26 at 11.04.57

Besides dropdown you can also use a checkboxlist or radiobuttonlist, for more info please check the documentation

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!

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

Seek and destroy 1.0 Release 4

SeekAndDestroyLogoThe ajax locator package I’ve been working on the last couple of freedom fridays is available as a package on today Smile

If you haven’t seen it in action make sure to check out this quick preview video.

Here is a quick overview of it’s features

Dashboard control

It features a dashboard control (in the developer section) that can install the google maps datatype, add a new property of that type to your doc type(s) and then geocode existing content based on the address you have stored. So you should be up and running in a couple of minutes (even if you don’t have any coordinates on your content documents yet).


Fully Customizable AJAX Locator control

By inserting the macro you have a working locator in a couple of clicks but of course it’s output is fully customizable just by updating the Partial View Macro File associated with the Macro. So you can tailor it to your needs! If you want custom google map markers check out ( and



The locator control includes some nice features, it loads a default location based on the users IP address, you can set it in street view mode and there is also a directions mode.


So the package is available for download on

If you are interested in the sourcecode that’s available on github

Please not that since this pacakge uses an UmbracoAPIController you’ll need at least Umbraco v6.1 to run this package

Introducing Optimus Lite, instantly make any Umbraco website faster! 0

OptimusLiteLogoIf you’ve been following the latest blog posts you know I’ve been working on Optimus (bundling and minification for Umbraco built on top of the web optimization framework). In the comments Dima Stefantsov pointed out that there is another nice framework out there called  Request reduce.

Request reduce

Compared to the web optimization framework request reduce creates bundles automaticity, this means it’s just a matter of installing and your site performance is immediately improved.

For full overview please check out 

Of course all credits for this package goes to the Request reduce creator Matt Wrock

The only change I made was to make sure it ignores the umbraco backoffice since that had some side effects.


To see it in action check out this screenr



Package is available on

Optimus 1.0 release 0

We are done with the finishing touches to the Optimus package for Umbraco and are glad to announce that the 1.0 release is available today!

If you haven’t seen it in action yet, be sure to check out this quick overview


What’s new?

web optimization framework 1.1.0

The web optimization framework has been updated to the latest version (1.1.0), so you can make use of the Element template strings if you want full control over the link/script tag that will be inserted (this one’s for you James South)

@Scripts.RenderFormat(“<script src=’{0}’ async></script>”,”~/bundles/jquery”)

No empty trees

You’ll only get the dynamic scripts/stylesheet tree if you have at least 1 of the providers installed


Possible to disable minification on a bundle with the bundle editor UI


Bundle dynamic stylesheets/scripts directly

As requested by Jeavon Leopold it’s now possible to include less/sass/typescript/coffeescript files directly in a bundle (needs to be enabled in the \App_Plugins\Optimus\config\bundles.config file)


Some code refactor has been done to speed up several parts of the core


And finally the installer now handles the necessary files updates (thanks to the package action contrib team for the helpful snippets)


The package is available at

If you are interested in the sourcecode that can be found at

Introducing Optimus: Resource bundling, minification and transformation for Umbraco 10

In collab with Mr Warren Buckley we are glad to announce the beta release of a new Umbraco package.

Meet Optimus

In essence Optimus is a UI layer on top of  the Web Optimization framework for Umbraco, making it possible to create script and style bundles from within the backoffice.

Why should you bundles those resources? Well in short: bundling and minification improves request load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript), for a good intro check

After installing Optimus you’ll end up with some new bits in the Settings section that allow you to create both script and style bundles by simply selecting the available files in the /css or /scripts folder


In addition to manually creating these bundles you’ll also find a new option in the edit template toolbar (for both views and masterpages) that allows you to simply select script/link tags and auto create a bundle from those (can’t get any easier).


more than meets the eye

Besides being able to bundle your resources Optimus also features a provider model for dynamic stylesheet and script languages.

The providers available today are:

As a final step of the installation you’ll be able to choose the providers you want to include (thanks to Matt Brailsford for letting us lend some code from the Universal Media Picker project).


Depending on the ones you installed you’ll be able create files of that type

In the new dynamic scripts tree


And dynamic stylesheets tree


Once created you can start writing code in the editor, the editor will check for errors and highlight the linenumber in case of an error.


If the transformation is successful you’ll end up with a plain js/css file that you can then use (also in bundles)


For a quick demo check out this screencast

It’s a beta

So today the beta is available on

In addition to installing the package you’ll need to do some manual web.config updates outlined here: course this will be done automatically by the final release)

It’s only been tested on Umbraco v6 but for the final release we’ll try to include the latest v4 (eta next friday).

Look who’s editing now 3

As a result of freedom fridays at the umbraco HQ I’ve made a new little umbraco package.

Make sure your content editors don’t end up editing the same document and overwriting each others changes with this addon for umbraco.

In environments with multiple editors the editors will see in the umbraco content tree which documents are currently being edited.


Also on the content page there will be a notification when another editors are viewing/editing the same document.


For a quick demo check out this video


You can download the package on the project page at’s-editing-now

Thoughts,tips for creating umbraco packages 4

I’ve created my share of umbraco packages and thought I’d try to share some tips/insights.

Creating packages is easy, the built-in package creator makes it super simple and with package actions you can perform additional common tasks (like updating the xsltextensions) without having to write a single line of code.

It really takes a minimal effort to package something up that you made, even if it’s very project specific it should be possible to isolate the functionality and package it up.

Dare to share

Even a simple package can be a great help, so don’t hesitate and share


To avoid conflicts and overwriting other existing items when installing a package, make sure you have unique and meaningful names

  • Assemblies

Starting these with your name or company name followed by a project name should be enough to make them unique
FE: Nibble.Umb.Poll

  • Stylesheets, Scripts, Document types, Templates, XSLT files, Macros

A unique and meaningful name that links them back to the package, so it easy to see that they are part of a package
FE: not style.css but starrating.css
not list.xslt but bloglistposts.xslt       

  • Usercontrols

placing these in a new unique folder inside the /usercontrols folder makes it easy to see that they are part of a package
FE: /usercontrols/Nibble.Umb.Poll/poll.ascx

  • Config files

place these in the /config folder (again, with a unique and meaningful name)


Package are really easy to install but in some cases the package installation might fail. So it’s always great to provide some manual installation instructions, just in case.

Think ahead

You might have created a package with a simple site in mind, but don’t forget they can/will also be used on multilingual sites, site running a different database engine. Or in case it’s a datatype, will be used with Canvas, autoform, doc2form. It’s a great plus if this is taken into account.

What doesn’t work

If the package only works with a certain umbraco version and up or if it only works on sql server, don’t forget to mention this to avoid that people install it on non supported installations.


I’ve also added this post to the wiki on, if you have anything to add/change (or correct my bad spelling) please do so .

Next Page »